Урок 4. Форма ввода, проверка правильного ввода

  1. class Form()
  2. class TextFormField() – текстовое поле ввода
  3. Проверка поля E-mail
  4. class RadioListTile() – переключатель (радиокнопка)
  5. class CheckboxListTile() – флажок (чекбокс)
  6. Проверка class RadioListTile() и class CheckboxListTile()
  7. Полный листинг программы форма с проверкой
  8. Задание для практики: калькулятор площади

Ввод информации в программу стал важной частью с появлением компьютеров. Способы внесения информации совершенствуются, но основными остаются формы ввода содержащие текстовые поля, списки, переключатели (радиокнопки) и флажки (чекбоксы).

Перед использованием внесенных данных важно проверить их после ввода:

1. class Form()

Главным контейнером для формы является виджет-класс Form, он позволяет объединить в себе поля ввода. Обращаясь к состоянию формы FormState, можно проверить корректное заполнение полей, сбросить значения по умолчанию и сохранить значения.

Создадим виджет-класс MyForm от супер-класса StatefulWidget, который при построении будет возвращать виджет Form. Такая конструкция позволит перерисовать изменения в форме с помощью setState((){}), например: нажатие на чекбокс или радиокнопку сменит их состояние, но не изменит их внешнего вида, пока не будут отрисованы заново.

Мы указали параметр key со значение _formKey – данная константа позволит нам обращаться из дочерних элементов к функционалу формы для проверки данных, сохранения или сброса значений.

2. class TextFormField() – текстовое поле ввода

Добавим в форму текстовое поле ввода, заголовок перед ним и кнопку для инициализации проверки данных.

class TextFormField() – текстовое поле ввода

3. Проверка поля E-mail

Текстовое значение электронного адреса должно быть правильно набрано если мы хотим потом связаться по нему с человеком. Самая простая проверка которую можно придумать – это проверить есть ли символ @ в строке. Для этого можно было бы использовать такую проверку:

Но такая простая проверка не исключает множества других ошибок при заполнении, поэтому мы предлагаем другой вариант с использованием регулярных выражений:

Данный вариант проверки тоже не исключает ошибок, если, например, пользователь ошибется при написании имени своей почты.

Если пакет validator не устанавливается, смотрите заметку: Возможные проблемы при обновлении до версии Flutter Release Preview 2 и Dart SDK 2.1.0

Есть модуль написанный на дарт «validator» pub.dartlang.org/packages/validator, если его подключить, то можно проверять множество типов, с его помощью можно проверить и e-mail простой функцией isEmail(String str) которая скрывает от нас реализацию.

class TextFormField() – проверка e-mail

4. class RadioListTile() – переключатель (радиокнопка)

Переключатели объединяются в группу по параметру, который они изменяют. Так, например, добавим переключатели к нашей форме с выбором мужского или женского пола.

Можно определить переменную _gender, для группировки переключателей, в нашем виджете с целочисленным значением, где 0 – мужской пол, а 1 – женский пол:

тогда сами переключатели имели бы такой вид:

В полной реализации мы решили отойти от int значений для выбора пола и создали перечисление GenderList с помощью типа enum. Для этого в файле main.dart пишем:

Теперь там где мы использовали int – меняем на GenderList и значения 0 на GenderList.male и 1 на GenderList.female:

5. class CheckboxListTile() – флажок (чекбокс)

Флажки помогают включить или выключить конкретный параметр. В нашей форме мы добавим флажок для получения согласия на обработку персональных данных.

Добавим переменную «согласия» _agreement типа bool в наш класс:

Добавим флажок, который будет менять значение переменной _agreement:

6. Проверка class RadioListTile() и class CheckboxListTile()

Проверку текстовых полей при нажатии на кнопку «Проверить» мы проводили так:

И если функция в значения validator в текстовых полях не возвращала ошибок, мы выводили сообщение об успешном заполнении формы:

Но у виджетов RadioListTile и CheckboxListTile нет параметра validator для функции проверки.

Поэтому мы должны встроить проверку значений переключателей и флажков после или до основной проверки форм if(_formKey.currentState.validate())

Проверка class RadioListTile() и class CheckboxListTile()

7. Полный листинг программы форма с проверкой

8. Задание для практики: калькулятор площади

Задание для практики: калькулятор площади

Ниже будет приведен листинг кода калькулятора площади, его вы можете использовать для задания или написать свой.

Задание:

  1. Добавить переключатели между единицами измерения: мм, см, м и т.д.
  2. Задать значения по умолчанию.
  3. Изменить тип int на double

Для выполнения задания вам понадобится параметр initialValue: 'String' в классе TextFormField – задает значение текстового поля по умолчанию.

Ваши вопросы и ответы в виде кода программы присылайте на нашу почту contact@flutter.ru, в теме письма обязательно указывайте «Урок № 4».