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

FlutterFlow управляет состоянием несколькими способами в зависимости от области применения.

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

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

В FlutterFlow модели компонентов и страниц имеют однородную структуру, улучшая последовательность в рамках фреймворка. Они включают локальные поля состояния для хранения данных, специфичных для компонента, например, размеров или ввода пользователя. Эти модели также оборудованы методами инициализации и уничтожения: initState для настройки при инициализации виджета и dispose для освобождения ресурсов, когда виджет больше не нужен.

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

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

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

Переменные на странице отслеживаются через StatefulWidget и инкапсулированы в Model этой страницы.

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

Аналогично состоянию страницы, переменные состояния компонента доступны внутри компонента, где они определены. У каждого компонента есть соответствующие классы Model и Widget. Переменные могут передаваться из родительского компонента в качестве параметров. Кроме того, вы можете получить доступ к значениям состояния компонента из его родительского виджета Page.

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

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

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

Важно отметить, что компоненты не могут напрямую обращаться к переменным других компонентов на той же странице. Однако вы можете передать переменную из КомпонентА в качестве параметра в КомпонентБ в их родителе-странице. Это гарантирует, что КомпонентБ получит все обновления от КомпонентА, как ожидается.

Переменные

Переменные, необходимые на нескольких страницах приложения, такие как имя пользователя, должны быть добавлены в Общее Состояние. См. lib/app_state.dart.

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

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

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

При создании переменной состояния приложения, выбор опции "Сохранить" позволяет FlutterFlow сохранить ее на устройстве с использованием пакета shared_preferences. Это обеспечивает, что переменная остается доступной даже после перезапуска приложения, что идеально подходит для сохранения параметров, таких как статус входа или выбор пользователя между светлой и темной темами.

Если в настройках состояния приложения включена опция "Безопасные сохраненные поля", FlutterFlow использует пакет flutter_secure_storage для шифрования данных. Этот пакет использует специфические для платформы реализации шифрования данных, используя Keychain на iOS, KeyStore на Android и libsecret на Linux.

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

Глобальные переменные состояния – это куски информации, относящиеся к устройству, доступные во всем приложении FlutterFlow.

К ним относятся:

• Размер экрана
• Платформа (мобильное устройство, веб, Android, iOS)
• Видимость клавиатуры
• Текущее время

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

Глобальные свойства извлекаются через методы, определенные в flutter_flow_utils.dart. Обычно эти методы используют встроенные библиотеки Flutter, такие как dart:io, для сбора необходимой информации.

Константы

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