FlutterFlow Visual Studio Extension

Расширение 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.

Установка

Для полного использования инструментов Flutter, Dart и искусственного интеллекта в Visual Studio Code при редактировании пользовательского кода FlutterFlow, вы можете установить расширение FlutterFlow: Редактор пользовательского кода. Вот несколько простых способов настроить его.

Установка через Marketplace

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

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

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

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

подсказка

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

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

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

В палитре команд вы можете использовать команду FlutterFlow: Загрузить код.

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

• ID проекта: Это идентификатор проекта или уникальный идентификатор вашего проекта FlutterFlow. Вы можете найти ID проекта, наведя курсор на имя проекта в верхнем левом углу в FlutterFlow Builder.
• Имя ветви: Имя ветви проекта FlutterFlow, над которой вы хотите работать. Вы можете оставить это поле пустым, чтобы работать в основной ветке.
• Местоположение загрузки: Вам будет представлен выбор каталога, куда загрузить код вашего проекта, код будет загружен в этоткаталог/IDпроекта.

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

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

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

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

Рекомендуется установить Расширения для Flutter & Dart, которые облегчат редактирование кода Flutter и Dart.

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

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

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

• Пользовательские действия: в каталоге lib/custom_code/actions
• Пользовательские виджеты: в каталоге lib/custom_code/widgets
• Пользовательские функции: в lib/flutter_flow/custom_functions.dart
• Зависимости пакетов: в pubspec.yaml

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

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

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

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

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

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

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

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

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

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

warning

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

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

Извлечение последних изменений из FlutterFlow

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

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

warning

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

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

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

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

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

Для Зависимостей пакетов вы можете добавлять новые зависимости в файл pubspec.yaml, но вы не можете изменять уже существующие. При добавлении новой зависимости она будет видна в разделе Настройки и Интеграции > Зависимости проекта > Зависимости пользовательского кода.

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

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

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

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

Чтобы добавить новое Пользовательское действие или Виджет, создайте новый файл Dart в каталоге lib/custom_code/widgets или lib/custom_code/actions, и заготовка должна появиться в новом файле.

Для добавления новой Пользовательской функции просто создайте новую функцию Dart в