FlutterFlow Документация
Заказать разработку

Local Run

Local Run — запуск приложения на настоящем устройстве из десктопного приложения FlutterFlow. Он следит за изменениями в проекте, выгружает код на компьютер и даёт применять их через Hot Reload или Hot Restart, не пересобирая приложение целиком.

инфо
Что нужно заранее

Тестирование на мобильных устройствах требует выгрузки кода, а она доступна только на платных тарифах.

iOS

Для запуска на устройстве или в симуляторе нужен Mac с Xcode. Настройка описана в документации Flutter, включая подготовку самого устройства.

Android

Настройте машину (Windows, Mac, Linux) по этой инструкции — там же подготовка устройства.

Как запустить

  1. Скачайте десктопное приложение и откройте в нём проект.

  2. На панели инструментов нажмите стрелку рядом с кнопкой Test Mode и выберите Setup Local Run — откроется мастер настройки.

    Пункт Setup Local Run в меню рядом с кнопкой Test Mode

  3. Для локального запуска нужен Flutter SDK — нажмите Download. Для iOS сначала установите Xcode и CocoaPods, отметьте галочку и только потом нажимайте Download.

    Шаг мастера с загрузкой Flutter SDK

  4. Когда SDK готов, нажмите Continue. Запустится команда flutter doctor: она проверит, что все нужные инструменты и зависимости установлены и настроены.

    Вывод команды flutter doctor в мастере настройки

  5. Необязательный шаг: настройте IDE, чтобы открывать код проекта прямо из Local Run. Выберите редактор, укажите путь через Select Path и нажмите Save. Для этого шага понадобятся уже настроенные Flutter SDK и IDE.

инфо
  • Local Run использует собственный, изолированный Flutter SDK — он лежит отдельно от любых других установок Flutter на компьютере и подставляется автоматически при запуске и при открытии проекта в VS Code. Для Android Studio и других IDE путь к SDK придётся указать вручную.
  • Правки, сделанные в IDE, в проект FlutterFlow не возвращаются и будут затёрты при следующем hot reload или перезапуске.
  • Путь — это расположение IDE на компьютере: на macOS обычно «Applications», на Windows — «Program Files».
  • См. также доступ к коду проекта.

Шаг настройки IDE с выбором пути

  1. В разделе Code Export настраивается, как Local Run выгружает и обновляет код проекта:

    • Experimental Speed Up — ускоренный конвейер выгрузки, заметно сокращает время экспорта; с ним Local Run умеет работать и без интернета. Если с выгрузкой начались проблемы, выключите.
    • Format Exported Code — форматировать выгруженный код. Без форматирования экспорт быстрее, но если вы собираетесь читать или править код, оставьте включённым.
    • Enable Debug Logging — добавляет в приложение поддержку логирования, без которой не работает панель FlutterFlow Debug в DevTools.
    • Auto Hot Reload — применяет изменения из FlutterFlow сразу, без ручного hot reload.
    • Auto Hot Restart — полностью перезапускает приложение, когда одного hot reload мало: добавились зависимости, изменилась модель состояния. По умолчанию выключено, потому что перезапуск заметно медленнее.

    Настройки Code Export в мастере Local Run

  2. В меню тестирования нажмите Get Devices — появится список подключённых устройств. Добавляйте и убирайте их кнопками + и −, затем нажмите Test. В десктопном приложении для macOS симулятор запускается прямо отсюда — ссылкой Launch iOS Simulator. Про настоящее устройство см. подключение устройства.

  1. После правки в проекте откройте меню тестирования: там hot reload, hot restart и остановка приложения. Кнопка Test Mode при запущенном приложении превращается в Hot Reload — нажимайте её, чтобы увидеть изменения на устройстве.

Hot Reload обновляет интерфейс, не теряя состояния приложения; Hot Restart пересобирает и перезагружает приложение целиком, состояние при этом сбрасывается. Подробности — в документации Flutter.

Кнопки hot reload, hot restart и остановки в меню тестирования

Подключение устройства

Проверять приложение на настоящем устройстве нужно обязательно: эмулятор не покажет ни реальную производительность, ни поведение жестов. Сначала откройте проект в Android Studio или Xcode — соответственно платформе. Обе команды есть под значком кода в меню Local Run.

Значок кода в меню Local Run с вариантами открытия проекта

Android

