Расширение FlutterFlow для Visual Studio Code

Расширение Visual Studio Code позволяет работать с собственным кодом проекта в Visual Studio Code и обменивать изменения с FlutterFlow.

Писать код можно и во встроенном редакторе, но в VS Code это заметно удобнее:

1. Виден весь проект. Легко посмотреть классы компонентов, свои типы данных, перечисления.

2. Подсказки и ошибки в реальном времени работают надёжнее, чем в браузере.

3. Инструменты Flutter и Dart — отладка, рефакторинг, анализатор.

4. ИИ-помощники вроде Copilot.

Установка

Расширение называется FlutterFlow: Custom Code Editor.

Из маркетплейса

Страница расширения — в маркетплейсе Visual Studio Code.

Прямо из редактора: откройте вкладку Extensions (Ctrl + Shift + X или Cmd + Shift + X), найдите «FlutterFlow: Custom Code Editor» и нажмите Install.

Ключ API

Расширению нужен ключ API — он задаётся в Extension Settings. Создать ключ можно на странице аккаунта FlutterFlow.

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

Первый шаг — скачать код проекта. Откройте палитру команд (cmd + shift + p или ctrl + shift + p) и выполните FlutterFlow: Download Code.

Команда спросит три вещи:

• Project ID — идентификатор проекта. Его видно при наведении на имя проекта в левом верхнем углу редактора FlutterFlow.
• Branch Name — ветка проекта. Оставьте пустым для основной.
• Download Location — куда сохранить. Код ляжет в выбранная_папка/projectID.

Начало сеанса правки

После загрузки кода нужно начать сеанс правки — только тогда становится доступен обмен изменениями с FlutterFlow.

Выполните в палитре команд FlutterFlow: Start Code Editing Session — заодно запустится flutter pub get.

Работа с кодом

После установки, загрузки кода и начала сеанса доступны:

• собственные действия;
• собственные виджеты;
• собственные функции;
• зависимости в pubspec.yaml.

Проверка изменений

Написанный код нужно проверять в деле — то есть добавить функцию, действие или виджет на страницу проекта FlutterFlow.

Дальше приложение запускается либо из FlutterFlow — в Test Mode или Local Run, — либо локально из VS Code.

Перед проверкой из FlutterFlow не забудьте выгрузить изменения.

Для запуска из VS Code нужно расширение Flutter; дальше достаточно нажать кнопку Run. Подробности — в документации Flutter.

Выгрузка во FlutterFlow

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

Что именно изменилось, видно в разделе FF: Modified Files в проводнике: список обновляется при каждом сохранении.

Выгрузка — значок Push to FlutterFlow в строке состояния или команда FlutterFlow: Push to FlutterFlow.

Загрузка свежих изменений

Перед правкой стоит подтянуть актуальную версию: компоненты, переменные состояния, свои типы данных и перечисления, на которые ссылается ваш код.

Значок Pull Latest в строке состояния или команда FlutterFlow: Pull Latest Changes.

Как устроены файлы

Расширение позволяет менять ресурсы собственного кода — файлы целиком или отдельные функции.

У собственных действий и виджетов соответствие один к одному: один файл — одно действие или виджет. Новый файл в каталоге lib/custom_code/actions или lib/custom_code/widgets автоматически добавляет новый ресурс в проект FlutterFlow.

Собственные функции лежат все вместе в файле lib/flutter_flow/custom_functions.dart — там их и добавляют, правят и удаляют.

Зависимости добавляются в pubspec.yaml, а вот менять уже существующие оттуда нельзя. Новая зависимость появится в Settings and Integrations > Project Dependencies > Custom Code Dependencies.

Переименование

Действия и виджеты переименовывайте средствами VS Code: правая кнопка по имени → Rename Symbol.

Если переименовать иначе, придётся вручную поправить имя и в самом файле, и в индексном — lib/custom_code/widgets/index.dart или lib/custom_code/actions/index.dart.

Создание

Новое действие или виджет — это новый файл .dart в lib/custom_code/actions или lib/custom_code/widgets; заготовка появится в нём сама.

Новая функция — просто новая функция Dart в lib/flutter_flow/custom_functions.dart. Заготовки для функций в VS Code пока нет.

Удаление

Удалите файл действия или виджета — ресурс исчезнет из проекта.

Новые зависимости

Пакеты с pub.dev добавляются командой Dart: Add Dependency из палитры команд — она правит pubspec.yaml.

Управление версиями Flutter (FVM)

Чтобы держать несколько версий Flutter, используют FVM. Его нужно установить и прописать в PATH.

Установка

dart pub global activate fvm

Добавление в PATH

Чтобы вызывать fvm из любой папки, каталог с его исполняемыми файлами добавляется в переменную PATH.

macOS и Linux

1. Выполните в терминале — команда дописывает ~/.pub-cache/bin в PATH через файл настроек оболочки:

   echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.zshrc  # для Zsh
   echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.bashrc # для Bash

2. Перезапустите терминал или выполните source ~/.zshrc (либо source ~/.bashrc).

Windows

1. Найдите путь к FVM, обычно это:

   C:\Users\YourUsername\AppData\Local\Pub\Cache\bin

2. Добавьте его в системную переменную PATH:

   1. Откройте Свойства системы → Дополнительные параметры системы.
   2. Нажмите Переменные среды.
   3. В разделе Системные переменные выберите Path → Изменить.
   4. Нажмите Создать и вставьте путь.
   5. Нажмите ОК и перезапустите терминал.

Проверка

fvm --version

Команда напечатала версию — значит, всё установлено верно.

Настройка в проекте

cd your-flutterflow-project
fvm init
fvm install <flutter_version>
fvm use <flutter_version>

Вместо <flutter_version> подставьте нужную версию Flutter.

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

Как загрузить код из версии Beta или Enterprise?

Адрес API переопределяется в **Extension Settings > settings.json**.

• Для Beta задайте flutterflow.urlOverride = https://api-beta.flutterflow.io/v1.
• Для Enterprise — https://api-enterprise-[region].flutterflow.io/v1, подставив свой регион вместо [region].

Открыть интерактивное демозагрузится с demo.arcade.software