TextField — это основной виджет Flutter, который позволяет пользователям вводить текст. Он широко используется в различных формах, приложениях чата, панелях поиска и т. д. В этой статье блога мы рассмотрим различные методы и приемы работы с TextField во Flutter, а также приведем примеры кода.

1. Создание базового текстового поля:

Для начала создадим простой виджет TextField:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
);

Этот фрагмент кода создает базовое текстовое поле с отображением метки.

1. Получение данных пользователя:

Чтобы получить текст, введенный пользователем, мы можем назначить TextEditingController TextField:

TextEditingController _controller = TextEditingController();
TextField(
  controller: _controller,
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
);

Мы можем получить доступ к пользовательскому вводу, используя _controller.text.

1. Управление длиной ввода:

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

TextField(
  maxLength: 10,
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
);

Это текстовое поле позволяет пользователю вводить не более 10 символов.

1. Проверка ввода:

TextField предоставляет свойство validatorдля проверки ввода:

TextField(
  validator: (value) {
    if (value.isEmpty) {
      return 'Please enter a value';
    }
    return null;
  },
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
);

Здесь мы проверяем, пусты ли входные данные, и отображаем сообщение об ошибке, если это так.

1. Обработка изменений текста:

Чтобы реагировать на изменения текста, мы можем использовать обратный вызов onChanged:

TextField(
  onChanged: (value) {
    print('Text changed: $value');
  },
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
);

Обратный вызов onChangedсрабатывает всякий раз, когда пользователь изменяет введенные данные.

1. Настройка внешнего вида ввода:

TextField предлагает различные возможности настройки его внешнего вида:

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    prefixIcon: Icon(Icons.person),
    hintText: 'John Doe',
    border: OutlineInputBorder(),
    filled: true,
    fillColor: Colors.grey[200],
  ),
);

В этом примере мы добавляем значок префикса, текст подсказки, а также настраиваем цвет рамки и фона.

В этой статье мы рассмотрели несколько методов и приемов работы с TextField во Flutter. Мы рассмотрели создание базового TextField, получение пользовательского ввода, управление длиной ввода, проверку ввода, обработку изменений текста и настройку внешнего вида ввода. Освоив эти методы, вы сможете создавать богатые и интерактивные возможности ввода текста в своих приложениях Flutter.

Не забудьте поэкспериментировать с примерами кода и изучить документацию Flutter, чтобы узнать о более продвинутых функциях и функциях TextField.

Теперь у вас есть прочная основа для создания потрясающих интерфейсов ввода текста в ваших проектах Flutter!