Универсальное сложное приложение на FlutterFlow 5.0 и Supabase

Разбор создания production-ready приложения на FlutterFlow 5.0 с использованием новых фич: 50+ триггеров, widget builders, keyboard shortcuts.

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

Демонстрация ключевых возможностей FlutterFlow 5.0 на примере smart shopping list: свайп-анимации с триггерами, динамические widget builders для переиспользования кода, keyboard shortcuts для веб-приложений.

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

Обзор приложения (00:00 — 07:00)

• 00:00 — FlutterFlow 5.0 — 3 ключевые фичи
• 01:00 — 50+ триггеров (onSwipe, onDrag, onLongPress)
• 01:30 — Widget builders — переиспользование компонентов
• 02:00 — Keyboard shortcuts для веб/десктоп
• 02:30 — Демо: Smart Shopping List — свайп для покупки
• 03:00 — Отмена покупки (свайп обратно)
• 03:30 — Long press для добавления в избранное
• 04:00 — Удаление элементов свайпом
• 05:30 — Добавление нового товара через кастомный компонент
• 06:30 — Keyboard shortcut (Cmd+Opt+Y) для добавления

Триггеры и анимации (07:30 — 15:00)

• 07:30 — Реализация свайп-анимаций
• 08:00 — ListView + AppState (shopping list)
• 09:00 — Swipe left/right → список действий
• 09:30 — Логика: анимация + действие по завершении
• 10:30 — Новые триггеры: onHorizontalDrag, onLongPress
• 11:00 — Toggle favorite через onLongPress

AppState и обновление данных (15:00 — 20:00)

• 15:00 — Работа с AppState: shopping list IDs
• 16:00 — Обновление списка по индексу
• 18:00 — Удаление элемента: update list → remove item

Widget Builders и кастомные компоненты (20:00 — 29:00)

• 20:00 — Кастомные компоненты: Shopping List Item
• 22:00 — Динамический widget builder
• 25:00 — Передача целого компонента как аргумент
• 28:30 — Изменение компонента → авто-обновление везде
• 29:00 — Переиспользование кода через компоненты

Keyboard Shortcuts (29:00 — 33:00)

• 29:00 — Настройка keyboard shortcut на уровне Home
• 30:00 — Action flow: Cmd+Opt+Y → диалог
• 31:00 — Модификация элементов через shortcut
• 32:00 — Заключение и Patreon

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

• 50+ триггеров — onTap, onLongPress, onHorizontalDrag, onVerticalDrag, onSwipe и другие
• Widget Builder — динамическое создание виджетов через передачу компонентов как аргументов
• AppState — управление состоянием списка покупок
• Keyboard Shortcuts — горячие клавиши для веб/десктоп приложений
• Кастомные компоненты — переиспользование UI-элементов

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

• Swipe-анимации в ListView: onHorizontalDragEnd → определение направления → действие
• Long press для secondary action (например, toggle favorite)
• Widget builder позволяет создать один компонент и переиспользовать его с разными данными
• Keyboard shortcuts настраиваются на уровне страницы и выполняют любые actions
• AppState для хранения списка — update at index для мутации
• Code expression для расчёта offset при drag: (offset + delta) / containerWidth * 100

📌 Резюме

Подробный гайд по ключевым фичам FlutterFlow 5.0 на практическом примере. Полезен для понимания новых возможностей: триггеры, widget builders, shortcuts. Уровень — средний/продвинутый.

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

• Создание админ-ролей во FlutterFlow (правильный подход)
• Supabase Magic Link Authentication in FlutterFlow
• 6 мощных кастомных компонентов для FlutterFlow
• Создание социального приложения на FlutterFlow и Supabase
• n8n- Полный обзор и туториал по автоматизации
• Advanced Workflow- Как избавиться от ограничений FlutterFlow
• FlutterFlow- API-запросы к Supabase
• Представляем официальный MCP-сервер Supabase
• Master Forgot and Reset Password in FlutterFlow and Supabase (2025)