Собственный код

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

Способов несколько:

• Собственные функции — функции на Dart, значения которых подставляются в свойства виджетов и действий.
• Собственные действия — функции, которые вешаются на триггеры или встают узлом в поток действий. Обычно асинхронные; им доступны сторонние пакеты.
• Файл кода — свои классы, перечисления и логика работы с данными.
• Собственные виджеты — виджеты Flutter, которым тоже доступны сторонние пакеты; используются наравне с компонентами.
• Конфигурационные файлы — правка нативных файлов Android и iOS.

Где писать

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

Писать код можно двумя способами:

1. Во встроенном редакторе.
2. В расширении для Visual Studio Code.

Встроенный редактор

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

Code Copilot

Code Copilot пишет код по текстовому описанию: вы формулируете задачу — «посчитать общую стоимость товаров в корзине», — он выдаёт заготовку.

Полезнее всего для собственных функций и действий.

Компиляция

Кнопка Compile Code проверяет, что код собирается и будет работать в приложении.

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

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

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

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

Анализатор проверяет код на ошибки и предупреждения по ходу написания.

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

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

В каждый новый фрагмент собственного кода FlutterFlow сам добавляет базовые импорты; менять их нельзя. В функциях свои импорты запрещены вовсе, в действиях и виджетах их добавляют после строки «Do not remove or modify the code above».

Настройки

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

Generate Boilerplate Code

Генерирует заготовку: нужные импорты и каркас функции или виджета.

Создайте файл, нажмите значок кода в меню настроек, затем Copy to Editor — заготовка попадёт в редактор.

References

Показывает, где в проекте используется этот фрагмент кода.

Exclude From Compilation

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

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

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

Пример действия с двумя аргументами: cartItems типа List of ItemsStruct и productId типа String.

Обратный вызов как параметр

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

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

В примере собственное действие принимает обратный вызов onError(searchKeyword) с параметром searchKeyword — то есть при вызове оно передаёт поисковый запрос обратно.

Как назначить действие обратному вызову

В примере на onError вешается действие «Show Snackbar», выводящее сообщение с поисковым запросом:

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

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

Пример действия, возвращающего целое число, которое может быть null:

Описание

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

Описание видно подсказкой при наведении на зелёный значок заметки.

Как это организовать

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

Например, в папке Cart со страницами и компонентами корзины уместна и функция calculateCartTotals.

Подключение пакета

Pub.dev — официальный репозиторий пакетов Dart и Flutter.

Пакет подключается в Settings and Integrations > Project Dependencies, вкладка Custom Dependencies: нажмите Add Pub Dependency, введите имя пакета и версию, нажмите Add.

Как выбрать пакет

Под любую задачу на pub.dev найдётся несколько пакетов, и выбрать бывает непросто.

На что смотреть:

• WEB — поддержка веба обязательна, иначе приложение не запустится в Run/Test Mode.
• Likes — сколько разработчиков отметили пакет.
• Pub Points — оценка качества из 130 баллов: стиль кода, поддержка платформ, сопровождаемость.
• Popularity — доля приложений, использующих пакет; косвенный признак стабильности.
• Документация — понятные примеры и внятный README экономят часы.
• Дата последнего обновления — заброшенный пакет рано или поздно перестанет собираться с новой версией Flutter.

Для подключения понадобятся две вещи: имя пакета с версией и строка импорта.

Пакеты не с pub.dev

FlutterFlow умеет подключать пакеты, которых нет на pub.dev, — из публичных и закрытых репозиториев.

Из публичного репозитория

Для пакета, лежащего на GitHub, указывается адрес репозитория:

  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 создайте токен с нужными правами. Лучше — токен с ограниченными правами, дающий доступ только к нужному репозиторию.

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

Подставьте своё имя пользователя вместо <username> и токен вместо <personal-access-token>.

Что взять со страницы пакета

1. Имя пакета и версию

На странице пакета на pub.dev нажмите значок Copy to Clipboard рядом с именем и версией и вставьте это в раздел Pubspec Dependency справа внизу редактора.

Разбор — в примере.

2. Строку импорта

Импорт указывает, откуда берётся код пакета. Он добавляется в конец блока стандартных импортов в редакторе.

Найти его можно на вкладке Installing в разделе Import It; рядом есть значок копирования.

3. Пример кода

Он лежит на вкладке Example. Скопируйте нужный фрагмент в свой виджет или действие и доработайте под задачу.

Пример подключения

Разберём на пакете flutter_rating_bar: из его примера собирается собственный виджет ProductRatingBar для страницы товара.

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

Зависимости управляются в Settings and Integrations > Project Dependencies, вкладка Custom Dependencies.

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