Включите на телефоне режим разработчика и отладку по USB: Настройки → О телефоне, семь раз нажмите Номер сборки, затем Настройки → Система → Для разработчиков и включите Отладка по USB.

Подключите устройство кабелем и подтвердите доступ, если появится запрос. Проверьте результат командой flutter devices в терминале Android Studio — телефон должен быть в списке.

инфо

Подробнее — в документации Flutter по Android.

iOS

Понадобится аккаунт Apple Developer и настроенная подпись в Xcode. Сначала добавьте Apple ID: Xcode → Preferences → Accounts, кнопка «+», пункт Apple ID, вход.

Затем привяжите проект к команде разработки. Откройте проект в Xcode, выберите проект Runner, вкладку Signing & Capabilities и укажите свою команду в списке Team. Если команды в списке нет, проверьте, что Apple ID действительно добавлен в Xcode.

Наконец настройте подпись кода. Убедитесь, что включено Automatically manage signing — Xcode сам создаст и скачает provisioning profile. Если не получилось, профиль придётся создать вручную в разделе Certificates, Identifiers & Profiles на портале Apple Developer, скачать и открыть двойным щелчком — он установится в Xcode.

инфо

Подробнее — в документации Flutter по iOS.

Логи устройства

Логи показывают, что происходит внутри приложения на устройстве или в симуляторе. Когда что-то работает не так, ответ обычно находится именно там.

Запустите приложение через Local Run, откройте меню тестирования и нажмите значок Logs — появится плавающее окно с подробными логами работающего приложения.

Плавающее окно с логами работающего приложения

Ввод в консоль

Через консоль в окне логов удобно делать hot reload и hot restart: нажмите r и Enter для перезагрузки, R и Enter — для перезапуска. Работают и остальные команды, которые обычно доступны в терминале при запущенном приложении Flutter.

Разбор ошибок

Всё, что показано в красном блоке на экране устройства, попадает и в логи — но там же видно состояние приложения и события, которые привели к сбою.

Перенастройка Local Run

Чтобы обновить версию Flutter SDK, заново прогнать flutter doctor или перезапустить симулятор, откройте меню тестирования и нажмите Configure.

Пункт Configure в меню тестирования

Доступ к коду проекта

Откройте меню тестирования (приложение при этом не должно быть запущено) и нажмите значок кода. Оттуда можно открыть папку проекта, проект в выбранной IDE или сразу в Xcode — на macOS.

Значок кода в меню тестирования и варианты открытия проекта

Выгрузить код и запустить вручную

Иногда локальный запуск не подходит: он затирает правки, сделанные в коде. В этом случае код выгружают на компьютер вручную и дальше работают с ним как с обычным проектом Flutter.

  1. Выгрузить код
  2. Установить Flutter SDK
  3. Установить IDE и плагины
  4. Запустить приложение на устройстве

1. Выгрузить код

внимание
  • Выгрузка кода доступна только на платных тарифах.
  • Перед выгрузкой исправьте все проблемы, о которых сообщает проект.

Есть два способа:

  • FlutterFlow CLI — рекомендуемый.
  • На панели инструментов: Developer Menu → Download Code. Скачается .zip, его нужно распаковать.

2. Установить Flutter SDK

Свежий Flutter SDK есть на сайте Flutter, но лучше взять тот, что скачал Local Run, — даже если Flutter у вас уже стоит. Так версия точно совпадёт с той, на которой собирается проект.

Скопируйте путь к SDK (кнопка «this path» в мастере Local Run) и добавьте его в PATH.

Кнопка с путём к Flutter SDK в мастере Local Run

Если всё же хотите работать со своим Flutter SDK, сверьте версии:

  1. Посмотрите версию Flutter, на которой собирается проект FlutterFlow.

    Версия Flutter в настройках проекта FlutterFlow

  2. Проверьте свою: flutter --version.

  3. Если версии не совпадают, переключитесь на нужную:

    flutter downgrade <version_number>
    flutter upgrade --force <version_number>

    Вместо <version_number> подставьте версию, которую использует FlutterFlow.

3. Установить IDE и плагины

Подойдёт Visual Studio Code или Android Studio. К любому из них нужны официальные плагины Flutter и Dart: автодополнение, подсветка синтаксиса, помощь при правке виджетов, запуск и отладка.

4. Запустить приложение на устройстве

Приложение можно запустить на настоящем устройстве или в эмуляторе.

