Локальный запуск

Вы можете протестировать приложение на реальном устройстве с помощью функции Local Run, которая доступна в приложении FlutterFlow Desktop. Local Run автоматически отслеживает изменения в вашем проекте FlutterFlow, загружает код локально и предоставляет возможность использовать Hot Reload или Hot Restart во Flutter для мгновенного просмотра изменений на устройстве.

Предварительные требования

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

Настройка iOS

Для тестирования приложения iOS на устройстве или симуляторе вам потребуется Mac с Xcode. Следуйте этим инструкциям, чтобы настроить Mac, включая настройку устройства для тестирования.

Настройка Android

Для тестирования приложения Android на устройстве или эмуляторе настройте машину (Windows, Mac, Linux) в соответствии с этими инструкциями, включая настройку устройства для тестирования.

Использование Local Run

Вот шаги по использованию локального запуска:

1. Скачайте приложение desktop и откройте свой проект.
2. В Toolbar нажмите на выпадающий список рядом с кнопкой Test Mode и выберите Setup Local Run. Это откроет мастер настройки.

3. Для локального запуска приложения вам потребуется Flutter SDK. Нажмите кнопку Download, чтобы скачать его. Примечание: для iOS убедитесь, что установлены Xcode и CocoaPods, отметьте галочкой и нажмите Download.

4. Когда всё будет готово к использованию, нажмите кнопку Continue. Это запустит команду Flutter Doctor, чтобы проверить вашу среду на наличие проблем, которые могут помешать запуску приложений. Она выполняет серию проверок, чтобы убедиться, что необходимые инструменты и зависимости правильно установлены и настроены в вашей системе.

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

к сведению

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

6. Вы также можете указать, должен ли экспортируемый код форматироваться. Отключение форматирования кода ускоряет экспорт, что помогает в более быстрой итерации. Но если вы хотите просмотреть код или внести изменения, рекомендуется оставить эту опцию включённой.

7. Из меню тестирования нажмите кнопку Get Devices. Это отобразит список устройств, подключённых к вашей системе. Вы можете добавлять или удалять устройства из списка, нажимая на кнопки + и - соответственно. После завершения выбора просто нажмите кнопку Test, чтобы увидеть запуск вашего приложения на выбранных устройствах. Совет: в приложении Mac OS вы можете напрямую открыть симулятор, нажав на текст Launch iOS Simulator. Чтобы протестировать приложение на реальном устройстве, ознакомьтесь, как настроить физическое устройство.

8. После внесения изменений в приложение откройте меню тестирования, чтобы получить доступ к опциям, таким как hot reload, hot restart и остановка приложения. Вы заметите, что кнопка режима тестирования теперь изменилась на кнопку Hot Reload, которую вы можете нажать в любой момент, чтобы мгновенно увидеть изменения на устройстве.

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

Настройка физического устройства

Тестирование приложения на физических устройствах необходимо, чтобы убедиться, что оно работает как ожидается в реальных сценариях. Чтобы настроить физическое устройство, сначала запустите проект в Android Studio или Xcode в зависимости от целевой платформы. Вы можете легко получить доступ к этим опциям, нажав на иконку кода в меню Local Run.

Настройка устройства Android

Чтобы настроить физическое устройство Android, сначала включите опции разработчика и отладку по USB на вашем устройстве Android. Перейдите в Settings > About phone, нажмите на Build number семь раз, чтобы активировать опции разработчика, затем перейдите в Settings > System > Developer options и включите USB debugging.

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

к сведению

Подробные инструкции см. в документации Flutter для Android.

Настройка устройства iOS

Чтобы настроить физическое устройство iOS, вам необходимо настроить аккаунт Apple Developer и настроить подпись кода в Xcode. Сначала добавьте свой Apple ID, открыв Xcode > Preferences > Accounts, нажав "+", выбрав Apple ID и войдя в систему.

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

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

к сведению

Подробные инструкции см. в документации Flutter для iOS.

Доступ к логам устройства в Local Run

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

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

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

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

Проверка ошибок

