Flutter ramka uchun qo'llanma 1-bob. Flutterga kirish Flutter nima. O'rnatish

TextField va TextFormField

Flutter-da matn kiritish uchun TextField vidjetidan foydalanish mumkin:

1 2 3 4 5 6 7 8 9

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: TextField(),         appBar: AppBar(title: Text("METANIT.COM")),)   )); }

Shuni ta'kidlash kerakki, TextField vidjeti asosiy konteynerlardan birini Materiallar vidjetini yoki Card, Dialog, Drawer yoki Scaffold kabi vidjetlarni ifodalashini talab qiladi (yuqoridagi misolda bo'lgani kabi).

Vidjet konstruktori juda ko'p parametrlarni oladi, shuning uchun men faqat bir nechtasini belgilayman:
dekoratsiya: IInputDecoration obyekti yordamida vidjetga uslublar kiritadi
yoqilgan: matn maydoni kiritish uchun mavjudligini ko'rsatadigan bool qiymati (agar noto'g'ri bo'lsa, kiritish maydoni mavjud emas)
kengaytiradi: vidjet barcha mavjud konteyner maydonini to'ldirishini ko'rsatadigan bool qiymati
keyboardType: Klaviatura turini TextInputType obyekti sifatida o‘rnatadi
maxLength: matn maydoniga kiritilishi mumkin bo'lgan belgilarning maksimal soni

maxLines: maksimal satrlar soni

minLines: minimal qatorlar soni
obscureText: vidjet kiritilgan belgilarni maskalashi yoki yo'qligini ko'rsatadigan bool qiymati (masalan, parolni kiritishda)
obscuringCharacter: obscureText to'g'ri bo'lganda kirish belgilar uchun niqob sifatida foydalanish uchun belgilarni belgilaydi.
readOnly: vidjetdagi matnni oʻzgartirish mumkinligini koʻrsatadigan bool qiymati
uslub: TextStyle obyekti sifatida kiritilgan matnning uslubi
textAlign: TextAlign obyekti sifatida matnning gorizontal tekislanishini belgilaydi
textAlignVertical: matnning vertikal tekislanishini TextAlignVertical obyekti sifatida belgilaydi
textDirection: TextDirection obyekti yordamida matn yo‘nalishini o‘rnatadi
Keling, ba'zi parametrlarni qo'llaymiz:

1 2 3 4 5 6 7 8 9 10 11 12

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: TextField(             style: TextStyle(fontSize: 22, color: Colors.blue),             maxLines: 10,             minLines: 5),         appBar: AppBar(title: Text("METANIT.COM")))   )); }

Kirish maydonini formatlash

InputDecoration ob'ektini ifodalovchi bezak parametridan foydalanib, TextField vidjetini uslublashingiz mumkin.
InputDecoration sinfining konstruktori uchun ba'zi asosiy parametrlar:
chegara: vidjet chegarasini InputBorder obyekti sifatida o‘rnatadi. Odatiy bo'lib, vidjet pastki chegaraga ega. Agar siz chegarani butunlay olib tashlashingiz kerak bo'lsa, unda siz InputBorder.none qiymatidan foydalanishingiz mumkin
Chegarani yaratish uchun yana ikkita sinfni olish mumkin: OutlineInputBorder (element atrofida chegara hosil qiladi) va UnderlineInputBorder (faqat pastki chegarani yaratadi).
contentPadding: matn kiritishda vidjet chegaralarini to‘ldirishni o‘rnatadi, EdgeInsetsGeometry obyektini ifodalaydi
fillColor: Rang obyektini vidjetni rang bilan to‘ldirish uchun o‘rnatadi

to'ldirilgan: vidjet fillColor parametridagi rang bilan to'ldirilishini ko'rsatadigan bool qiymati (agar rost bo'lsa rang bilan to'ldirilgan bo'ladi)

hintText: vidjetda matn boʻlmaganda paydo boʻladigan matn taklifi
hintStyle: TextStyle obyekti sifatida hintText parametridan matn uslubi
icon: vidjet oldida ko'rsatilgan belgini ifodalovchi vidjet (Vidjet obyekti).
helperText: vidjetning pastki oʻng tomonida paydo boʻladigan va kiritilgan qiymatdan qanday foydalanishni koʻrsatuvchi yordamchi matn

helperStyle: TextStyle obyekti sifatida helperText parametridan matn uslubi

labelText: vidjet tepasida paydo boʻladigan va matn maydonining maqsadini tavsiflovchi yorliq matni
labelStyle: TextStyle obyekti sifatida labelText parametridagi matn uslubi
Masalan, chegarani olib tashlaymiz, lekin vidjetning fon rangini qo'shamiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: TextField(decoration: InputDecoration(             border: InputBorder.none,             hintText: "Введите логин",             fillColor: Colors.black12,             filled: true         )),         appBar: AppBar(title: Text("METANIT.COM")),)   )); }

