Перейти к основному содержимому

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

Расширение для Visual Studio Code (VSCode) позволяет работать с пользовательским кодом вашего проекта FlutterFlow непосредственно в Visual Studio Code (локальном редакторе кода). Это расширение упрощает редактирование, отправку и получение изменений пользовательского кода между FlutterFlow и вашей локальной средой разработки.

Хотя вы можете редактировать пользовательский код в встроенном редакторе кода FlutterFlow, редактирование в Visual Studio Code может быть предпочтительнее по нескольким причинам:

  1. Доступ ко всему коду приложения: При написании пользовательского кода в Visual Studio Code у вас будет полный доступ ко всему коду приложения, что упростит ссылки на классы виджетов компонентов, пользовательские типы данных, перечисления и многое другое.

  2. Автодополнение и обнаружение ошибок в реальном времени: Работа на локальной машине обычно обеспечивает более надежный доступ к функциям обнаружения ошибок и автодополнения в реальном времени в редакторе кода, что делает процесс разработки более эффективным.

  3. Использование инструментов Flutter и Dart: Visual Studio Code позволяет использовать существующие инструменты Flutter и Dart, упрощая разработку и рефакторинг вашего пользовательского кода.

  4. Использование экосистемы ИИ: Кроме того, вы можете легко применять инструменты ИИ, доступные в экосистеме Visual Studio, такие как Copilot.

к сведению

Расширение для VS Code доступно только на плане Growth и выше. Ознакомьтесь с разделом ценообразования.

Установка​

Чтобы полностью использовать инструменты Flutter, Dart и ИИ в Visual Studio Code при редактировании файлов пользовательского кода FlutterFlow, вы можете установить расширение FlutterFlow: Custom Code Editor. Вот несколько простых способов его настройки.

Установка из Marketplace​

Вы можете установить расширение FlutterFlow с сайта Marketplace Visual Studio Code.

Чтобы установить расширение непосредственно из Visual Studio Code, откройте редактор, нажмите на значок Extensions (или используйте сочетание клавиш Ctrl + Shift + X / Cmd + Shift + X), найдите "FlutterFlow: Custom Code Editor" и нажмите Install, чтобы добавить расширение в вашу рабочую область.

Добавление ключей API​

Чтобы использовать расширение, вам необходимо указать ваш API-ключ в настройках расширения редактора. Вы можете сгенерировать API-ключ на странице аккаунта FlutterFlow, а затем добавить его на странице настроек расширения в Visual Studio Code. Вот как это сделать:

подсказка

Вы можете настроить дополнительные параметры, такие как указание ID проекта и ветки для получения и обновления кода. Кроме того, вы можете задать папку загрузки, чтобы определить начальную директорию, куда будет загружен код.

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

Первый шаг в редактировании пользовательского кода для вашего проекта FlutterFlow — загрузка его кода. Чтобы загрузить код проекта, используйте палитру команд Visual Studio Code (cmd + shift + p или ctrl + shift + p).

В палитре команд используйте команду FlutterFlow: Download Code.

Эта команда запросит у вас три элемента информации:

  • Project ID: Это ID проекта, или уникальный идентификатор, для вашего проекта FlutterFlow. Вы можете найти ID проекта, наведя курсор на название проекта в левом верхнем углу внутри конструктора FlutterFlow.
  • Branch Name: Название ветки проекта FlutterFlow, с которой вы хотите работать. Вы можете оставить это поле пустым, чтобы работать с основной веткой.
  • Download Location: Откроется диалог выбора файла, чтобы вы могли выбрать место для загрузки кода проекта; код будет загружен в thisdirectory/projectID.

Инициализация сеанса редактирования кода​

После загрузки кода вам потребуется инициировать сеанс редактирования кода с помощью расширения. Когда сеанс редактирования кода инициирован, вы сможете получать и отправлять код из Visual Studio Code в FlutterFlow.

extension-overview.png

Чтобы начать сеанс редактирования кода, выполните команду FlutterFlow: Start Code Editing Session из палитры команд Visual Studio Code. Эта команда также автоматически выполнит flutter pub get.

start-code-edit-session

Редактирование файлов Flutter и Dart

Рекомендуется установить расширения Flutter и Dart, которые упростят редактирование кода Flutter и Dart.

Редактирование пользовательского кода​

После успешной установки расширения Visual Studio Code и загрузки кода вы можете инициировать сеанс, чтобы начать добавление или редактирование пользовательского кода.

В настоящее время для настройки доступны следующие ресурсы:

  • Custom Actions: в директории lib/custom_code/actions
  • Custom Widgets: в директории lib/custom_code/widgets
  • Custom Functions: в lib/flutter_flow/custom_functions.dart
  • Package Dependencies: в pubspec.yaml

Тестирование изменений локально​

При работе с пользовательским кодом важно тестировать ваши реализации. Мы рекомендуем интегрировать вашу пользовательскую функцию, действие или виджет непосредственно в проект FlutterFlow — например, добавив пользовательский виджет на страницу FlutterFlow.

Затем вы можете протестировать приложение из FlutterFlow, используя сеанс Test Mode или Local Run, или запустить приложение локально из Visual Studio Code.

Перед тестированием из FlutterFlow убедитесь, что вы отправили изменения.

Чтобы запустить проект из Visual Studio Code, убедитесь, что расширение Flutter установлено. После настройки вы можете просто нажать кнопку Run (play). Подробности см. в официальной документации Flutter.

Отправка изменений в FlutterFlow​

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

