TextField и TextFormField

Для ввода текста во Flutter может применяться виджет TextField:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: TextField(),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

Следует отметить, что для виджета TextField необходимо, чтобы один из родительских контейнеров представлял виджет Material или такие виджеты, как Card, Dialog, Drawer или Scaffold (как в примере выше).

Конструктор виджета принимает довольно много параметров, поэтому отмечу лишь некоторые:

• decoration: задает стилизацию виджета с помощью объекта InputDecoration

• enabled: значение типа bool, которое указывает, доступно ли для ввода текстовое поле (при значении false поле для ввода недоступно)

• expands: значение типа bool, которое указывает, будет ли виджет заполнять все доступное пространство контейнера

• keyboardType: устанавливает тип клавиатуры в виде объекта TextInputType

• maxLength: максимальное количество символов, которое можно ввести в текстовое поле

• maxLines: максимальное количество строк

• minLines: минимальное количество строк

• obscureText: значение типа bool, которое указывает, будет ли виджет скрывать с помощью маски вводимые символы (например, при вводе пароля)

• obscuringCharacter: задает символы, которые применяются в качестве маски для вводимых символов, если параметр obscureText равен 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("METANIT.COM")))
  ));
}

Оформление поля ввода

С помощью параметра decoration, который представляет объект InputDecoration, можно стилизовать виджет TextField.

Некоторые основные параметры конструктора класса InputDecoration:

• border: устанавливает границу виджета в виде объекта InputBorder. По умолчанию виджет имеет нижнюю границу. Если надо полностью убрать границу, то можно использовать значение InputBorder.none

  Для создания границы можно принимать еще два класса: OutlineInputBorder (создает границу вокруг элемента) и UnderlineInputBorder (создает только нижнюю границу).

• contentPadding: устанавливает отступы от границ виджета при вводе текста, представляет объект EdgeInsetsGeometry

• fillColor: устанавливает объект Color для заполнения виджета цветом

• filled: значение типа bool, которое указывает, будет ли применяться заполнение виджета цветом из параметра fillColor (заполнение цветом применяется при значении true)

• hintText: приглашение для ввода текста, которое появляется в виджете при отсутствии в нем текста

• hintStyle: стиль текста из параметра hintText в виде объекта TextStyle

• icon: виджет (объект Widget), который представляет иконку, отображаемую перед виджетом

• helperText: вспомогательный текст, который появляется снизу справа от виджета и который указывает, как вводимое значение будет использоваться

• helperStyle: стиль текста из параметра helperText в виде объекта TextStyle

• labelText: текст метки, которая появляется сверхе виджета и описывает предназначение текстового поля

• labelStyle: стиль текста из параметра labelText в виде объекта TextStyle

Например, уберем границу, но добавим фоновый цвет виджета:

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")),)
  ));
}

Теперь установим полную границу по всем сторонам и применим иконку:

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 создает границу вокруг виджета. Параметр helperText устанавливает вспомогательный текст, который появляется снизу виджета. А параметр icon устанавливает в качестве иконки иконку Icons.login из коллекции встроенных иконок.

Обработка ввода текста

С помощью параметров onChanged и onSubmitted конструктора мы можем установить функции, которые будут вызываться при вводе текста. Функция onChanged вызывается при каждом изменении текста в виджете. Функция onSubmitted вызывается, если пользователь завершил ввод, например, нажал кнопку ввода на клавиатуре.

Обе эти функции представляют функцию void ValueChanged (String value), которая в качестве параметра принимает строку - введенный текст.

Простейшее применение:

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")))
  ));
}

Как видно из выполнения программы, функция onChanged вызывается при каждом изменении ввода - добавлении или удалении символа, тогда как функция onSubmitted срабатывает один раз при завершении.

Соответственно, используя данные функции, можно изменять состояние виджета:

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<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.

Для проверки ввода вводимое значение выводится в виджет Text, размещенный выше TextField.

TextFormField

Виджет TextFormField во многом аналогичен TextField, также представляет текстовое поле и предоставляет те же возможности за тем исключением, что он добавляет к параметрам конструктора параметр initialValue, с помощью которого можно указать начальное значение в текстовом поле:

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<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);
  }
}