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

Метод 1: настройка виджета AppBar
Самый простой способ создать собственную AppBar — настроить существующий виджет AppBar. Вы можете изменить его свойства, такие как цвет фона, цвет текста и высота, чтобы добиться желаемого вида. Вот пример:

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

class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      height: 56,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              // Handle menu button press
            },
          ),
          Text(
            'Custom AppBar',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}
...
CustomAppBar(),

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

Метод 4: создание SliverAppBar
Если вы работаете с ленточным макетом, вы можете использовать виджет SliverAppBar для создания пользовательского AppBar. SliverAppBar обычно используется вместе с CustomScrollView и Slivers. Вот пример:

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Custom SliverAppBar'),
      backgroundColor: Colors.blue,
      floating: true,
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.asset('assets/images/header_image.jpg', fit: BoxFit.cover),
      ),
    ),
    // Other sliver widgets
  ],
)

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