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

Что такое Custom Actions

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

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

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

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

Как создать такой экшен

Все проще, чем кажется:

  1. Выберите опцию «Custom Function» в левой части экрана.
  2. В открывшемся окне перейдите на вкладку «Custom Actions».
  3. Нажмите на кнопку «Create».

Укажите все необходимые настройки во всплывающем окне:

  1. Назовите экшен понятным для себя названием. Обратите внимание, что FlutterFlow не принимает в названиях русские буквы!
  2. В разделе «Return Value» установите тип данных возвращаемого значения на подходящий вам. Например, если экшен возвращает текст, установите тип String.
  3. В разделе «Define Arguments» добавьте параметры пользовательского действия. Здесь также нужно дать имя аргументу, выбрать его тип данных, определить, нужно ли вам передать один элемент или несколько.
  4. Нажмите «View Boilerplate Code», чтобы автоматически сгенерировать код экшена со всеми параметрами. Не забудьте нажать «Copy to Editor», чтобы добавить код в экшен. Если вы хотите импортировать экшен из pub.dev, то обязательно в поле «Required Pubspec Dependencies» введите имя пакета с его последней версией.
  5. Нажмите «Check Errors, чтобы проверить код на ошибки. Если они появятся, то вы увидите красные крестики в тех строках, в которых есть ошибки.

Последний шаг — нажать кнопку «Compile». Это непосредственное создание экшена, если все пойдет правильно, вы увидите «No Errors!» и кнопку «Save».

Где достать готовые экшены для проекта и как их выбрать

В предыдущем пункте проскочил пункт о том, что можно взять готовое решение. И даже есть ссылка на pub.dev.

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

  1. Зайти на сайт.
  2. Выбрать подходящий экшен.
  3. Добавить его название и версию в новый экшен (алгоритм описан выше).

Вы даже сам код можете взять из этой библиотеки.

Чтобы получить название и версию экшена, можно скопировать их из названия на pub.dev или с помощью кнопки копирования справа от имени пакета.

Когда используете pub.dev, обращайте внимание на количество лайков у пакета экшенов и на наполнение пакета. В нем может быть очень полезная информация: базовый код для экшена, разный внешний вид (у тех же кнопок), дополнительные опции.

На сегодня все. Ждем вас в следующих статьях и на нашем новом продвинутом курсе по мобильной разработке на FlutterFlow. Если вы уже изучили Glide, Adalo, Bubble или Webflow — приходите и испытайте себя на прочность!