Какие способы ввода текста (текстовые поля) есть в Flutter?

«Какие способы ввода текста (текстовые поля) есть в Flutter?» — вопрос из категории UI и вёрстка, который задают на 29% собеседований Flutter Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Основной виджет для ввода текста в Flutter — TextField и его расширенная форма TextFormField для работы с формами. Также есть варианты для iOS-стиля.

1. TextField: Базовый виджет для однострочного или многострочного ввода.

TextField(
  controller: myController, // Для управления текстом
  decoration: InputDecoration(
    labelText: 'Имя',
    hintText: 'Введите ваше имя',
    border: OutlineInputBorder(), // Рамка
    prefixIcon: Icon(Icons.person),
  ),
  keyboardType: TextInputType.emailAddress, // Тип клавиатуры
  obscureText: true, // Для пароля
  maxLines: 3, // Многострочное поле
  onChanged: (text) { print('Текст изменился: $text'); },
)

2. TextFormField: Наследуется от TextField и интегрируется с Form для валидации.

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Поле обязательно для заполнения';
          }
          return null; // Валидация пройдена
        },
        onSaved: (value) { _name = value; },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            _formKey.currentState!.save();
            // Обработка данных
          }
        },
        child: Text('Отправить'),
      ),
    ],
  ),
)

3. CupertinoTextField: Виджет в стиле iOS (Cupertino).

CupertinoTextField(
  placeholder: 'Поиск',
  prefix: Icon(CupertinoIcons.search),
  clearButtonMode: OverlayVisibilityMode.editing, // Кнопка очистки
)

4. Autocomplete (из пакета material.dart): Виджет с автодополнением, появившийся в стабильном виде в более поздних версиях Flutter.

Дополнительные возможности и пакеты:

  • Обработка ввода: TextEditingController для чтения/установки текста, FocusNode для управления фокусом.
  • Маски ввода: Пакеты flutter_masked_text2 или input_formatters с TextInputFormatter для форматирования (телефон, дата).
  • Богатый текст (Rich Editor): Пакеты flutter_quill или zefyr.
  • Поиск с подсказками: Пакет flutter_typeahead.

Выбор виджета зависит от дизайна (Material/Cupertino) и необходимости валидации. TextFormField — это стандарт для форм в приложениях под Android.