Пользовательский код

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

Существует несколько способов сделать пользовательский код доступным в FlutterFlow:

• Пользовательские функции: Пользовательские функции на Dart, которые можно использовать для установки свойств виджетов или действий.
• Пользовательские действия: Пользовательские функции на Dart, которые можно запускать с помощью триггеров действий или использовать как узлы в потоке действий. Обычно это функции async и они могут импортировать пользовательские зависимости пакетов.
• Файл кода: Вы можете определить пользовательские классы, перечисления и логику для управления данными и поведением вашего приложения.
• Пользовательские виджеты: Пользовательские виджеты Flutter, которые также могут импортировать пользовательские зависимости пакетов и использоваться так же, как компоненты по всему проекту.
• Конфигурационные файлы: Вы сможете редактировать нативные файлы для Android и iOS.

Зачем писать пользовательский код?

• Расширение функциональности: Добавление функций, которые не включены в стандартные компоненты FlutterFlow.
• Пользовательские интеграции: Интеграция с пакетами или API/базы данных третьих сторон, требующими специальной обработки.
• Уникальные элементы интерфейса: Создание уникальных элементов пользовательского интерфейса, требующих пользовательской отрисовки или взаимодействий.

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

В FlutterFlow существует два основных способа написания пользовательского кода:

1. С помощью редактора кода в приложении
2. С помощью расширения Visual Studio Code

Использование редактора кода в приложении

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

подсказка

Чтобы использовать возможности, выходящие за рамки редактора кода в приложении, вы можете нажать на значок VS Code, чтобы открыть и редактировать пользовательский код непосредственно в VS Code с помощью расширения FlutterFlow для VSCode.

Использование редактора кода в приложении на рабочем столе

Обратите внимание, что версия редактора кода в приложении для рабочего стола ограничена. Мы рекомендуем использовать веб-редактор или расширение VSCode.

Code Copilot

Code Copilot — это функция с поддержкой ИИ, которая помогает генерировать фрагменты кода, функции или целые блоки кода на основе описаний на естественном языке того, что вы хотите достичь. Она упрощает процесс создания приложения, позволяя описать нужную функциональность, например «вычислить общую цену товаров в корзине», после чего Copilot генерирует необходимый код.

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

Ограничение

Ваш запрос должен содержать не менее 3 слов и не более 500 символов.

Компиляция кода

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

Для этого нажмите кнопку Compile Code.

Как распознать ошибки времени компиляции

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

Пользовательские виджеты и действия не требуют компиляции для экспорта кода или тестирования приложения. Однако вы не сможете предварительно просмотреть пользовательские виджеты в конструкторе, пока они не скомпилированы. Вы увидите предупреждение проекта, если не скомпилируете пользовательские виджеты или действия.

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

Анализатор кода

Анализатор кода доступен во всех ваших фрагментах пользовательского кода и обеспечивает качество и корректность вашего пользовательского кода. Он автоматически проверяет код на Dart на наличие ошибок и предупреждений, предоставляя обратную связь в реальном времени по мере написания.

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

Автоматические импорты FlutterFlow

При создании нового фрагмента пользовательского кода (действий, виджетов или функций) в FlutterFlow некоторые фундаментальные импорты будут добавлены автоматически. Эти импорты не могут быть изменены разработчиком. Пользовательские функции не позволяют добавлять пользовательские импорты, но вы можете добавить пользовательские импорты в пользовательские действия и виджеты после строки "Do not remove or modify the code above".

Настройки пользовательского кода

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

Генерация шаблонного кода

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

После создания нового файла ресурса нажмите на значок кода в меню настроек виджета, чтобы сгенерировать шаблонный код. Затем нажмите "Copy to Editor", чтобы добавить шаблон в редактор кода файла ресурса, где вы сможете дополнительно настроить его.

Исключить из компиляции

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

Область применения

Эта опция доступна только для пользовательских виджетов и пользовательских действий.

Включить BuildContext

Эта настройка определяет, передавать ли BuildContext виджета, вызывающего это пользовательское действие, в качестве аргумента. Это полезно для действий, которым нужно взаимодействовать с деревом виджетов или получать доступ к данным, специфичным для контекста.