совет

Про настоящее устройство см. подключение устройства.

Откройте выгруженный проект в своей IDE, дальше по платформе:

VS Code

  1. Меню View → Terminal.
  2. flutter pub get.
  3. flutter run — VS Code соберёт и запустит приложение, вывод пойдёт в терминал.

Android Studio

  1. Меню View → Tool Windows → Terminal.
  2. flutter pub get.
  3. Нажмите зелёную кнопку Run на верхней панели и выберите устройство. Вывод появится в панели «Run» внизу.
инфо
  • Если устройства нет в списке Flutter Device Selection, проверьте, что настройка Android и iOS доведена до конца.
  • Если Flutter ругается на несовместимость версий, выполните flutter upgrade. Текущую версию показывает flutter --version.

Запуск на десктопе

  1. Включите платформу: Setting and Integrations → Project Setup → Platforms и отметьте нужную.
  2. Поправьте раскладку, если приложение рассчитано и на телефон, и на десктоп. Отдельные виджеты для разных платформ показываются и скрываются через Responsive Visibility.
  3. Запустите приложение: через Local Run в десктопном приложении FlutterFlow или вручную выгрузив код, выбрав целевое устройство (например, macOS).

Видео

Решение проблем

command not found: flutter — Flutter не добавлен в PATH

Если Flutter скачан через Local Run, в системный PATH он не попадает. Путь нужно добавить вручную.

macOS

  1. В мастере Local Run откройте шаг Configure IDE и нажмите this path — там путь к Flutter SDK.

    Кнопка this path с адресом Flutter SDK

  2. Откройте .zshrc (или .bash_profile, если у вас Bash):

    open -e ~/.zshrc

  3. Добавьте в конец файла строку вида:

    export PATH="$PATH:$HOME/Library/Application Support/io.flutterflow.prod.mac/flutter/bin"

  4. Сохраните и закройте файл.

  5. Примените изменения:

    source ~/.zshrc

  6. Перезапустите терминал и снова попробуйте команду flutter.

Windows

  1. В мастере Local Run откройте шаг Configure IDE и нажмите this path — там путь к Flutter SDK.
  2. Правый щелчок по меню «Пуск» → «Система».
  3. «Дополнительные параметры системы» → «Переменные среды».
  4. В «Системных переменных» найдите «Path» и нажмите «Изменить».
  5. «Создать» и вставьте путь к Flutter SDK.
  6. «ОК».
  7. Перезапустите командную строку и снова попробуйте команду flutter.
Устройства нет в списке

Если после обновления списка устройство не появилось:

  1. Проверьте, что Flutter добавлен в PATH.

  2. Выполните в терминале:

    flutter devices

    Команда покажет все устройства, которые видит Local Run.

  3. Если устройства всё ещё нет, перезапустите его:

    • iOS: Xcode → меню «Window» → «Devices and Simulators», выберите симулятор и нажмите «Restart».
    • Android: Android Studio → Device Manager, выберите эмулятор и нажмите «Play».
    • Из командной строки: flutter emulators --launch <emulator_id>, где <emulator_id> — идентификатор эмулятора из вывода flutter emulators.

  4. Снова выполните flutter devices.

Предупреждение Xcode «Runner.xcworkspace modified»

Xcode сообщает:

The file ‘Runner.xcworkspace’ has been modified by another application.

Обычно это можно игнорировать: предупреждение появляется, когда файлы проекта одновременно правят несколько процессов — например, Local Run и сам Xcode. Что сделать:

  1. Сохраните изменения в Xcode.
  2. Закройте предупреждение, при необходимости перезапустите Xcode.
  3. Если повторяется — «Product» → «Clean Build Folder».
  4. Или выполните flutter clean в терминале: он чистит кэш сборки проекта.

Частые вопросы

Можно ли выгрузить проект как модуль Flutter?

Да:

  1. Установите FlutterFlow CLI: dart pub global activate flutterflow_cli.
  2. Выгрузите проект, подставив свои значения вместо <project id>, <output folder> и <token>:
flutterflow export-code --project <project id> --dest <output folder> --include-assets --token <token> --as-module

Чтобы выгрузить код без ассетов, замените флаг на --no-include-assets.

Дальше добавьте модуль в основное приложение по инструкции для Android и iOS.

перевод официальной документации FlutterFlow

обновлено

⌕ ESC