Работа с формами во Flutter

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

В современном Flutter-приложении формы встречаются повсеместно:

• Аутентификация — логин и регистрация

• Профили пользователей — настройка личных данных

• Формы обратной связи — сбор отзывов и предложений

• Фильтры и поиск — сложные системы фильтрации

• Анкеты и опросы — сбор структурированной информации

• Настройки приложения — персонализация интерфейса

Базовые инструменты Flutter

Фреймворк Flutter предоставляет встроенные компоненты для работы с формами:

• Form — основной контейнер для группы полей

• TextFormField — базовое текстовое поле с валидацией

• TextEditingController — управление состоянием ввода

• GlobalKey<FormState> — доступ к состоянию формы

Эти инструменты отлично справляются с простыми задачами, но по мере роста сложности приложения возникают новые требования:

• Масштабируемость — поддержка большого количества полей

• Повторное использование — создание переиспользуемых компонентов

• Асинхронная валидация — проверка данных на сервере

• Управление состоянием — интеграция с глобальным состоянием приложения

• Тестирование — обеспечение качества кода

Цель материала

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

• Как эффективно использовать встроенные возможности Flutter

• Какие существуют альтернативные библиотеки и подходы

• Как выбрать оптимальное решение для вашего проекта

• Как избежать распространенных ошибок при работе с формами

В первой части мы сосредоточимся на базовых принципах работы с формами, используя стандартные инструменты Flutter. В последующих материалах рассмотрим более продвинутые решения, включая go_form, reactive_forms и другие современные библиотеки, которые помогут вам создавать масштабируемые и поддерживаемые решения для работы с формами.

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

Стандартные формы Flutter (Form и FormField)

Flutter предоставляет встроенный механизм для создания форм. Основные элементы — это Form, FormState, TextFormField и GlobalKey.

final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();

final _passwordController = TextEditingController();
final _emailFocus = FocusNode();
final _passwordFocus = FocusNode();
String? serverError;

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: _emailController,
        focusNode: _emailFocus,
        decoration: InputDecoration(
          labelText: 'Email',
          errorText: serverError, // ошибка с сервера
        ),
        validator: (value) =>
            value != null && value.contains('@') ? null : 'Введите корректный email',
        onFieldSubmitted: (_) {
          FocusScope.of(context).requestFocus(_passwordFocus);
        },
      ),
      TextFormField(
        controller: _passwordController,
        focusNode: _passwordFocus,
        obscureText: true,
        decoration: InputDecoration(labelText: 'Пароль'),
        validator: (value) =>
            value != null && value.length >= 6 ? null : 'Минимум 6 символов',
      ),

        onPressed: () {
          if (_formKey.currentState!.validate()) {
            final email = _emailController.text;
            final password = _passwordController.text;
            print('Email: \$email, Password: \$password');
          }
        },
        child: Text('Войти'),
      ),
    ],
  ),
);

Как управлять фокусом между полями

final _emailFocus = FocusNode();
final _passwordFocus = FocusNode();

TextFormField(
  focusNode: _emailFocus,
  onFieldSubmitted: (_) {
    FocusScope.of(context).requestFocus(_passwordFocus);
  },
),
TextFormField(
  focusNode: _passwordFocus,
),

Как показать ошибки после отправки (например, с сервера)

Чтобы отрисовать ошибку, которая пришла с бэкенда, можно использовать TextFormField.decoration.errorText:

String? serverError;

TextFormField(
  controller: _emailController,
  decoration: InputDecoration(
    labelText: 'Email',
    errorText: serverError,
  ),
);

// Внутри кнопки или в ответе сервера:
setState(() {
  serverError = 'Такой email не зарегистрирован';
});

Пример формы для редактирования существующих данных

Если вы загружаете данные пользователя из базы или API и хотите отобразить их в форме, используйте TextEditingController с начальными значениями:

final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController(text: '[e-mail]');
final _nameController = TextEditingController(text: 'Иван Иванов');

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: _emailController,
        decoration: InputDecoration(labelText: 'Email'),
      ),
      TextFormField(
        controller: _nameController,
        decoration: InputDecoration(labelText: 'Имя'),
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            final updatedEmail = _emailController.text;
            final updatedName = _nameController.text;
            print('Сохранение: \$updatedEmail, \$updatedName');
          }
        },
        child: Text('Сохранить'),
      ),
    ],
  ),
);

