Собственные виджеты

Custom Widget — элемент интерфейса, написанный кодом. Он нужен там, где встроенного набора FlutterFlow не хватает.

Оговорка важная: в большинстве случаев достаточно собрать переиспользуемый компонент из готовых виджетов. Собственный виджет оправдан, когда нужен UI-пакет с pub.dev.

Где применяются

Нестандартные элементы, которых нет в наборе FlutterFlow.
Сторонние UI-пакеты с pub.dev.

Собственный виджет создаётся как новый фрагмент собственного кода. В примере ниже собирается ProductRatingBar — шкала оценки на основе пакета с pub.dev, которая возвращает выбранное значение обратно через обратный вызов.

инфо

Widget Builder как параметр

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

Ширина и высота

Собственному виджету обязательно нужны ширина и высота. Без явных размеров он не отрисуется.

Подключение зависимости

В примере используется пакет flutter_rating_bar: код из примера на pub.dev переносится во FlutterFlow и дорабатывается.

совет

Выбор пакета

Как искать пакеты на pub.dev и оценивать, стоит ли брать конкретный, — в отдельном разделе.

Готовый виджет перетаскивается на страницу из раздела Components в палитре виджетов или вставляется через дерево виджетов.

Обратные вызовы

У виджета из примера объявлен обратный вызов onRating, поэтому при размещении на странице ему нужно назначить действие. Здесь значение ratingValue записывается в переменную состояния страницы userRating.

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

совет

Остальные настройки

Про Exclude From Compilation, обратные вызовы и зависимости pubspec — в общем руководстве.