Какие способы ввода текста (текстовые поля) есть в 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.

Ответ 18+ 🔞

А, ну так, значит, про поля для ввода в Flutter. Ёпта, смотри, тут в принципе всё просто, но есть нюансы, как говорится. Основных виджета, на которых всё держится — два, как близнецы, но один для простоты, а второй — для серьёзных дел с проверками.

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: А вот это уже тяжёлая артиллерия. Наследник первого, но с гонором. Создан специально, чтобы встраиваться в 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('Отправить'),
      ),
    ],
  ),
)

Вот это связка, блядь, — Form + TextFormField + validator — это и есть стандартный способ заставить пользователя ввести что-то осмысленное, а не "ася киса".

3. CupertinoTextField: Ну а это для тех, у кого iPhone в кармане чешется. Виджет в стиле iOS, выглядит строго и по-яблочному.

CupertinoTextField(
  placeholder: 'Поиск',
  prefix: Icon(CupertinoIcons.search), // Иконка-лупа, куда ж без неё
  clearButtonMode: OverlayVisibilityMode.editing, // Кнопка "очистить" появляется сама, когда печатаешь — удобно, ёпта
)

4. Autocomplete: Штука, которая додумывает за пользователя. Появилась в стабильном виде не так давно, из коробки, что радует.

Чего ещё можно накрутить, если мало:

  • Обработка ввода: TextEditingController — это твой пульт управления текстом. FocusNode — чтобы фокус туда-сюда переключать, как прожектором.
  • Маски ввода: Хочешь, чтобы телефон вводили в формате? Бери пакеты вроде flutter_masked_text2 или колдуй с TextInputFormatter. Без этого — дичь, люди введут что угодно.
  • Богатый текст (Rich Editor): Если нужно не просто текст, а целый документ с жирным шрифтом и картинками — это тебе не сюда. Смотри в сторону flutter_quill. Там уже совсем другой уровень, ебать копать.
  • Умный поиск с подсказками: Пакет flutter_typeahead — мощная штука, выпадающий список на основе того, что пользователь начал вводить.

Итог, чувак: Выбираешь по обстановке. Если делаешь под андроид и нужна форма с проверками — TextFormField твой брат. Если интерфейс в стиле iOS — CupertinoTextField. Для всего остального есть базовый TextField и куча пакетов на все случаи жизни. Главное — не запутаться.