Создание компонента

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

С нуля

Нажмите Add Button во вкладке Page Selector или Widget Tree и выберите Add Component > Create Blank Component.

Преобразование готового виджета

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

Щёлкните правой кнопкой по корневому виджету нужной ветки дерева и выберите Convert to Component.

Из шаблона

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

Генерация в Designer

FlutterFlow Designer соберёт компонент по описанию на обычном языке, опираясь на контекст вашего проекта и подбирая подходящие виджеты.

Импорт кадра из Figma

Import from Figma превращает макет в компонент: вы даёте ссылку на кадр (Frame), ИИ FlutterFlow разбирает дизайн и собирает по нему вёрстку.

Сначала подключите аккаунт Figma. Затем при создании компонента выберите Import from Figma, вставьте ссылку на кадр и нажмите Import.

FlutterFlow покажет превью кадра. Проверьте его и нажмите Generate — готовый компонент появится в AI Generation History, откуда его можно посмотреть и добавить в проект.

Панель свойств компонента

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

Вот что в ней есть:

Параметры компонента

Параметры — это значения, которые компонент получает от родителя: страницы или другого компонента. Благодаря им один и тот же компонент показывает разные данные и ведёт себя по-разному, оставаясь единым по устройству.

Создание параметра

Параметры создаются на корневом виджете компонента.

Привязка параметра

Созданный параметр связывается с данными родителя.

Небольшой пример: параметры компонента ProfileListItem привязываются к его виджетам и триггерам действий.

Кроме обычных типов данных параметр может быть одного из двух особых видов:

• Action (колбэк) — передача действия внутрь компонента. Компонент вызывает его в своих потоках действий; так, например, родитель узнаёт о нажатии кнопки внутри компонента и обновляет своё состояние. Подробнее о колбэках.

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

Действия

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

Добавляются они так же, как и любому элементу страницы:

Кроме того, у компонента есть собственные события жизненного цикла — например On Initialization.

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

У компонента могут быть свои переменные состояния: введённые значения, положение переключателей, результат взаимодействия с пользователем. Меняются они как по действиям пользователя, так и по внешним событиям — скажем, при получении данных от API.