Область применения

Эта опция доступна только для пользовательских действий.

Входные аргументы

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

Вот пример действия, которое принимает 2 аргумента: cartItems это List of ItemsStruct and productId это String.

Генерируемый код для пользовательских типов данных

При определении пользовательского типа данных в FlutterFlow генерируемый код будет ссылаться на тип как на <YourTypeName>Struct. Например, если ваш пользовательский тип данных называется Items, он будет ссылаться в генерируемом коде как ItemsStruct.

Действие обратного вызова в качестве параметра

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

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

Что такое обратные вызовы?

В программировании обратные вызовы — это функции, передаваемые другим функциям для вызова при возникновении определенного события.

В следующем примере у нас есть пользовательское действие, которое принимает onError(searchKeyword) действие обратного вызова с параметром действия searchKeyword. Это означает, что пользовательское действие предоставит это ключевое слово поиска обратно действию обратного вызова при его вызове.

Добавление действия к действию обратного вызова

Чтобы предоставить действие обратного вызова вашему основному пользовательскому действию, ознакомьтесь с этим кратким руководством, где мы предоставляем действие "Show Snackbar" для onError, отображающее объединенный текст с использованием ключевого слова поиска.

Возвращаемые значения

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

Область применения

Возвращаемые значения включены только для пользовательских функций и пользовательских действий. Пользовательские виджеты не могут возвращать значение на данный момент.

Вот пример действия, которое возвращает nullable целое число.

Описание

Вы можете добавить заметку Description для пользовательских функций и пользовательских действий, чтобы кратко объяснить их назначение, использование или важные детали. Это помогает прояснить, для чего предназначена функция или действие, делая ваш проект более понятным и удобным в обслуживании — особенно в библиотеках и совместных средах.

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

подсказка

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

Добавление зависимости Pubspec

Pub.dev — это официальный репозиторий пакетов для Dart и Flutter. Он содержит широкий спектр пакетов, библиотек и инструментов, которые разработчики могут использовать для расширения функциональности своих приложений на Dart и Flutter.

Пакеты Flutter Favorite

Пакеты Flutter Favorite — это отборная коллекция пакетов на pub.dev, признанных командой Flutter и сообществом за их качество, популярность и полезность в разработке на Flutter. Эти пакеты отмечены значком "Flutter Favorite", что указывает на соответствие высоким стандартам качества, надежности и лучших практик.

Вы можете ознакомиться с пакетами Flutter Favorite на странице Flutter Favorites на pub.dev.

Чтобы добавить зависимость pubspec из pub.dev, перейдите в Settings and Integrations > Project Dependencies, затем откройте вкладку Custom Dependencies. Нажмите Add Pub Dependency, введите имя пакета и версию, затем нажмите Add, чтобы включить его в проект.

Выбор правильного пакета из pub.dev

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

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

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

• WEB: Она должна поддерживать Web, чтобы запускать приложение в нашем режиме Run/Test.
• Likes: Это показывает, сколько разработчиков отметили зависимость лайком.
• Pub Points: Указывает качество зависимости (из 130) на основе стиля кода, поддержки платформ и удобства сопровождения.
• Popularity: Этот показатель указывает, сколько приложений используют пакет. Высокий показатель популярности (из 100%) может свидетельствовать о том, что пакет стабилен и доверен многими разработчиками.
• Documentation: Хорошо документированный пакет сэкономит время и уменьшит неоднозначность. Проверьте, есть ли в пакете четкие примеры использования, полный README и, идеально, документацию API.
• Maintenance & Updates: Проверьте дату последнего обновления. Регулярно обновляемый пакет более вероятно совместим с последними версиями Dart/Flutter и имеет меньше ошибок.

При добавлении зависимости pubspec к вашему пользовательскому коду в FlutterFlow вам понадобятся две части информации: имя пакета с номером версии и оператор импорта.

Использование неопубликованных или приватных пакетов

FlutterFlow поддерживает использование неопубликованных пакетов, что позволяет интегрировать пакеты, которые еще не доступны на pub.dev. Эта возможность особенно полезна при работе с пользовательскими, форкнутыми или приватными пакетами, размещенными в публичных или приватных репозиториях. Используя это, вы можете улучшить функциональность вашего приложения с помощью настроенных или проприетарных библиотек, адаптированных к вашим конкретным нуждам.