Любые ошибки, отображаемые в красной рамке на экране, также записываются в логи устройства, где вы можете найти подробную информацию о состоянии приложения и событиях, приведших к проблеме.

Переконфигурация настройки Local Run

Если вам нужно обновить версию Flutter SDK, запустить Flutter Doctor или снова запустить симулятор, просто откройте меню тестирования и нажмите Configure.

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

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

Ручная загрузка кода и запуск

В некоторых ситуациях вы, как разработчик, можете предпочесть, чтобы локальные запуски не перезаписывали изменения, внесённые в код. В таких случаях вы можете вручную скачать код на локальную систему и внести необходимые модификации.

Вот как это сделать:

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

1. Загрузка кода

warning

• Загрузка кода проекта доступна только на платных планах.
• Убедитесь, что вы устранили любые проблемы проекта перед загрузкой кода.

Чтобы скачать код вашего приложения, у вас есть два варианта:

• Используйте FlutterFlow CLI. (Рекомендуется)
• Альтернативно, из Toolbar нажмите Developer Menu > Download Code. Это скачает файл .zip. Извлеките файл .zip, чтобы просмотреть содержимое проекта.

2. Настройка Flutter SDK

Вы можете скачать последнюю версию Flutter SDK здесь. Однако мы рекомендуем использовать Flutter SDK, загруженный локальным запуском, независимо от того, скачивали ли вы уже Flutter SDK или нет. Этот подход обеспечивает совместимость с проектами FlutterFlow и помогает избежать проблем, возникающих из-за различий в версиях.

Для этого скопируйте путь к Flutter SDK (нажмите кнопку 'this path') из локального запуска и добавьте его в системный путь.

Если вы предпочитаете использовать существующий Flutter SDK, вы можете следовать шагам ниже, чтобы избежать проблем с версиями:

1. Запишите версию вашего проекта FlutterFlow.

1. Проверьте текущую версию Flutter SDK, введя следующую команду в терминале. flutter --version
2. Если она отличается от используемой в FlutterFlow, вам может потребоваться переключиться на поддерживаемую версию.
3. Чтобы установить конкретную версию Flutter, используйте следующую команду:

   1. Чтобы понизить версию flutter:

      flutter downgrade <version_number>

   2. Чтобы повысить версию flutter:

      flutter upgrade --force <version_number>
   Замените <version_number> на версию, поддерживаемую FlutterFlow.

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

Вы можете выбрать для установки Visual Studio Code или Android Studio в качестве IDE для вашего проекта. В любой из этих IDE также требуются официальные плагины Flutter и Dart, которые обеспечивают автодополнение кода, подсветку синтаксиса, помощь в редактировании виджетов, поддержку запуска и отладки и многое другое.

• Чтобы установить Visual Studio Code с плагинами Flutter и Dart, ознакомьтесь с этой ссылкой.
• Чтобы установить Android Studio с плагинами Flutter и Dart, ознакомьтесь с этой ссылкой.

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

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

подсказка

Чтобы протестировать приложение на реальном устройстве, ознакомьтесь, как настроить физическое устройство.

Чтобы запустить приложение на устройстве:

1. Сначала откройте скачанный проект в предпочитаемой IDE.
2. Для VS Code:
   1. Перейдите в меню "View" -> выберите "Terminal" из выпадающего списка.
   2. Запустите команду flutter pub get.
   3. Теперь введите команду flutter run. VS Code соберёт и запустит ваше приложение. Вы увидите вывод в терминале, и приложение должно запуститься в выбранном эмуляторе или физическом устройстве.
3. Для Android Studio:
   1. Откройте терминал в Android Studio, нажав "View" -> "Tool Windows" -> "Terminal".
   2. Запустите команду flutter pub get.
   3. Нажмите зелёную кнопку "Run" (треугольник, направленный вправо), расположенную в верхней панели инструментов. Выберите целевое устройство (эмулятор или физическое устройство), на котором хотите запустить приложение. Android Studio соберёт и запустит ваше приложение. Вы увидите вывод в панели "Run" внизу, и приложение должно запуститься в выбранном эмуляторе или устройстве.