Keling, har tomondan to'liq chegara o'rnatamiz va belgini qo'llaymiz:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import 'package:flutter/material.dart';   oid main() {   runApp(MaterialApp(       home:  Scaffold(         body: TextField(decoration: InputDecoration(             border: OutlineInputBorder(),             icon: Icon(Icons.login),             hintText: "Введите логин",             helperText: "Логин используется для входа в систему",         )),         appBar: AppBar(title: Text("METANIT.COM")))   )); }

OutlineInputBorder klassi konstruktori vidjet atrofida chegara hosil qiladi. HelperText parametri vidjetning pastki qismida paydo bo'ladigan yordamchi matnni o'rnatadi. Va belgi parametri o'rnatilgan piktogramma to'plamidan Icons.login belgisini belgi sifatida o'rnatadi.

Matn kiritishga ishlov berish

Konstruktorning onChanged va onSubmitted parametrlaridan foydalanib, matn kiritilganda chaqiriladigan funksiyalarni sozlashimiz mumkin. Vidjetdagi matn har doim o‘zgarganda onChanged funksiyasi chaqiriladi. OnSubmitted funksiyasi foydalanuvchi yozishni tugatgandan so'ng chaqiriladi, masalan, klaviaturadagi Enter tugmasini bosish.
Bu funksiyalarning har ikkalasi ham ValueChanged (String qiymati) funksiyasini ifodalaydi, u parametr sifatida qatorni oladi - kiritilgan matn.
Eng oddiy dastur:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: TextField(             onSubmitted: (text) {               print("onSubmitted");               print("Введенный текст: $text");             },             onChanged: (text) {               print("onChanged");               print("Введенный текст: $text");         }),         appBar: AppBar(title: Text("METANIT.COM")))   )); }

Dasturning bajarilishidan ko'rinib turibdiki, kirish o'zgarganda onChanged funksiyasi chaqiriladi - belgi qo'shiladi yoki o'chiriladi, onSubmitted funksiyasi esa tugallangandan so'ng bir marta ishga tushiriladi.

Shunga ko'ra, ushbu funktsiyalardan foydalanib, siz vidjet holatini o'zgartirishingiz mumkin:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(         body: Person(),         appBar: AppBar(title: Text("METANIT.COM")))   )); }   class Person extends StatefulWidget {     Person({ Key key}) : super(key: key);     @override   _PersonState createState() => _PersonState(); } class _PersonState extends State {     String _name = "Tom";     _changeName(String text){     setState(() =>_name = text);   }   @override   Widget build(BuildContext context) {       return Column(children:[       Text("Имя пользователя: $_name", style: TextStyle(fontSize: 22)),       TextField(         style: TextStyle(fontSize: 22),         onChanged: _changeName)     ],     crossAxisAlignment: CrossAxisAlignment.start);   } }

Bunday holda, shartli foydalanuvchi nomini _name o'zgaruvchisi ko'rinishida saqlaydigan Person vidjeti uchun _PersonState holat klassi aniqlanadi. Va onChanged funksiyasi chaqirilganda, u _changeName () usulini bajaradi, bunda u _name o'zgaruvchisining qiymatini o'zgartiradi.
Kirishni tekshirish uchun kiritilgan qiymat TextField tepasida joylashgan Matn vidjetiga chiqariladi.

TextFormField

TextFormField vidjeti xuddi TextField ga o‘xshaydi, u matn maydonini ham ifodalaydi va bir xil funksionallikni ta’minlaydi, faqat konstruktor parametrlariga initialValue parametrini qo‘shadi, undan matn maydonida boshlang‘ich qiymatni belgilash uchun foydalanishingiz mumkin:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

import 'package:flutter/material.dart';   void main() {   runApp(MaterialApp(       home:  Scaffold(           body: Person(),           appBar: AppBar(title: Text("METANIT.COM")))   )); }   class Person extends StatefulWidget {     Person({ Key key}) : super(key: key);     @override   _PersonState createState() => _PersonState(); } class _PersonState extends State {     String _name = "Tom";     _changeName(String text){     setState(() =&g; _name = text);   }     @override   Widget build(BuildContext context) {       return Column(children:[       Text("Имя пользователя: $_name", style: TextStyle(fontSize: 22)),       TextFormField(initialValue: _name,           style: TextStyle(fontSize: 22),           onChanged: _changeName)     ],         crossAxisAlignment: CrossAxisAlignment.start);   } }