Создание формы с валидацией

2023-08-06T16:11:21.587Z

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

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

В этом примере мы узнаем, как добавить проверку в форму с одним текстовым полем, выполнив следующие действия:

Создать форму с глобальным ключом.
Добавьте текстовое поле TextFormField с логикой валидации.
Создать кнопку для проверки и отправки формы.

1. Создание формы с глобальным ключом

Во-первых, создадим форму. Виджет Form выступает в качестве контейнера для группировки и проверки нескольких полей формы.

При создании формы необходимо указать GlobalKey. Он уникально идентифицирует форму и позволяет выполнить ее проверку на следующем этапе.

import 'package:flutter/material.dart';

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Define a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a `GlobalKey<FormState>`,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: const Column(
        children: <Widget>[
          // Add TextFormFields and ElevatedButton here.
        ],
      ),
    );
  }
}

Совет: Использование глобального ключа является рекомендуемым способом обращения к форме. Однако если у вас более сложное дерево виджетов, то для доступа к форме внутри вложенных виджетов можно использовать метод Form.of().

2. Добавление поля TextFormField с логикой валидации
Хотя форма уже создана, в ней нет возможности для ввода текста. Для этого необходимо создать текстовое поле TextFormField. Виджет TextFormField отображает текстовое поле с материальным дизайном и может отображать ошибки валидации при их возникновении.

Для проверки вводимых данных в TextFormField используется функция validator(). Если вводимые пользователем данные не являются валидными, функция validator возвращает строку, содержащую сообщение об ошибке. Если ошибок нет, то валидатор должен возвращать null.

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

TextFormField(
  // The validator receives the text that the user has entered.
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
),

3. Создание кнопки для проверки и отправки формы

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

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

ElevatedButton(
  onPressed: () {
    // Validate returns true if the form is valid, or false otherwise.
    if (_formKey.currentState!.validate()) {
      // If the form is valid, display a snackbar. In the real world,
      // you'd often call a server or save the information in a database.
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Processing Data')),
      );
    }
  },
  child: const Text('Submit'),
),

Как это работает?

Для валидации формы используется ключ _formKey, созданный на первом этапе. С помощью метода _formKey.currentState() можно получить доступ к классу FormState, который автоматически создается Flutter при построении формы.

Класс FormState содержит метод validate(). Когда вызывается метод validate(), он запускает функцию validator() для каждого текстового поля формы. Если все в порядке, то метод validate() возвращает значение true. Если какое-либо текстовое поле содержит ошибки, метод validate() перестраивает форму для отображения сообщений об ошибках и возвращает false.

FlutterStack

Создание формы с валидацией

Как это работает?