Запуск и тестирование приложения
Приложение приходится запускать десятки раз в день, и способ запуска стоит выбирать под задачу. FlutterFlow даёт четыре: Preview, Test Mode, Run Mode и Local Run. Ниже — чем они отличаются, что в каждом не работает и когда какой брать.
Все режимы запуска собраны на панели инструментов.
Preview Mode
Preview Mode показывает приложение на виртуальном устройстве сразу, без сборки. Годится, чтобы проверить переходы между экранами и анимации, посмотреть светлую и тёмную тему и прикинуть, как раскладка ведёт себя на телефоне, планшете и десктопе.
Когда использовать Preview Mode
Главное преимущество — мгновенная загрузка, поэтому режим удобен для проверки интерфейса. Но бизнес-логика в нём почти не работает, так что на практике им пользуются реже остальных.
- Действия могут не срабатывать или работать неправильно.
- Иконки FontAwesome прыгают при наведении на некоторые material-виджеты.
- Данные Firestore из Firebase не загружаются.
- Вход через Firebase Auth не проверить: авторизация всегда проходит успешно.
- Вызовы API не выполняются.
- Если не работают действия анимации — обновите страницу.
- Если не работает действие Clear TextFields — обновите страницу.
- Данные RevenueCat не загружаются.
- Действия пейволла выполняются так, будто подписка активна.
- Hero-анимация может не работать на динамически создаваемых виджетах.
- Отключение выпадающих списков не действует.
- Всплывающие подсказки не работают на некоторых размерах экрана.
Test Mode
Test Mode запускает веб-версию приложения и использует Hot Reload из Flutter: правки в редакторе попадают в работающее приложение без пересборки. Это основной режим для отладки интерфейса и логики.
Как запустить:
- Выберите Test Mode в меню слева. Среда поднимется за пару минут.
- Меняйте что угодно в редакторе — цвета, раскладку, виджеты.
- Опция Sync changes automatically включена по умолчанию, поэтому правки уезжают в работающее приложение сами.
- Если автосинхронизация выключена, нажимайте Hot Reload или
Cmd/Ctrl + J, когда нужно подтянуть изменения. - Hot Restart нужен там, где перезапуск обязателен: обновились зависимости или изменилась модель состояния.
На платных тарифах сессия Test Mode не истекает и живёт, пока вы её не остановите.
На бесплатном тарифе сессия закрывается через 20 минут. После этого начните новую кнопкой New Session.
Плавающее окно
Плавающее окно показывает работающее приложение поверх редактора — можно править проект и сразу видеть результат, не переключаясь между вкладками. Это заметно ускоряет подгонку раскладки, стилей и взаимодействий.
Запустите сессию Test Mode и нажмите значок Floating Window на панели Test Mode. Окно можно двигать по экрану и менять его размер, продолжая работать в редакторе.
Inspect Mode
Inspect Mode находит виджет в дереве по клику в работающем приложении. На больших страницах с глубокой вложенностью это экономит минуты: вместо поиска кнопки или текста по Widget Tree вы кликаете по ней в приложении и попадаете прямо на неё в редакторе.
Нажмите значок Inspect Mode на панели Test Mode и выберите любой виджет в превью — FlutterFlow откроет и подсветит его в дереве. Чтобы вернуться к обычной работе с приложением, нажмите значок ещё раз.
Test Mode на телефоне
Текущую сессию Test Mode можно открыть на настоящем устройстве и проверить жесты, раскладку и прокрутку на реальном железе.
Нажмите значок QR Code на панели Test Mode. FlutterFlow покажет QR-код и ссылку на сессию: отсканируйте код камерой телефона или откройте ссылку на устройстве. Загрузится та же сессия, что работает в браузере.
Ссылка привязана к текущей сессии Test Mode и перестанет работать, когда сессия закроется.
Панель Debug info
В Test Mode есть панель Debug info — все переменные приложения с текущими значениями в реальном времени. Переменные ищутся по имени и фильтруются по типу и допустимости null, так что состояние приложения видно целиком, а не по кусочкам.
Часть ограничений связана с тем, что некоторые пакеты не поддерживаются в вебе, часть — с тем, как FlutterFlow собирает проект для запуска в облаке.
- Серый «сломанный» экран с грустным смайликом обычно означает проблему с DNS у провайдера. Помогает DNS-сервер Cloudflare 1.1.1.1 — инструкция по настройке.
- Анимация Lottie может не загрузиться, если путь к ней задан переменной.
- Нужны включённые cookie — они используются только для работы самого режима.
- Если вместо контура телефона больше 15 секунд крутится полоса загрузки, обновите страницу.
- Экран устройства не может быть шире страницы.
- Действие Copy to Clipboard не поддерживается — используйте Run Mode.
- Виджеты с анимацией Shimmer или Tint могут отображаться неправильно.
- Ассеты из собственного кода могут не отображаться.
- Запись звука не работает: проверяйте её через публикацию в вебе или на эмуляторе через Local Run.
Run Mode
Run Mode собирает полноценную версию приложения с живыми данными и открывает её в браузере. Сборка занимает 2–4 минуты, на больших проектах дольше. По сути это та же веб-версия, что и в Test Mode, но собранная целиком.
Нажмите стрелку рядом с кнопкой Test Mode и выберите запуск или нажмите Cmd/Ctrl + E — приложение откроется в новой вкладке.
Когда использовать Run Mode
Главное — ссылкой на запущенное приложение можно поделиться с командой. Ссылки Run Mode не публичные: они открываются только участникам проекта. Даже если проект сделан публичным и его может клонировать кто угодно, ссылки Run Mode остаются доступны только участникам.
Все запущенные сессии сохраняются и открываются из меню рядом со значком молнии в правом верхнем углу редактора.
Hot Reload не поддерживается: правки в редакторе в собранное приложение не попадут. Чтобы увидеть изменения, придётся запустить Run Mode заново.
Local Run
Local Run выгружает код проекта на ваш компьютер и запускает его на устройстве или эмуляторе с Hot Reload и Hot Restart. Настройка описана на отдельной странице.
Local Run доступен только на платных тарифах.
Частые вопросы
В левом меню нет пункта Test Mode
Откройте меню тестирования и включите опцию Use new test mode — после этого пункт Test Mode появится в меню.