Кастомные поля без библиотек

Иногда нужно создавать свои собственные виджеты, которые не являются частью стандартного набора TextFormField или DropdownButtonFormField. Например, переключатели, селекторы даты, или даже составные поля вроде выбора телефона и страны.Вот пример, как создать кастомное поле, совместимое с формой:

class CustomCheckboxFormField extends FormField<bool> {
  CustomCheckboxFormField({
    Key? key,
    required Widget title,
    required FormFieldSetter<bool> onSaved,
    FormFieldValidator<bool>? validator,
    bool initialValue = false,
    AutovalidateMode autovalidateMode = AutovalidateMode.disabled,
  }) : super(
          key: key,
          onSaved: onSaved,
          validator: validator,
          initialValue: initialValue,
          autovalidateMode: autovalidateMode,
          builder: (FormFieldState<bool> state) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    Checkbox(
                      value: state.value,
                      onChanged: (value) {
                        state.didChange(value);
                      },
                    ),
                    title,
                  ],
                ),
                if (state.hasError)
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Text(
                      state.errorText ?? '',
                      style: TextStyle(color: Colors.red),
                    ),
                  ),
              ],
            );
          },
        );
  }

Такой подход позволяет создать переиспользуемый UI-компонент, который работает со стандартным Form, FormState, и умеет валидироваться, сохраняться и показывать ошибки.

Проверка на изменения перед выходом

Иногда нужно предупредить пользователя, если он покидает экран с несохранёнными изменениями. Пример с использованием WillPopScope:

final _initialEmail = '[e-mail]';
final _initialName = 'Иван Иванов';

final _emailController = TextEditingController(text: _initialEmail);
final _nameController = TextEditingController(text: _initialName);

WillPopScope(
  onWillPop: () async {
    final hasChanged = _emailController.text != _initialEmail ||
                       _nameController.text != _initialName;

    if (hasChanged) {
      final shouldLeave = await showDialog<bool>(
        context: context,
        builder: (ctx) => AlertDialog(
          title: Text('Вы уверены?'),
          content: Text('У вас есть несохранённые изменения. Покинуть экран?'),
          actions: [
            TextButton(onPressed: () => Navigator.of(ctx).pop(false), child: Text('Отмена')),
            TextButton(onPressed: () => Navigator.of(ctx).pop(true), child: Text('Покинуть')),
          ],
        ),
      );
      return shouldLeave ?? false;
    }

    return true;
  },
  child: Form(
    key: _formKey,
    child: Column(
      children: [
        TextFormField(controller: _emailController, decoration: InputDecoration(labelText: 'Email')),
        TextFormField(controller: _nameController, decoration: InputDecoration(labelText: 'Имя')),
        ElevatedButton(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              print('Сохранение: \${_emailController.text}, \${_nameController.text}');
            }
          },
          child: Text('Сохранить'),
        ),
      ],
    ),
  ),
);

Чтобы отрисовать ошибку, которая пришла с бэкенда, можно использовать TextFormField.decoration.errorText:

String? serverError;

TextFormField(
  controller: _emailController,
  decoration: InputDecoration(
    labelText: 'Email',
    errorText: serverError,
  ),
);

// Внутри кнопки или в ответе сервера:
setState(() {
  serverError = 'Такой email не зарегистрирован';
});

Преимущества

• Простая реализация и понимание

• Поддерживается большинством базовых FormField

Недостатки:

• Нужно вручную создавать и управлять множеством контроллеров, фокусами и состояниями ошибок

• Неудобно обрабатывать валидационные или сетевые ошибки после отправки формы

• Сложности при работе с состоянием через Bloc или Cubit, так как встроенные FormField не интегрируются напрямую с внешними состояниями и требуют дополнительных прослоек или обёрток

• Неудобно расширять или переиспользовать составные поля без написания кастомных FormField

Работа с формой без TextEditingController

Вместо использования TextEditingController можно задать initialValue и собрать данные через onSaved:

String? email;

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        initialValue: '[e-mail]',
        decoration: InputDecoration(labelText: 'Email'),
        validator: (value) =>
            value != null && value.contains('@') ? null : 'Некорректный email',
        onSaved: (value) => email = value,
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            _formKey.currentState!.save();
            print('Email: \$email');
          }
        },
        child: Text('Сохранить'),
      ),
    ],
  ),
);

Плюсы подхода без контроллеров

• Меньше кода: не нужно создавать и очищать контроллеры вручную

• Удобно, если данные нужны только в момент отправки

Минусы

• Нельзя изменить значение поля после инициализации

• Нет прямого доступа к текущему значению вне onSaved

• Не получится отслеживать изменения текста в реальном времени

Жизненный цикл TextEditingController и FocusNode

Если вы всё же используете контроллеры и FocusNode, не забудьте их очищать в dispose():

@override
void dispose() {
  _emailController.dispose();
  _passwordController.dispose();
  _emailFocus.dispose();
  _passwordFocus.dispose();
  super.dispose();
}

Минусы:

• Нужно вручную создавать и управлять множеством контроллеров, фокусами и состояниями ошибок

• Неудобно обрабатывать валидационные или сетевые ошибки после отправки формы

• Сложности при работе с состоянием через Bloc или Cubit, так как встроенные FormField не интегрируются напрямую с внешними состояниями и требуют дополнительных прослоек или обёрток

• Неудобно расширять или переиспользовать составные поля без написания кастомных FormField

• Сложно расширять

• Нельзя использовать произвольные виджеты без оборачивания в FormField

• Неудобно работать с фокусом, асинхронной валидацией и обновлением состояния

Тестирование форм

Надёжное тестирование форм помогает убедиться, что ваша логика валидации, обработки и отображения ошибок работает корректно. Во Flutter можно использовать несколько уровней тестирования:

testWidgets('Form shows error on invalid email', (tester) async {
  final formKey = GlobalKey<FormState>();

  await tester.pumpWidget(
    MaterialApp(
      home: Form(
        key: formKey,
        child: TextFormField(
          validator: (val) => val!.contains('@') ? null : 'Invalid email',
        ),
      ),
    ),
  );

  await tester.enterText(find.byType(TextFormField), 'notanemail');
  formKey.currentState!.validate();
  await tester.pump();

  expect(find.text('Invalid email'), findsOneWidget);
});

Тестирование бизнес-логики отдельно от UI

Если вы используете Bloc, ChangeNotifier, ValueNotifier, то можно покрыть тестами логику формы отдельно от интерфейса:

blocTest<LoginBloc, LoginState>(
  'emits new state with updated email',
  build: () => LoginBloc(),
  act: (bloc) => bloc.add(EmailChanged('[e-mail]')),
  expect: () => [LoginState(email: '[e-mail]')],
);

Интеграционные тесты (end-to-end)

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

testWidgets('Login flow', (tester) async {
  await tester.pumpWidget(MyApp());

  await tester.enterText(find.byKey(Key('emailField')), '[e-mail]');
  await tester.enterText(find.byKey(Key('passwordField')), 'secret');
  await tester.tap(find.byKey(Key('loginButton')));
  await tester.pumpAndSettle();

  expect(find.text('Добро пожаловать'), findsOneWidget);
});

Юнит-тесты для валидации

Если валидаторы вынесены в отдельные функции, их можно протестировать напрямую:

String? emailValidator(String? val) {
  if (val == null || !val.contains('@')) return 'Invalid email';
  return null;
}

test('email validator returns error for invalid email', () {
  expect(emailValidator('nope'), 'Invalid email');
  expect(emailValidator('[e-mail]'), null);
});

В ходе анализа базовых инструментов Flutter для работы с формами мы выявили ключевые проблемы, с которыми сталкиваются разработчики:

• Сложность масштабирования — необходимость создания множества контроллеров и узлов фокуса

• Неудобство асинхронной валидации — отсутствие встроенной поддержки асинхронных проверок

• Проблемы интеграции с системами управления состоянием

• Избыточность кода при работе со сложными формами

Что ждёт впереди

В последующих частях мы подробно разберём такие инструменты, как go_form, reactive_forms и другие популярные решения, которые:

• Автоматизируют рутинные задачи

• Упростят работу с асинхронной валидацией

• Предоставят готовые решения для сложных форм

• Повысят производительность разработки

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

Тг автора: kotelnikoff_dev