При отправке изменений все файлы, которые вы отредактировали в Visual Studio Code, будут обновлены в FlutterFlow.

Вы можете увидеть, какие файлы были изменены, в разделе FF: Modified Files проводника. Этот раздел обновляется каждый раз при сохранении файла, показывая, что было добавлено, удалено или изменено.

see-modified-files.png

Чтобы отправить изменения, нажмите на значок Push to FlutterFlow в строке состояния или выполните команду FlutterFlow: Push to FlutterFlow в палитре команд.

push.png

warning

Это действие нельзя отменить. Убедитесь, что вы не перезапишете изменения в FlutterFlow, которые хотите сохранить.

Чтобы избежать этого, получите последние изменения из FlutterFlow перед редактированием в Visual Studio Code и отправьте обновления после завершения.

Получение последних изменений из FlutterFlow​

Перед редактированием любых пользовательских файлов важно получить последние изменения из FlutterFlow в вашу локальную копилку. Это гарантирует наличие самых актуальных компонентов, переменных состояния приложения и пользовательских типов данных/перечислений, на которые вы можете ссылаться в вашем пользовательском коде.

Чтобы получить последние изменения, нажмите на значок Pull Latest в нижней строке состояния или выполните команду FlutterFlow: Pull Latest Changes.

pull.png

warning

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

Обновление файлов​

Расширение VSCode позволяет обновлять ресурсы пользовательского кода, включая целые файлы или конкретные функции Dart/Flutter.

Для Custom Actions и Custom Widgets существует отношение один-к-одному между каждым действием/виджетом и соответствующим файлом. Если вы создадите новый файл в директории lib/custom_code/actions или lib/custom_code/widgets, это автоматически добавит новое действие или виджет в ваш проект FlutterFlow.

Для Custom Functions все функции содержатся в одном файле: lib/flutter_flow/custom_functions.dart. Вы можете добавлять, редактировать или удалять пользовательские функции непосредственно в этом файле.

Для Package Dependencies вы можете добавлять новые зависимости в файл pubspec.yaml, но не можете изменять существующие. При добавлении новой зависимости она появится в разделе Settings and Integrations > Project Dependencies > Custom Code Dependencies.

custom-code-dependencies

Переименование файлов​

Чтобы переименовать Custom Action или Custom Widget, используйте функцию переименования символа в Visual Studio Code. Просто щелкните правой кнопкой мыши на названии Custom Action или Widget и выберите Rename Symbol, затем введите новое имя.

Если вы измените имя без этого, вам придется обновить имя в файле, где определен виджет или действие, а также в индексном файле, который экспортирует виджет (lib/custom_code/widgets/index.dart) или действие (lib/custom_code/actions/index.dart).

Создание нового ресурса​

Чтобы добавить новый Custom Action или Widget, создайте новый файл Dart в директории lib/custom_code/widgets или lib/custom_code/actions, и шаблон должен появиться в новом файле.

Чтобы добавить новую Custom Function, просто создайте новую функцию Dart в файле lib/flutter_flow/custom_functions.dart. В настоящее время в Visual Studio Code нет автоматической поддержки шаблона кода для Custom Function.

Удаление файлов​

Чтобы удалить Custom Action или Widget, удалите соответствующий файл.

Добавление новых зависимостей​

Вы можете добавлять пользовательские зависимости пакетов pub.dev с помощью команды Dart: Add Dependency из палитры команд Visual Studio Code. Это обновит файл pubspec.yaml.

Использование Flutter Version Management (FVM)​

Если вы хотите управлять версиями Flutter с помощью Flutter Version Management (FVM), вам нужно установить его и добавить в PATH вашей системы. Следуйте этим шагам, чтобы начать:

Установка FVM​

Чтобы установить FVM, выполните следующую команду в терминале. Это устанавливает FVM глобально с помощью менеджера пакетов Dart.

dart pub global activate fvm

Добавление FVM в PATH системы​

После установки вам нужно добавить директорию, содержащую исполняемые файлы FVM, в переменную PATH, чтобы к ней можно было получить доступ глобально.

Для macOS и Linux​

  1. Откройте терминал и выполните следующую команду. Она добавляет директорию ~/.pub-cache/bin в системную переменную PATH навсегда, обновляя файл ~/.zshrc. Это гарантирует, что FVM, установленный в ~/.pub-cache/bin, доступен из любого места в терминале.

    echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.zshrc  # For Zsh
    echo 'export PATH="$PATH":"$HOME/.pub-cache/bin"' >> ~/.bashrc # For 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. Нажмите OK и перезапустите терминал.

Проверка установки​

Чтобы проверить, правильно ли установлен и доступен FVM, выполните:

fvm --version

Если эта команда выводит установленную версию FVM, значит, FVM успешно установлен и добавлен в PATH.

Настройка FVM в проекте Flutter​

После установки FVM перейдите в папку вашего проекта Flutter и настройте FVM:

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

(Замените <flutter_version> на требуемую версию Flutter.)

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

Как загрузить код из бета- или корпоративной версии FlutterFlow?

Если вы используете другую версию FlutterFlow, такую как Beta или Enterprise, вы можете переопределить URL, изменив файл Extension Settings > settings.json.

Например:

  • Для версии Beta установите значение flutterflow.urlOverride равным https://api-beta.flutterflow.io/v1.
  • Для версии Enterprise установите значение flutterflow.urlOverride равным https://api-enterprise-[region].flutterflow.io/v1 (замените [region] на ваш конкретный регион).