App Events

Вот подробный обзор видео «FlutterFlow App Events Are INSANE (Full Tutorial)» от канала James NoCode.

В этом видео рассматривается одна из самых мощных новых функций FlutterFlow — App Events (События приложения), которая позволяет различным частям вашего приложения взаимодействовать друг с другом без прямой связи.


🚀 Что такое App Events?

Это механизм, который позволяет одной части приложения (например, кнопке на одной странице) отправить «сигнал» (событие), а другой части (другой странице или компоненту) — поймать его и выполнить действие. Это делает архитектуру приложения слабосвязанной (decoupled) и более модульной. [01:03]

🌍 Типы событий

В FlutterFlow существует два типа событий:

  1. Local (Локальные): Обрабатываются там, где их специально «слушают» (на конкретных страницах или в компонентах). [11:06]
  2. Global (Глобальные): Обрабатываются на уровне всего приложения. У них есть один заранее определенный обработчик (Action Block), который срабатывает всегда, когда происходит это событие. [10:52]

🛠 Как это работает: 3 шага внедрения

Автор выделяет три основных этапа настройки событий:

1. Определение события (Define)

Сначала нужно создать само событие в панели App Events. Вы даете ему имя и выбираете область видимости (Local или Global). Для глобальных событий сразу назначается Action Block (блок действий). [10:20]

2. Прослушивание события (Listen)

  • Для локальных событий нужно добавить обработчик (Handler). Обычно это делается в действии On Page Load (при загрузке страницы) или компонента. Вы «устанавливаете слушателя», который будет ждать сигнала. [15:08]
  • Для глобальных событий слушатель уже настроен через привязанный Action Block. [14:20]

3. Триггер события (Trigger)

В нужном месте (например, при нажатии на кнопку после успешной записи в БД) вы вызываете действие Trigger App Event. Это «крик» в систему, на который отреагируют все активные слушатели. [19:54]


💡 Основные преимущества и примеры

  • Синхронизация данных: Когда вы добавляете задачу в список, событие может обновить счетчик задач на другой странице или показать уведомление (Snackbar), не требуя сложных цепочек действий. [05:43]
  • Статус интернета: Пример глобального события. Если система обнаруживает потерю сети, она рассылает глобальное событие, которое меняет состояние UI во всем приложении сразу. [08:44]
  • Отличие от App State: Раньше для синхронизации использовали App State (переменные состояния). Но App State — это данные, а App Events — это действия. Теперь вы можете вызывать API, показывать диалоги или обновлять запросы к БД в ответ на событие, что было сложно реализовать только через переменные. [23:20]

⏰ Ключевые моменты с таймкодами

  • [01:03] — Зачем нужны App Events и какие проблемы они решают.
  • [04:49] — Демонстрация работы: добавление задачи и мгновенная реакция приложения.
  • [08:44] — Пример глобального события (статус интернет-соединения).
  • [10:52] — Разница между Local и Global событиями.
  • [15:08] — Настройка обработчика события (Handler) на странице.
  • [19:15] — Как правильно вызывать (триггерить) событие.
  • [23:20] — Почему события лучше, чем просто использование App State.