AppBar — що це таке, налаштування та віджети Flutter

Що таке AppBar в Flutter

AppBar — це стандартний компонент Material верхньої панелі, що відображається в верхньому частині Scaffold. Він містить заголовок екрану, кнопку навігації (звичайно іконка «гамбургер» або стрілка «Назад») та дії — іконки, що відкривають пошук, налаштування або інші функції. AppBar автоматично адаптується до платформи: на Android використовується стандартна Material тінь знизу, на 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, що підтримує анімацію при прокруці: згортання, паралакс-ефект та закріплення. На відміну від стандартного 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 внизу дозволяє перемикатися між категоріями товарів. Така конфігурація охоплює більшість сценаріїв мобільних додатків: навігація, пошук, додаткові опції та перемикання розділів — все в одній верхньому панелі.