Во Flutter FloatingActionButton (FAB) — это популярный компонент пользовательского интерфейса, который предоставляет плавающую круглую кнопку для основных действий в приложении. Обычно он используется для запуска наиболее важных или часто используемых функций в приложении. В этой статье мы рассмотрим различные методы работы с виджетом FloatingActionButton во Flutter, а также приведем примеры кода.

Метод 1: базовая кнопка FloatingActionButton

Самый простой способ использования FloatingActionButton — создать базовый экземпляр виджета и указать значок, который будет отображаться на кнопке. Вот пример:

FloatingActionButton(
  onPressed: () {
    // Add your action here
  },
  child: Icon(Icons.add),
)

Метод 2: настройка FloatingActionButton

Вы можете настроить внешний вид FloatingActionButton, изменив его свойства. Например, вы можете изменить цвет фона, форму, высоту и многое другое. Вот пример, демонстрирующий некоторые распространенные настройки:

FloatingActionButton(
  onPressed: () {
    // Add your action here
  },
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  elevation: 4.0,
  child: Icon(Icons.add),
)

Метод 3: расширенная кнопка FloatingActionButton

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

FloatingActionButton.extended(
  onPressed: () {
    // Add your action here
  },
  label: Text('Add Item'),
  icon: Icon(Icons.add),
)

Метод 4. Быстрый набор

Если вам нужно включить несколько кнопок, похожих на FloatingActionButton, вы можете использовать пакет типа flutter_speed_dialдля создания виджета быстрого набора. На панели быстрого набора имеется радиальное меню с кнопками, которые можно разворачивать и сворачивать. Вот пример использования пакета flutter_speed_dial:

SpeedDial(
  animatedIcon: AnimatedIcons.menu_close,
  animatedIconTheme: IconThemeData(size: 22.0),
  children: [
    SpeedDialChild(
      child: Icon(Icons.add),
      label: 'Add Item',
      onTap: () {
        // Add your action here
      },
    ),
    SpeedDialChild(
      child: Icon(Icons.edit),
      label: 'Edit Item',
      onTap: () {
        // Add your action here
      },
    ),
    // Add more SpeedDialChild widgets as needed
  ],
)

В этой статье мы рассмотрели различные методы работы с виджетом FloatingActionButton во Flutter. Мы рассмотрели основы создания простой FloatingActionButton, настройки ее внешнего вида, расширения для размещения большего количества контента и использования пакета типа flutter_speed_dialдля создания быстрого набора с несколькими кнопками. Используя эти методы, вы можете создавать визуально привлекательные и интерактивные возможности FloatingActionButton в своих приложениях Flutter.

Не забудьте поэкспериментировать с различными свойствами и изучить документацию Flutter для получения дополнительных возможностей настройки. Приятного кодирования!