Как создать, проверить и сохранить форму во Flutter

Флаттер

Как создать, проверить и сохранить форму во Flutter

Изучите простой способ создания формы в приложении Flutter

Форма - важный компонент в разработке приложений Fluter. Когда мы создаем форму, мы должны реализовать проверку формы, отправку и т. Д. В этом руководстве вы узнаете, как создавать, проверять и использовать форму во Flutter.

Итак, мы создадим форму регистрации с несколькими полями:

• Имя
• Фамилия
• Пароль
• Подтвердите пароль

и кнопку Зарегистрироваться.

Шаг 1. Создайте класс настраиваемого текстового поля ввода

В файле main.dart создайте собственный класс с именем MyTextFormField. Внутри метода сборки я использовал нестандартный стиль и в основном использовал виджет TextFormField.

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

Также мы передадим функции validator и onSaved. В функции validator мы определим логику проверки для полей данных, а в функции onSaved мы определим, когда validator в порядке, а затем где будут храниться данные поля.

Шаг 2: Создайте класс модели

Давайте создадим model.dart file в каталоге lib. Когда будет вызвана onSaved функция в классе MyTextFormField; мы будем хранить данные поля в этом объекте Модель.

И мы передадим экземпляр этого класса Model с данными с нашего основного экрана на экран результатов, когда форма будет отправлена, и ошибок проверки нет.

Шаг 3. Создайте экран результатов

Давайте создадим еще один класс Result как result.dart файл. Когда мы создаем экземпляр этого класса, мы передаем объект модели и, наконец, показываем данные объекта модели на экране.

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

Шаг 4. Установите пакет валидатора

В нашей форме есть поле адрес электронной почты. Чтобы правильно проверить это поле электронной почты, мы хотим использовать функцию, определенную в сторонней библиотеке. Поэтому укажите этот валидатор в pubspec.yaml file и нажмите получить пакеты в Android Studio.

dependencies:
  flutter:
    sdk: flutter
# The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  validators: ^2.0.0+1

Шаг 5. Определите форму с проверкой

Итак, давайте посмотрим полный исходный код main.dart file. Здесь, в виджете TestForm, мы определили форму.

• Чтобы создать форму, сначала необходимо определить Глобальный ключ. Здесь мы определили _formKey как глобальный ключ.
• Глобальный ключ - это ключ, который при передаче в качестве ключа в виджет может отличать виджет от всех виджетов в дереве виджетов. Кроме того, глобальный ключ может содержать состояние виджета; в данном случае мы упоминали, что _formKey может содержать FormState.
• Затем мы определили виджет Форма и передали _formKey в качестве ключа в форме. Теперь, используя _formKey, мы можем получить виджет формы.
• Мы использовали MyTextFormField наш виджет настраиваемого класса для создания экземпляров всех необходимых полей с различными свойствами, например, для электронной почты, о которой мы упоминали isEmail is true.
• Вы увидите, что для всех полей определены validator и onSaved функции.
• Когда пользователь нажимает кнопку Зарегистрироваться, мы вызываем _formKey.currentState.validate(). Он вызовет все validator функции, определенные в TextFormFields.
• Функция validator должна либо возвращать String, чтобы уведомить о типе ошибки, либо если ошибки нет, она должна возвращать null.
• Если все функции валидатора внутри формы, определенные в различных TextFormFields, возвращают null, тогда _formKey.currentState.validate() вернет true, что означает, что все данные в форме проверены.
• Теперь мы можем сохранить данные. В нашем случае мы сохранили данные в объекте Model и использовали навигацию для передачи данных на экран результатов. Для сохранения данных используйте _formKey.currentState.save() метод, который вызовет все onSaved функции, определенные в TextFormFields.

Заключение

Надеюсь, вы понимаете, как создавать, проверять и использовать формы во Flutter.

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

Исходный код: 🚀

Ознакомьтесь с моими другими уроками по Flutter:

👨🏼‍💻 Если вам понравился этот пост, вы можете оставить до пятидесяти 👏👏👏 аплодисментов. Если у вас есть вопросы или мнения, дайте мне знать в комментариях.