FlutterFlow Wiki

FlutterFlow 5.0 — мощнее, чем ожидал

Author: James NoCodeSource: https://www.youtube.com/watch?v=5bThHlCzdN83 min read

FlutterFlow 5.0 — мощнее, чем ожидал

Обзор ключевых нововведений FlutterFlow 5.0 с конференции: Dev Environments, 50+ триггеров, Git branching и коммиты.

Суть за 30 секунд

FlutterFlow 5.0 принёс революционные фичи: environment variables (dev/stage/prod), 50+ gesture detector триггеров (drag, swipe, force press), Git branching прямо в IDE и keyboard shortcuts для веб.

📍 Навигация (Timeline)

Dev Environments (00:00 — 04:30)

  • 00:00 — Ежегодная конференция FlutterFlow, релиз 5.0
  • 01:00 — Новая вкладка Dev Environments в настройках
  • 01:30 — Переключение: production → staging → development
  • 02:00 — Отображение текущего окружения в приложении
  • 02:30 — Environment-aware переменные
  • 03:00 — Firebase config теперь environment-aware
  • 03:30 — Подключение к разным базам данных для разных окружений
  • 04:00 — Определение окружения из кода приложения

50+ Gesture Triggers (04:30 — 12:00)

  • 04:30 — Action Panel → множество новых триггеров
  • 05:00 — Force press, horizontal/vertical drag, swipe
  • 05:30 — Пример 1: иконка следует за курсором
  • 06:00 — onHorizontalDragUpdate + onVerticalDragUpdate
  • 07:00 — Page State: offsetX, offsetY для отслеживания позиции
  • 07:30 — Обновление Page State при drag
  • 08:00 — Manual trigger вместо on page load
  • 08:30 — Анимация: standard animation → final position
  • 09:00 — Пример 2: Shopping List из документации FlutterFlow
  • 09:30 — Свайп для удаления элемента
  • 10:00 — Threshold: минимальное расстояние для срабатывания
  • 10:30 — Component State для отслеживания drag offset
  • 11:00 — Триггеры + анимация = два компонента логики
  • 11:30 — Определение: пользователь передумал или завершил drag
  • 12:00 — Code expression для расчёта: (offset + delta) / width * 100

Widget Builders и Dynamic Components (12:00 — 25:00)

  • 12:00 — Widget builders — динамическое создание виджетов
  • 15:00 — Передача компонентов как аргументов
  • 18:00 — Переиспользование UI через компоненты
  • 20:00 — Авто-обновление при изменении компонента
  • 22:00 — Практические примеры использования

Keyboard Shortcuts (25:00 — 28:00)

  • 25:00 — Настройка горячих клавиш для веб/десктоп
  • 26:00 — Действия по shortcut: navigation, API calls, modify elements

Git Branching и Commits (28:00 — 34:00)

  • 28:00 — Git ветки прямо в FlutterFlow
  • 29:00 — Создание новой ветки для фичи
  • 30:00 — Commits как checkpoints — можно откатиться
  • 31:00 — Merge веток обратно в main
  • 32:00 — Close branch или merge после тестирования
  • 33:00 — Patreon и заключение

🧠 Ключевые концепции

  • Dev Environments — dev/stage/prod окружения с отдельными конфигами
  • Gesture Triggers — 50+ новых событий: drag, swipe, force press, double tap
  • Widget Builder — динамическое создание виджетов из компонентов
  • Git Branching — ветвление прямо в FlutterFlow IDE
  • Commits — checkpoints для отката изменений
  • Keyboard Shortcuts — горячие клавиши для веб-приложений
  • Page State / Component State — управление состоянием

🛠 Практические фишки

  • Environment variables позволяют разные API-ключи и URL для dev/stage/prod
  • Firebase config автоматически переключается при смене окружения
  • Gesture triggers: onHorizontalDragEnd → определить направление по sign(offset)
  • Threshold для swipe: не реагировать на случайные касания
  • Page State для координат (offsetX, offsetY) при drag
  • Widget builder = один компонент → множество инстансов с разными данными
  • Git branching: тестируй фичи изолированно, не ломая основную ветку
  • Commits = точки возврата, если что-то пошло не так

📌 Резюме

Обзор-презентация ключевых фич FlutterFlow 5.0. Охватывает environments, жесты, git, shortcuts. Подходит для быстрого ознакомления с новыми возможностями. Уровень — начальный/средний.

📺 Практика (Видео)

Graph View