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

Метод 1: использование виджета FloatingActionButtonTheme
Виджет FloatingActionButtonTheme позволяет определить пользовательскую тему для всех кнопок плавающих действий в определенном поддереве. Чтобы удалить тень, вы можете установить для свойства возвышения значение 0. Вот пример:

FloatingActionButtonTheme(
  data: FloatingActionButtonThemeData(
    elevation: 0,
  ),
  child: FloatingActionButton(
    onPressed: () {
      // FAB onPressed logic here
    },
    child: Icon(Icons.add),
  ),
)

Метод 2: настройка виджета FloatingActionButton
Если вы хотите удалить тень для определенного экземпляра FloatingActionButton, вы можете напрямую настроить его свойство возвышения. Установите высоту на 0, чтобы устранить тень. Вот пример:

FloatingActionButton(
  onPressed: () {
    // FAB onPressed logic here
  },
  elevation: 0,
  child: Icon(Icons.add),
)

Метод 3: создание пользовательского FloatingActionButton
Для более сложных настроек вы можете создать собственный виджет, расширяющий класс FloatingActionButton. В методе сборки замените свойство возвышения на 0. Вот пример:

class CustomFAB extends FloatingActionButton {
  CustomFAB({Key? key, required VoidCallback onPressed})
      : super(key: key, onPressed: onPressed);
  @override
  Widget build(BuildContext context) {
    return super.build(context);
  }
  @override
  double get elevation => 0;
}

Использование:

CustomFAB(
  onPressed: () {
    // FAB onPressed logic here
  },
  child: Icon(Icons.add),
)

Удалить тень с плавающей кнопки действия Flutter можно легко, используя различные методы. Вы можете применить глобальную тему с помощью виджета FloatingActionButtonTheme, настроить свойство высоты конкретного экземпляра FAB или создать собственный виджет FAB с нулевым значением высоты. Не стесняйтесь выбирать метод, который лучше всего соответствует вашим потребностям и повышает визуальную привлекательность вашего приложения!