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

Метод 1: свойство BottomNavigationBar Scaffold
Один из способов расположить AppBar внизу — использовать свойство bottomNavigationBarвиджета Scaffold. Вот пример:

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  bottomNavigationBar: BottomAppBar(
    child: Container(
      height: 56.0, // Set your desired height
      // Add your content here
    ),
  ),
  body: Container(),
);

Метод 2: собственный виджет AppBar
Другой подход — создать собственный виджет AppBar, который располагается внизу. Вот пример:

class BottomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.bottomCenter,
      height: kToolbarHeight,
      child: AppBar(
        title: Text('My App'),
        automaticallyImplyLeading: false,
        elevation: 0.0,
        backgroundColor: Colors.transparent,
      ),
    );
  }
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}
// Usage:
Scaffold(
  appBar: BottomAppBar(),
  body: Container(),
);

Метод 3: собственный PreferredSizeWidget
Вы также можете создать собственный PreferredSizeWidget, который расположит AppBar внизу. Вот пример:

class BottomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.bottomCenter,
      height: kToolbarHeight,
      child: AppBar(
        title: Text('My App'),
        automaticallyImplyLeading: false,
        elevation: 0.0,
        backgroundColor: Colors.transparent,
      ),
    );
  }
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}
// Usage:
Scaffold(
  appBar: AppBar(
    toolbarHeight: kToolbarHeight + MediaQuery.of(context).padding.bottom,
    flexibleSpace: BottomAppBar(),
  ),
  body: Container(),
);

Метод 4: Виджет стека
Используя виджет Stack, вы можете наложить панель приложений в нижней части экрана. Вот пример:

Scaffold(
  body: Stack(
    children: [
      Container(), // Your content goes here
      Align(
        alignment: Alignment.bottomCenter,
        child: AppBar(
          title: Text('My App'),
        ),
      ),
    ],
  ),
);

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