AppBar — что это такое, настройка и виджеты Flutter

Что такое AppBar во Flutter

AppBar — это стандартный Material-компонент верхней панели, который отображается в верхней части Scaffold. Он содержит заголовок экрана, навигационную кнопку (обычно иконка «гамбургер» или стрелка «Назад») и действия — иконки, открывающие поиск, настройки или другие функции. AppBar автоматически адаптируется под платформу: на Android используется стандартный Material bottom-shadow, на iOS — более плоский дизайн с прозрачностью.

AppBar реализует интерфейс PreferredSizeWidget, что означает, что его высота фиксирована и известна до построения. По умолчанию высота AppBar составляет 56dp на Android и 44dp на iOS в портретной ориентации, с учётом SafeArea сверху. Эта особенность позволяет Scaffold заранее рассчитать доступное пространство для body, избегая перекомпоновки при отрисовке.

По данным Flutter Material Library Guide (2026), AppBar прошёл несколько итераций: в Flutter 1.x он был простым контейнером с текстом, в Flutter 2.x получил поддержку Material 3 и flexibleSpace, а в Flutter 3.x — интеграцию с System UI (цвет строки состояния, прозрачность). Современный AppBar поддерживает Dynamic Color от Material You на устройствах Android 12+.

Структура AppBar: свойства и параметры

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

Title и leading: настройка заголовка и навигации

Свойство title принимает любой виджет, но чаще всего используется Text с настройкой стиля через TextStyle. Для длинных заголовков рекомендуется оборачивать title в Flexible, чтобы текст корректно обрезался при нехватке места. Свойство leading автоматически заменяется на BackButton при переходе на вложенный экран через Navigator.push, если не задано явно.

Actions: размещение иконок действий

Список actions содержит виджеты, выравниваемые по правому краю AppBar. Каждый элемент должен быть не шире 48dp (стандарт Material Design). Для группировки действий используйте PopupMenuButton — это скрывает менее важные опции в выпадающее меню и соблюдает Material-рекомендации по плотности интерфейса.

Кастомизация AppBar: стили, цвета и поведение

AppBar поддерживает глубокую кастомизацию через свойства цвета, тени и отступы. Базовое оформление наследуется из темы приложения, но каждое свойство можно переопределить индивидуально. Рассмотрим основные сценарии настройки.

Цвет фона AppBar задаётся через backgroundColor. Если не указан, используется appBarTheme из ThemeData. В Material 3 цвет AppBar автоматически рассчитывается из ColorScheme.primary, но его можно переопределить для конкретного экрана. Для прозрачного AppBar (часто используется в профилях) установите backgroundColor: Colors.transparent с elevation: 0.

Свойство elevation управляет тенью под AppBar. Значение 0 убирает тень, создавая эффект «плоской» панели, что актуально для Material 3. Значение 4 даёт стандартную тень Material Design. Для кастомного управления тенью используйте shadowColor — цвет тени, который визуально отделяет панель от контента.

Для управления цветом текста в AppBar используйте foregroundColor. Это свойство влияет на цвет заголовка, иконок и текста в actions. При смене backgroundColor автоматически подбирается контрастный foregroundColor, но его можно задать принудительно для нестандартных дизайнов.

SliverAppBar: анимированная версия AppBar

SliverAppBar — это расширение AppBar для использования внутри CustomScrollView, которое поддерживает анимацию при прокрутке: схлопывание (collapsing), параллакс-эффект и закрепление (pinned). В отличие от стандартного AppBar, SliverAppBar является silver-виджетом и может менять размер динамически в зависимости от позиции прокрутки.

Основные режимы SliverAppBar определяются комбинацией свойств pinned, floating и snap. В pinned-режиме панель всегда остаётся видимой в верхней части экрана. В floating-режиме она появляется при обратной прокрутке. Комбинация floating + snap создаёт поведение «липкой» панели, которая выезжает при малейшем скролле вверх, что часто используется в лентах новостей.

По данным Flutter API SliverAppBar (2026), для использования SliverAppBar необходимо заменить обычный ListView или Column на CustomScrollView с silver-виджетами. При этом Scaffold продолжает работать корректно, но свойство appBar Scaffold должно быть null — SliverAppBar размещается внутри CustomScrollView как первый sliver.

Пример настройки AppBar в приложении

Рассмотрим пример AppBar с поиском, выпадающим меню и TabBar. Этот код демонстрирует типовую конфигурацию верхней панели в production-приложении на Flutter.

Scaffold(
  appBar: AppBar(
    title: const Text('Catalog'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Settings')),
          const PopupMenuItem(value: 'about', child: Text('About App')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

В примере AppBar содержит центрированный заголовок, кнопку открытия Drawer слева, иконку поиска и выпадающее меню справа. TabBar в bottom позволяет переключаться между категориями товаров. Такая конфигурация покрывает большинство сценариев мобильных приложений: навигация, поиск, дополнительные опции и переключение разделов — всё в одной верхней панели.