🧩AppBar()

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

1. Параметр title

title задает основной заголовок приложения.

// Some code
AppBar(
  title: Text('Главная страница'),
)

Здесь AppBar будет отображать текст "Главная страница" в центре.

2. Параметр backgroundColor

Этот параметр задает цвет фона AppBar.

// Some code
AppBar(
  title: Text('Заголовок'),
  backgroundColor: Colors.green, // Зеленый фон
)

Фон AppBar будет зеленым.

3. Параметр leading

Этот параметр добавляет виджет слева от заголовка, обычно это иконка меню или кнопка "назад".

// Some code
AppBar(
  title: Text('Слева иконка'),
  leading: Icon(Icons.menu), // Иконка меню слева
)

Слева будет отображаться иконка меню.

4. Параметр actions

actions позволяет добавлять виджеты (например, иконки кнопок) справа от заголовка.

// Some code
AppBar(
  title: Text('Иконки действий'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        print('Нажата кнопка поиска');
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        print('Нажата кнопка "Еще"');
      },
    ),
  ],
)

Справа будут отображаться кнопки поиска и "Еще".

5. Параметр centerTitle

Этот параметр указывает, должен ли заголовок быть выровнен по центру.

// Some code
AppBar(
  title: Text('Центрированный заголовок'),
  centerTitle: true, // Заголовок будет по центру
)

Заголовок будет выровнен по центру.

6. Параметр elevation

elevation задает "высоту" тени под AppBar.

// Some code
AppBar(
  title: Text('Тень AppBar'),
  elevation: 10, // Тень больше
)

Чем больше значение elevation, тем больше будет тень под AppBar.

7. Параметр flexibleSpace

Этот параметр позволяет вставить гибкий виджет, который растягивается на все пространство AppBar.

// Some code
AppBar(
  title: Text('Гибкое пространство'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.purple],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
)

AppBar будет с градиентной заливкой.

8. Параметр bottom

bottom позволяет добавить виджет в нижнюю часть AppBar, обычно это TabBar для создания вкладок.

// Some code
DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('С вкладками'),
          bottom: TabBar(
            tabs: [
              Tab(text: 'Вкладка 1'),
              Tab(text: 'Вкладка 2'),
            ],
          ),
        )
      ),
    )

Внизу AppBar появится TabBar с двумя вкладками.

9. Параметр shape

Этот параметр задает форму AppBar, например, скругленные углы.

// Some code
AppBar(
          title: Text('Скругленные углы'),
          backgroundColor: Colors.green,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              bottom: Radius.circular(30), // Скругление углов снизу
            ),
          ),
        )

У нижних углов AppBar будет скругление.

10. Параметр toolbarHeight

Этот параметр позволяет задать высоту AppBar.

// Some code
AppBar(
  title: Text('Высокий AppBar'),
  toolbarHeight: 100, // Высота 100 пикселей
  backgroundColor: Colors.green,
)

AppBar будет высотой 100 пикселей.

11. Параметр iconTheme

iconTheme позволяет настраивать стиль иконок внутри AppBar.

// Some code
AppBar(
  title: Text('Тема иконок'),
  iconTheme: IconThemeData(
    color: Colors.yellow, // Желтые иконки
    size: 30, // Размер иконок 30
  ),
  actions: [
    Icon(Icons.star),
    Icon(Icons.settings),
  ],
  backgroundColor: Colors.lightBlueAccent,
)

Все иконки в AppBar будут желтого цвета и размером 30.