Loading...
TextField жана TextFormField
TextField жана TextFormField
TextField виджетин Flutterге текст киргизүү үчүн колдонсо болот :
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: TextField(),
appBar: AppBar(title: Text("TextField / TextFormField
")),) )); }
TextField виджети, анын негизги контейнерлеринин бирин Material виджетти же Card, Dialog, Drawer же Scaffold сыяктуу виджеттерди көрсөтүүнү талап кылаарын эске алыңыз (жогорку мисалдагыдай).
Виджет конструктору көптөгөн параметрлерди талап кылат, ошондуктан бир нечесин айтып кетейин:
Decoration : InputDecoration объектинин жардамы менен виджеттин стилин орнотот.
enabled : текст талаасы киргизүү үчүн жеткиликтүү же жок экенин көрсөткөн bool мааниси (маани false киргизүү үчүн жеткиликтүү болбогондо)
expands : виджет бардык жеткиликтүү контейнер мейкиндигин толтурарын көрсөткөн bool мааниси.
keyboardType : баскычтоптун түрүн TextInputType объекти катары орнотот.
maxLength : Текст талаасына киргизиле турган белгилердин максималдуу саны.
maxLines : саптардын максималдуу саны.
minLines : саптардын минималдуу саны.
obscureText : виджет киргизилген символдорду маска кылабы же жокпу көрсөткөн bool мааниси (мисалы, сырсөздү киргизүүдө)
obscuringCharacterobscureText : Параметр болгондо киргизүү символунун маскасы катары колдонула турган символдорду белгилейт true. readOnly : виджеттеги текстти өзгөртүүгө болорун көрсөткөн bool мааниси
style : TextStyle объекти катары киргизилген тексттин стили.
textAlign : TextAlign объекти катары тексттин горизонталдуу тегиздөөсүн орнотот.
textAlignVertical : TextAlignVertical объекти катары тексттин вертикалдуу тегиздөөсүн аныктайт.
textDirection : TextDirection объектинин жардамы менен тексттин багытын орнотот.
Келгиле, кээ бир параметрлерди колдонолу: 
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("Аталышы")))
)); }
Киргизүү талаасынын стили
InputDecoration объектисин билдирген декорация параметри TextField виджетинин стилин түзүүгө мүмкүндүк берет.
InputDecoration класс конструкторунун кээ бир негизги параметрлери:
border : Виджеттин чектерин InputBorder объекти катары орнотот . Демейки боюнча, виджеттин төмөнкү чеги бар. Эгер чекти толугу менен алып салышыңыз керек болсо, анда InputBorder.none маанисин колдоно аласыз.
Чек түзүү үчүн дагы эки классты ала аласыз: OutlineInputBorder (элементтин айланасында чек түзөт) жана UnderlineInputBorder (төмөнкү чекти гана түзөт).
contentPadding : текстти киргизүүдө виджеттин чектеринен толтурууну орнотот, EdgeInsetsGeometry объектисин көрсөтөт.
fillColor : виджетти түс менен толтуруу үчүн Color объектин орнотот.
filled : виджет fillColor параметриндеги түс менен толтурула тургандыгын көрсөткөн bool мааниси (маани болгондо түс менен толтуруу колдонулат true).
hintText : виджетте текст жок болгондо пайда боло турган текст сунушу.
hintStyle : TextStyle объекти катары hintText параметринен тексттин стили.
icon : виджеттин алдында көрсөтүлө турган сөлөкөттү билдирген виджет ( Виджет объектиси).
helperText : виджеттин ылдыйкы оң жагында пайда болгон жана киргизүү мааниси кандайча колдонула тургандыгын көрсөткөн жардамчы текст.
helperStyle : TextStyle объекти катары helperText параметринен тексттин стили.
labelText : Виджеттин үстүндө пайда болгон жана текст талаасынын максатын сүрөттөгөн тексти.
labelStyle : TextStyle объекти катары labelText параметринен тексттин стили.
Мисалы, чекти алып салалы, бирок виджетке фон түсүн кошолу: 
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("AppBar(")),)
)); }
Эми бардык тараптан толук чек коюп, сөлөкөтүн колдонолу: 
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("AppBar(")))
)); }
Класстын конструктору OutlineInputBorder виджеттин айланасында чек түзөт. Параметр helperText виджеттин ылдый жагында пайда болгон жардам текстин орнотот. Жана параметр орнотулган иконалар жыйнагынан сөлөкөтүн icons катары орнотот.Icons.login
Текст киргизүүнү иштетүү
Конструктордун onChanged жана onSubmitted параметрлери менен биз текст киргизилгенде чакыра турган функцияларды орното алабыз. onChanged функциясы виджеттеги текст өзгөргөн сайын чакырылат. onSubmitted функциясы колдонуучу клавиатурадагы enter баскычын басуу сыяктуу киргизүүнү аяктаганда чакырылат.
void ValueChanged (String value) Бул функциялардын экөө тең сапты параметр катары кабыл алган функцияны билдирет - киргизилген текст.
Эң жөнөкөй колдонмо:
Программанын аткарылышынан көрүнүп тургандай, функция onChanged киргизүү өзгөргөн сайын чакырылат - символду кошуу же жок кылуу, ал эми функция onSubmittedаягында бир жолу күйөт.
Демек, бул функцияларды колдонуу менен, сиз виджеттин абалын өзгөртө аласыз:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Person(),
appBar: AppBar(title: Text("AppBar")))
)); }
class Person extends StatefulWidget {
Person({ Key key}) : super(key: key);
@override
_PersonState createState() => _PersonState();
}
class _PersonState extends State<Person>{
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); } }
Бул учурда, Person виджетинде шарттуу колдонуучунун атын өзгөрмө катары сактаган _PersonState абал классы бар _name. Функция чакырылганда, onChanged метод аткарылат _changeName(), мында ал _name өзгөрмөнүн маанисин өзгөртөт. Киргизүүнү ырастоо үчүн, киргизүү мааниси TextField үстүндө жайгашкан text виджетине чыгарылат.
TextFormField
TextFormField виджети көп жагынан окшош TextField, ал ошондой эле текст талаасын көрсөтөт жана ошол эле функцияны камсыз кылат, бирок ал конструктор параметрлерине initialValue параметрин кошот , анын жардамы менен текст талаасында баштапкы маанини көрсөтө аласыз:
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Person(),
appBar: AppBar(title: Text("AppBar")))
));
}
class Person extends StatefulWidget {
Person({ Key key}) : super(key: key);
@override
_PersonState createState() => _PersonState();
}
class _PersonState extends State<Person>{
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);
}
}