FFAppState

Необходимые условия

В этом руководстве используется пример сгенерированного кода демонстрационного приложения EcommerceFlow. Чтобы просмотреть сгенерированный код непосредственно, посетите репозиторий на GitHub.

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

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

Вот базовый шаблон класса, взятого из сгенерированного кода демонстрационного приложения EcommerceFlow:

class FFAppState extends ChangeNotifier {
  static FFAppState _instance = FFAppState._internal();

  factory FFAppState() {
    return _instance;
  }

  FFAppState._internal();

  static void reset() {
    _instance = FFAppState._internal();
  }

  void update(VoidCallback callback) {
    callback();
    notifyListeners();
  }

   // Переменная состояния приложения примитивного типа с геттером и сеттером
    bool _enableDarkMode = false;

    bool get enableDarkMode => _enableDarkMode;

    set enableDarkMode(bool value) {
    _enableDarkMode = value;
   }

}

Переменная _enableDarkMode - это переменная состояния приложения, созданная разработчиком, который создает собственные соответствующие геттер и сеттер.

Обновление FFAppState

При обновлении FFAppState через Edtior Action Flow, вы увидите несколько вариантов типа обновления, таких как Пересоздать все страницы, Пересоздать текущую страницу и Без пересборки. Давайте посмотрим, как изменяется сгенерированный код, когда выбраны эти варианты.

Пересоздать текущую страницу

Когда разработчик выбирает обновление состояния приложения с установленным типом обновления Пересоздать текущую страницу, вызывается соответствующий setter. Сразу после этого вызывается setState((){});, который обновляет только текущую страницу.

Вот пример сгенерированного кода, когда мы обновляем состояние приложения enableDarkMode в триггере действия onInitialization страницы ProductListPage.

SchedulerBinding.instance.addPostFrameCallback((_) async {
  FFAppState().enableDarkMode = !(FFAppState().enableDarkMode ?? true);
  setState(() {});
});

Пересоздать все страницы

В этом случае тип обновления установлен на Пересоздать все страницы, что означает, что вызывается setter, за которым следует метод update(). Этот метод внутри вызывает notifyListeners(), что является важным для обновления виджетов, зависящих от этой переменной.

SchedulerBinding.instance.addPostFrameCallback((_) async {
  FFAppState().enableDarkMode = !(FFAppState().enableDarkMode ?? true);
  FFAppState().update(() {});
});

Обновление состояния приложения из пользовательского кода

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

FFAppState().update(() => FFAppState().enableDarkMode = !(FFAppState().enableDarkMode ?? true));

Без пересборки

Вызывается только setter, далее никакие методы setState или update не вызываются. Это означает, что только переменная обновляется, и после обновления данных изменения состояния не происходят.

watch<FFAppState>

При добавлении действия Обновить состояние приложения через Edtior Action Flow, соответствующие страницы будут содержать эту строку внутри метода build:

 @override
Widget build(BuildContext context) {
    context.watch<FFAppState>();
    ...

Используя context.watch<FFAppState>(), виджет эффективно подписывается на любые изменения в классе FFAppState. Когда происходит изменение объекта FFAppState, этот виджет автоматически перестраивается, отражая эти изменения. Это гарантирует, что ваш виджет всегда отображает наиболее текущие данные и состояние приложения, обеспечивая актуальный и отзывчивый пользовательский интерфейс.

Управление AppState<List>

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

late LoggableList<LatLng> _LatLngList =
    LoggableList([LatLng(37.4071594, -122.0775312), LatLng(40.7358633, -73.9910835)]);

List<LatLng> get LatLngList => _LatLngList?..logger = () => debugLogAppState(this);

set LatLngList(List<LatLng> value) {
    if (value != null) {
        _LatLngList = LoggableList(value);
    }

    debugLogAppState(this);
}

void addToLatLngList(LatLng value) {
    LatLngList.add(value);
}

void removeFromLatLngList(LatLng value) {
    LatLngList.remove(value);
}

void removeAtIndexFromLatLngList(int index) {
    LatLngList.removeAt(index);
}

void updateLatLngListAtIndex(
    int index,
    LatLng Function(LatLng) updateFn,
) {
    LatLngList[index] = updateFn(_LatLngList[index]);
}

void insertAtIndexInLatLngList(int index, LatLng value) {
    LatLngList.insert(index, value);
}

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

• Список LatLngList инициализируется как приватная переменная _LatLngList типа LoggableList, которая помогает управлять списком с дополнительной возможностью журналирования.
• Метод get LatLngList позволяет другим частям приложения получить доступ к LatLngList.
• Метод set LatLngList позволяет заменить весь LatLngList на новый. При присвоении нового списка обновляется приватная переменная _LatLngList, и это изменение регистрируется с помощью debugLogAppState.
• Функция addToLatLngList добавляет новый объект LatLng в LatLngList, динамически обновляя список при работе приложения.
• Функция removeFromLatLngList удаляет конкретный объект LatLng из LatLngList, гарантируя точность и актуальность списка.
• Функция removeAtIndexFromLatLngList удаляет объект LatLng из списка на основе его позиции индекса.
• Функция updateLatLngListAtIndex позволяет обновлять объект LatLng в конкретном индексе, применяя к нему функцию обновления (updateFn).
• Функция insertAtIndexInLatLngList вставляет новый объект LatLng в LatLngList в конкретный индекс, сдвигая существующие элементы при необходимости.

Как создать переменные состояния приложения

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