Ответ
AppBar — это стандартный виджет верхней панели в Material Design. Я использую его для навигации и размещения основных элементов управления на экране.
Типичное содержимое AppBar:
- Заголовок (
title): Название текущего экрана. - Кнопка назад (
automaticallyImplyLeading): Появляется автоматически при наличии предыдущего маршрута вNavigator. - Кнопки действий (
actions): Список виджетов (обычноIconButton) для дополнительных функций, например, поиска, фильтра или настроек. - Гибкое пространство (
flexibleSpace): Для кастомного фона или размещения виджетов типаTabBarпод заголовком.
Пример с кастомизацией:
AppBar(
title: Text('Мой профиль'),
backgroundColor: Colors.deepPurple,
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () => Navigator.pushNamed(context, '/settings'),
),
],
bottom: TabBar(
tabs: [
Tab(text: 'Инфо'),
Tab(text: 'Посты'),
],
),
)Он также управляет стилем статус-бара (светлый/темный текст) через свойство systemOverlayStyle.
Ответ 18+ 🔞
Давай разберем эту вашу панельку, AppBar, а то народ путается, как с ней работать. Это, бля, как та штанга в спортзале — базовое упражнение, без него никуда, но если навешать на неё всякой хуйни, то и поднять не сможешь.
Короче, что обычно в эту штуку пихают:
- Заголовок (
title): Просто пишешь, где ты находишься. "Главная", "Настройки" — чтобы не охуеть и не забыть. - Кнопка "Назад" (
automaticallyImplyLeading): Вот это вообще магия, ёпта. Если ты пришел с другого экрана, она сама появляется, как будто её и не было. Удобно, пиздец. - Кнопки действий (
actions): Сюда ты лепишь все свои иконки справа. Поиск, корзина, колокольчик уведомлений — вот эта вся хуйня. Обычно этоIconButton, которые что-то делают при нажатии. - Гибкое пространство (
flexibleSpace): Ну это для красоты, или если тебе надо, чтобы под заголовком еще какая-то хрень была, вродеTabBar. Без него тоже можно жить.
Смотри, как это выглядит в коде, когда ты хочешь сделать что-то посерьёзнее, чем просто белая полоска:
AppBar(
title: Text('Мой профиль'), // Чётко видно, где ты
backgroundColor: Colors.deepPurple, // Красим в любимый цвет, чтобы не было скучно
actions: [
IconButton(
icon: Icon(Icons.settings), // Иконка настроек
onPressed: () => Navigator.pushNamed(context, '/settings'), // И по нажатию летим в настройки
),
],
bottom: TabBar( // А вот и табы прикручиваем снизу, очень удобно
tabs: [
Tab(text: 'Инфо'),
Tab(text: 'Посты'),
],
),
)А еще эта панелька, хитрая жопа, может управлять цветом текста в статус-баре (это там, где время и зарядка батареи показываются). Через systemOverlayStyle скажешь системе: "Слушай, у меня тут фон тёмный, сделай буквы белыми, а то нихуя не видно". В общем, виджет как виджет, но без него — как без штанов.
