Панель свойств
Properties Panel — правая панель редактора, в которой настраивается выбранный виджет. Она открывается, когда вы кликаете по виджету или компоненту в дереве виджетов.
Короткая демонстрация: добавляем виджет на холст, панель открывается справа, меняем свойства.
Панель разбита на секции. Набор секций зависит от типа виджета, а часть настроек спрятана в дополнительных блоках.
Имя виджета
Имя выбранного виджета показано вверху панели. По умолчанию оно совпадает с типом: у Container так и написано «Container». Значок карандаша справа позволяет задать своё имя — это заметно упрощает чтение дерева, когда контейнеров на странице десяток.
Actions
Здесь описываются реакции на действия пользователя: переход на другую страницу, отправка формы, вызов API. Действия навешиваются на триггеры — On Tap, On Long Press и другие.
Набор триггеров зависит от виджета: у некоторых нет ни одного.
Backend Query
Секция подключает виджет к источнику данных — запросу к базе или вызову API. Через неё на экран попадает динамическое содержимое: профили, каталог товаров, лента.
Generate Dynamic Children
У виджетов, которые умеют держать несколько потомков, есть вкладка Generate Dynamic Children: она размножает один потомок по элементам списка. Обычный случай — вывести то, что вернул API.
Такую вкладку имеют Column, Row, Stack, ListView, GridView и PageView.
Подробно про генерацию динамических потомков.
Animations
Виджету можно назначить анимацию — привлечь внимание к важному элементу, показать отклик на нажатие или сгладить переход между состояниями.
Подробно про анимации.
Documentation и Semantic Labels
Documentation — заметка о том, зачем нужен этот виджет. Через полгода это единственное, что объяснит логику экрана вам же.
Semantic labels — подпись для программ чтения с экрана. Без неё виджет для незрячего пользователя остаётся безымянным элементом.
Additional Flutter Properties
Панель свойств показывает не все параметры Flutter-виджета, который стоит за элементом. Недостающий параметр можно задать в блоке Additional Flutter Properties внизу панели. Визуальная правка, тема и привязки при этом остаются, так что переделывать виджет в собственный не нужно.
Блок есть у встроенных виджетов, которые генерируют обычный виджет Flutter или стороннего пакета: Text, Container, Image, ListView и других. Его нет у виджетов, которые FlutterFlow собирает из своих обёрток, вроде Button и DropDown, — у них в панели и так выведены все параметры. Нет его и у компонентов, собственных виджетов и построителей виджетов (widget builders).
Как добавить свойство
- Выделите виджет на холсте или в Widget Tree.
- На панели свойств раскройте Additional Flutter Properties.
- В подсвеченной строке напишите параметр как именованный аргумент Dart с запятой в конце, например
softWrap: false,. - Каждый следующий параметр — на новой строке.
Что видно в редакторе:
- первая строка — сгенерированный конструктор виджета, например
Text(; - строка
...заменяет свойства, которые FlutterFlow уже выставил из панели; - править можно только подсвеченные строки. Слева они пронумерованы с 1, и сообщения об ошибках ссылаются на эти же номера.
FlutterFlow вставляет ваши аргументы в вызов конструктора перед child или children.
Редактор подсказывает по мере ввода. В начале строки — оставшиеся именованные параметры виджета, после имени параметра — значения вроде цветов и стилей текста из темы, после точки — члены типа.
Подсказкам нужен анализатор кода. Если он ещё не готов, блок покажет сообщение, но вводить аргументы можно и без подсказок.
Дополнительные свойства действуют в сгенерированном коде и в Test Mode, но на холсте не отображаются.
Что можно писать
- Только именованные аргументы, по одному на строку, например
maxLines: 2,. Позиционные не поддерживаются. - Только классы и имена, доступные через импорты, которые уже есть в сгенерированной странице.
- Без
key,childиchildren— ими управляет FlutterFlow. - Один параметр — один раз.
- Без параметров, которые уже управляются из панели свойств, даже если там стоит значение по умолчанию. Такие задавайте в панели.
Если аргумент нарушает эти правила или содержит синтаксическую либо типовую ошибку, под редактором появится сообщение, и та же ошибка попадёт на панель Issues. Пока она не исправлена, запустить приложение в Test Mode или опубликовать его нельзя.
Чтобы убрать дополнительное свойство, удалите его строку. Если у виджета уже есть дополнительные свойства, блок виден всегда — их можно просмотреть и удалить.