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 е sliver уиджет и може динамично да променя размера си в зависимост от позицията на скролване.

Основните режими на SliverAppBar се определят от комбинацията на свойствата pinned, floating и snap. В режим pinned панелът винаги остава видим в горната част на екрана. В режим floating се появява при скролване назад. Комбинацията floating + snap създава поведение на „лепкав" панел, който излиза при най-малкото скролване нагоре, често използван в новинарски потоци.

Според Flutter API SliverAppBar (2026), за използване на SliverAppBar е необходимо да замените обикновения ListView или Column с CustomScrollView с sliver уиджети. Scaffold продължава да работи правилно, но свойството appBar на Scaffold трябва да бъде null — SliverAppBar се поставя вътре в CustomScrollView като първи sliver.

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

Нека разгледаме пример на AppBar с търсене, падащо меню и TabBar. Този код демонстрира типична конфигурация на горния панел в продукционно Flutter приложение.

Scaffold(
  appBar: AppBar(
    title: const Text('Каталог'),
    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('Настройки')),
          const PopupMenuItem(value: 'about', child: Text('Относно приложението')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

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