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

Метод 1: пользовательский FAB с BottomAppBar

Один из способов удалить нижнее дополнение — использовать специальную плавающую кнопку действия с BottomAppBar. Вот пример:

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // FAB onPressed logic
    },
    child: Icon(Icons.add),
    elevation: 0,
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    child: Container(height: 0),
    elevation: 0,
  ),
)

В этом методе мы заменяем нижнюю панель Scaffold по умолчанию на BottomAppBar и устанавливаем для ее дочернего элемента пустой контейнер с высотой 0. Кроме того, мы устанавливаем высоту как FAB, так и BottomAppBar на 0, чтобы гарантировать наличие нет визуального заполнения.

Метод 2: собственный FAB со стеком

Другой подход — использовать виджет «Стек», чтобы расположить FAB прямо над нижним краем Scaffold. Вот пример:

Scaffold(
  body: Stack(
    children: [
      // Main content of the screen
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // FAB onPressed logic
    },
    child: Icon(Icons.add),
    elevation: 0,
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)

В этом методе мы помещаем все содержимое экрана в виджет «Стек» и позиционируем FAB с помощью FloatingActionButtonLocation.centerFloat. Это гарантирует, что FAB будет центрирован по горизонтали и будет плавать над содержимым, устраняя любые отступы снизу.

Метод 3. Пользовательский шаблон с помощью LayoutBuilder

Третий подход предполагает создание пользовательского виджета Scaffold и использование LayoutBuilder для управления размером и положением FAB. Вот пример:

class CustomScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // Main content of the screen
      ),
      floatingActionButton: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return FloatingActionButton(
            onPressed: () {
              // FAB onPressed logic
            },
            child: Icon(Icons.add),
            elevation: 0,
            mini: constraints.maxHeight < 600, // Adjust based on screen height
          );
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

В этом методе мы создаем собственный виджет Scaffold и оборачиваем FAB с помощью LayoutBuilder. LayoutBuilder предоставляет ограничения, которые позволяют нам условно устанавливать свойство mini FAB в зависимости от высоты экрана. Настраивая свойство mini, мы можем контролировать размер и положение FAB, эффективно удаляя любые отступы снизу.

В этой статье мы рассмотрели три различных метода удаления нижнего отступа из кнопки плавающего действия Flutter Scaffold. Используя пользовательский FAB с BottomAppBar, виджетом Stack или пользовательский Scaffold с LayoutBuilder, вы можете добиться желаемого макета пользовательского интерфейса без каких-либо нежелательных дополнений. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим конкретным требованиям вашего приложения Flutter.