Плавающая кнопка действия

Виджет FloatingActionButton (также известный как FAB) парит над содержимым экрана и привязан к какому-либо действию. Виджет FAB имеет круглую форму и располагается в правом нижнем углу экрана.

Виджет FAB можно использовать для выполнения основного действия на экране, такого как Добавить, Создать и т.д.

Чтобы добавить виджет FAB с иконкой в ваш проект:
Сначала перетащите виджет FAB с вкладки Элементы страницы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.

• Теперь добавьте виджет Icon с вкладки Base Elements и поместите его внутрь виджета FAB.
• Перейдите в Редактор свойств и прокрутите вниз до раздела Иконка.
• Нажмите на кнопку Settings Outlined, затем найдите и выберите название иконки с помощью add.
• Также установите для свойства Icon Color значение Tertiary.

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

Вы можете захотеть изменить виджет FAB по умолчанию, чтобы он соответствовал вашему дизайну. Для изменения внешнего вида виджета FAB можно использовать панель свойств.

Иногда вы можете захотеть показать в FAB не только значок.

Вот пример того, как можно настроить виджет FAB:

• Выберите виджет FloatingActionButton в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства FAB.
• Установите флажок Расширенные.
• Прокрутите немного вниз и найдите раздел Значок. Нажмите на кнопку None, затем найдите и выберите иконку с именем thumb_up. Также установите для свойства Icon Color значение Tertiary.
• На этом этапе у вас будет два значка, значок добавления и значок thumb_up. Замените значок добавления (дочерний элемент виджета FAB) виджетом Text. Измените название на Approve и цвет текста на третичный.

Вы можете дополнительно настроить свой FAB, добавив дополнительные дочерние виджеты (например, Row, Image и т.д.).

Чтобы изменить цвет фона виджета FAB:

• Выберите виджет FloatingActionButton в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства FAB.
• Найдите свойство Color. Нажмите на поле рядом с Primary, выберите цвет, а затем нажмите Use Selected Color или нажмите на Primary и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.

Чтобы изменить высоту (глубину или ось Z) кнопки FAB:

• Выберите виджет FloatingActionButton в дереве виджетов или в области холста.
• Перейдите в редактор свойств и прокрутите вниз до раздела Свойства FAB.
• Найдите свойство Elevation и введите значение, чтобы увидеть эффект падающей тени под картой. Большее значение задает больший размер тени.

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

Чтобы выполнить какое-либо действие при нажатии на FloatingActionButton, добавьте Action во FlutterFlow. Инструкции по добавлению Action вы можете найти здесь.

Инструкции по отображению/скрытию виджета можно найти здесь