к сведению

• Если ваше устройство не отображается в выпадающем списке Flutter Device Selection, убедитесь, что вы правильно завершили настройку Android и iOS.
• Если вы столкнулись с проблемой совместимости версий Flutter, вы можете решить её, обновив до последней версии. Просто выполните команду flutter upgrade в терминале. Чтобы проверить текущую версию Flutter, используйте команду flutter --version.

Запуск на рабочем столе

Запуск приложения на рабочем столе включает:

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

Видеоурок

Если вы предпочитаете видеоурок, вот он для вас:

---

Устранение неисправностей

Команда не найдена: flutter (добавьте Flutter в системный путь)

Если вы скачали Flutter через локальный запуск, он может не быть добавлен в системный путь. Вам нужно получить директорию Flutter SDK и добавить её в путь вручную.

Для Mac

1. Из мастера локального запуска откройте шаг Configure IDE и нажмите на this path, чтобы получить путь к Flutter SDK.

2. Откройте Terminal и запустите следующую команду, чтобы открыть файл .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. Из мастера локального запуска откройте шаг Configure IDE и нажмите на this path, чтобы получить путь к Flutter SDK.
2. Щёлкните правой кнопкой мыши на меню "Пуск" и выберите "Система".
3. Нажмите "Дополнительные параметры системы", а затем "Переменные среды".
4. В разделе "Системные переменные" найдите переменную "Path" и нажмите "Изменить".
5. Нажмите "Создать" и добавьте путь к вашему Flutter SDK.
6. Нажмите "OK", чтобы сохранить изменения.
7. Перезапустите командную строку и попробуйте снова запустить команду flutter.

Устройство не отображается в списке

Если после обновления вы не видите устройство в списке, следуйте этим шагам:

1. Убедитесь, что вы добавили Flutter в системный путь.

2. Откройте Terminal и запустите следующую команду:

   flutter devices

   Это отобразит все подключённые устройства, которые распознаёт Local Run.

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

   1. Для iOS: Откройте Xcode, перейдите в меню "Window", выберите "Devices and Simulators", выберите симулятор и нажмите "Restart."

   2. Для Android: Откройте Android Studio > Device Manager, выберите эмулятор и нажмите кнопку "Play".

   3. Вы также можете перезапустить эмулятор напрямую из командной строки с помощью Flutter:

      flutter emulators --launch <emulator_id>

      Примечание: замените <emulator_id> на ID вашего эмулятора. Вы можете найти ID, запустив flutter emulators.

4. Попробуйте снова запустить flutter devices.

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

Если вы получили предупреждение от Xcode следующего содержания:

"Файл 'Runner.xcworkspace' был изменён другим приложением."

Это предупреждение обычно можно игнорировать. Оно обычно возникает, когда несколько инструментов или процессов (таких как локальный запуск FlutterFlow и Xcode) одновременно изменяют файлы проекта. Вот что вы можете сделать:

1. Сохраните работу: Убедитесь, что вы сохранили все изменения, внесённые в Xcode.
2. Закройте и откройте заново: Закройте окно предупреждения и, если необходимо, закройте и откройте Xcode заново, чтобы обновить файлы проекта.
3. Очистите сборку: Если предупреждение сохраняется, попробуйте очистить папку сборки в Xcode, перейдя в "Product" > "Clean Build Folder."
4. Flutter Clean: Вы также можете запустить flutter clean в терминале, чтобы очистить кэш сборки для вашего проекта, что иногда решает проблемы, связанные с устаревшими или конфликтующими файлами.

---

Часто задаваемые вопросы

Можно ли экспортировать проект как Flutter Module?

Да, вы можете экспортировать проект как Flutter module. Вот как:

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 в команде. Это экспортирует код проекта без ресурсов.

Например: flutterflow export-code --project your_project_id --dest path_to_output_folder --no-include-assets --token your_token --as-module

Затем следуйте инструкциям для Android и iOS, чтобы добавить модуль в основное приложение.