Управление состоянием

Состояние в FlutterFlow хранится по-разному в зависимости от того, кому оно нужно. За основу взят пакет Provider: через него компонентам, страницам и приложению целиком раздаются модели данных.

Модели страниц и компонентов

Модель компонента и модель страницы устроены одинаково. В них лежат поля локального состояния — размеры, введённые пользователем значения — и методы жизненного цикла: initState для подготовки при создании виджета и dispose для освобождения ресурсов, когда виджет больше не нужен.

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

Состояние страницы

Переменные, нужные только на одной странице — проверка текстового поля, значение флажка, — лежат в её Model. Компоненты той же страницы могут до них дотянуться: скажем, кнопка в одном компоненте читает значение поля из другого.

Такие переменные отслеживаются через StatefulWidget и упакованы в модель страницы.

Состояние компонента

Переменные состояния компонента доступны внутри самого компонента. У каждого компонента есть пара классов — Model и Widget. Значения могут приходить от родителя параметрами, а родительская страница, в свою очередь, может читать состояние компонента.

Так получается потому, что модель компонента создаётся внутри модели родительской страницы. Provider вызывает context.read(), и тот возвращает уже существующую модель из дерева, а не создаёт новую. Поэтому изменения в модели компонента видны и в родительском экземпляре той же модели.

Один из вспомогательных методов в flutter_flow_model.dart — wrapWithModel(). Он оборачивает потомка в Provider, делая модель доступной, и задаёт обратный вызов — обычно тот дёргает setState() на родительской странице, чтобы обновить изменившиеся значения. Обёртка нужна виджетам, которым требуются данные из модели.

Например, на странице есть компонент с текстовым полем, а ниже — кнопка, которой нужно его значение. Кнопку оборачивают в wrapWithModel(), передав модель компонента с полем.

Важно: напрямую читать переменные соседнего компонента компонент не может. Но можно передать значение из компонента A в компонент B параметром через родительскую страницу — тогда B получит все обновления A.

Состояние приложения

Переменные

Всё, что нужно нескольким страницам, — например, имя пользователя — заводят в состоянии приложения, файл lib/app_state.dart.

Все такие переменные входят в класс FFAppState, который работает как ChangeNotifier: на него подписываются и получают уведомления при любом изменении.

На каждой странице, которой нужны эти переменные, вызывается context.watch<AppState>() — метод Provider, поднимающий слушателя для этой страницы.

Сохранение состояния на устройстве

Если у переменной состояния приложения включить Persisted, FlutterFlow сохранит её на устройстве через пакет shared_preferences. Значение переживёт перезапуск приложения — то, что нужно для признака входа или выбора между светлой и тёмной темой.

Опция Secure Persisted Fields в настройках состояния приложения включает шифрование через flutter_secure_storage.

Глобальное состояние

Глобальные переменные описывают устройство и доступны в любом месте приложения:

• размер экрана;
• платформа — мобильная, веб, Android, iOS;
• видна ли клавиатура;
• текущее время.

Они собраны в разделе Global Properties и добавляются самим FlutterFlow — заводить их не нужно. Для собственных глобальных значений используйте состояние приложения.

Читаются они методами из flutter_flow_utils.dart, которые опираются на встроенные библиотеки Flutter, например dart:io.

Константы

Значения, которые не меняются за время работы приложения, — ключи API, признаки среды — лежат в классе FFAppConstants в файле lib/app_constants.dart. Класс абстрактный: создать его экземпляр нельзя, он служит пространством имён для статических констант.