Возможные сценарии использования

• Использование другой ветки пакета: Когда вам нужно протестировать или использовать функции, доступные только в конкретной ветке пакета.
• Форкнутая версия для настройки функций: Когда вам нужно форкнуть пакет, чтобы настроить его функциональность или исправить проблемы, которые оригинальный maintainer не устранил.
• Приватные пакеты для внутреннего использования: Компании или предприятия могут иметь внутренние библиотеки Flutter, которые они хотят использовать в своем приложении FlutterFlow, но не могут публиковать публично из-за конфиденциальности или проприетарных ограничений.

Добавление пакетов из публичных репозиториев

Для пакетов, размещенных в публичных репозиториях (например, GitHub), вы можете добавить их в проект FlutterFlow, указав URL репозитория в следующем формате.

  package_name:
    git:
      url: https://github.com/username/repository_name.git

Вы также можете уточнить зависимость, используя дополнительные параметры, такие как ref и path в указанном формате. Вот несколько примеров:

• Для использования конкретной ветки (например, development):

  package_name:
    git:
      url: https://github.com/username/repository_name.git
      ref: development

• Для использования из конкретного коммита:

dependencies:
  package_name:
    git:
      url: https://github.com/username/repository_name.git
      ref: a1b2c3d4

• Для использования пакета, расположенного в поддиректории репозитория:

  package_name:
    git:
      url: https://github.com/username/repository_name.git
      path: packages/subpackage_name

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

Добавление пакетов из приватных репозиториев

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

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

package_name:
    git:
      url: https://<username>:<personal-access-token>@github.com/username/private_repo.git

Замените <username> на ваше имя пользователя GitHub и <personal-access-token> на сгенерированный токен.

Настройка кода

Чтобы настроить ваш пользовательский код с пакетом, скопируйте и вставьте следующие элементы со страницы пакета на pub.dev:

1. Копирование имени пакета и версии

Чтобы использовать зависимость в файле ресурса пользовательского действия или пользовательского виджета, перейдите на страницу пакета на pub.dev и нажмите значок Copy to Clipboard рядом с именем пакета и версией. Затем вставьте его в раздел Pubspec Dependency (в правом нижнем углу) редактора кода FlutterFlow.

См. пример для получения дополнительной информации.

warning

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

Вы можете проверить, есть ли у текущей зависимости дополнительные зависимости, в разделе 'Dependencies' в правом нижнем углу.

2. Копирование оператора импорта

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

Откройте страницу зависимости и выберите вкладку Installing; в разделе Import It вы найдете оператор импорта. Чтобы скопировать, нажмите значок Copy to Clipboard .

3. Копирование примера кода

Пример кода всегда доступен на вкладке Example на странице пакета на pub.dev. Скопируйте любые релевантные фрагменты, демонстрирующие использование, и вставьте их в файл пользовательского виджета или функции. Затем вы можете изменить код по необходимости, чтобы он соответствовал вашему проекту.

Добавление зависимости Pubspec к пользовательскому коду: руководство по примеру

В этом примере мы используем зависимость flutter_rating_bar для создания ProductRatingBar пользовательского виджета для наших страниц продуктов. Узнайте, как мы используем пример кода с pub.dev и добавляем настроенный виджет в FlutterFlow:

примечание

Этот пример демонстрирует, как добавить пакет pub.dev к фрагменту пользовательского виджета, но вы можете следовать тому же процессу для добавления пакета к пользовательским действиям. Для глубокого изучения ознакомьтесь с подробной документацией по пользовательским виджетам и пользовательским действиям.

Управление зависимостями

Вы можете управлять зависимостями непосредственно из Settings and Integrations > Project Dependencies > вкладка Custom Dependencies.

Если возникают конфликты версий, предупреждения появятся как на вкладке Custom Dependencies, так и в редакторе Custom Code. Вы также можете обновлять версии пакетов непосредственно из списка, что упрощает решение проблем и поддержание согласованности зависимостей.