AppBar — co to je, nastavení a widgety Flutter

Co je AppBar ve Flutter

AppBar — je standardní Material komponenta horního panelu, která se zobrazuje v horní části Scaffold. Obsahuje nadpis obrazovky, navigační tlačítko (obvykle ikona hamburgeru nebo šipka „Zpět“) a akce — ikony otevírající vyhledávání, nastavení nebo jiné funkce. AppBar se automaticky přizpůsobuje platformě: na Androidu se používá standardní Material bottom-shadow, na iOS — plošší design s průhledností.

AppBar implementuje rozhraní PreferredSizeWidget, což znamená, že jeho výška je pevná a známá před sestavením. Ve výchozím nastavení je výška AppBar 56dp na Androidu a 44dp na iOS v na výšku, s ohledem na SafeArea nahoře. Tato vlastnost umožňuje Scaffold předem vypočítat dostupný prostor pro body, čímž se zabrání překomponování během vykreslování.

Podle Flutter Material Library Guide (2026) prošel AppBar několika iteracemi: ve Flutter 1.x to byl jednoduchý kontejner s textem, ve Flutter 2.x získal podporu Material 3 a flexibleSpace a ve Flutter 3.x — integraci se System UI (barva stavového řádku, průhlednost). Moderní AppBar podporuje Dynamic Color z Material You na zařízeních s Android 12+.

Struktura AppBar: vlastnosti a parametry

AppBar poskytuje sadu parametrů, které řídí každou část horního panelu. Pochopení těchto vlastností umožňuje flexibilní nastavení panelu pro jakékoli požadavky na design bez vytváření vlastních řešení.

Title a leading: nastavení nadpisu a navigace

Vlastnost title přijímá libovolný widget, ale nejčastěji se používá Text s nastavením stylu pomocí TextStyle. U dlouhých nadpisů se doporučuje zabalit title do Flexible, aby se text správně ořezal při nedostatku místa. Vlastnost leading se automaticky nahrazuje BackButton při přechodu na vnořenou obrazovku pomocí Navigator.push, pokud není nastavena explicitně.

Actions: umístění ikon akcí

Seznam actions obsahuje widgety zarovnané k pravému okraji AppBar. Každý prvek by neměl být širší než 48dp (standard Material Design). Pro seskupení akcí použijte PopupMenuButton — to skryje méně důležité možnosti v rozbalovací nabídce a dodržuje doporučení Material ohledně hustoty rozhraní.

Přizpůsobení AppBar: styly, barvy a chování

AppBar podporuje hluboké přizpůsobení pomocí vlastností barvy, stínu a okrajů. Základní vzhled se dědí z motivu aplikace, ale každou vlastnost lze přepsat jednotlivě. Podívejme se na hlavní scénáře nastavení.

Barva pozadí AppBar se nastavuje pomocí backgroundColor. Pokud není zadána, použije se appBarTheme z ThemeData. V Material 3 se barva AppBar automaticky vypočítává z ColorScheme.primary, ale lze ji přepsat pro konkrétní obrazovku. Pro průhledný AppBar (často používaný v profilech) nastavte backgroundColor: Colors.transparent s elevation: 0.

Vlastnost elevation řídí stín pod AppBar. Hodnota 0 odstraní stín a vytvoří efekt „plochého“ panelu, což je relevantní pro Material 3. Hodnota 4 dává standardní stín Material Design. Pro vlastní správu stínu použijte shadowColor — barvu stínu, která vizuálně odděluje panel od obsahu.

Pro řízení barvy textu v AppBar použijte foregroundColor. Tato vlastnost ovlivňuje barvu nadpisu, ikon a textu v actions. Při změně backgroundColor se automaticky vybere kontrastní foregroundColor, ale lze jej vynutit pro nestandardní designy.

SliverAppBar: animovaná verze AppBar

SliverAppBar — je rozšíření AppBar pro použití uvnitř CustomScrollView, které podporuje animaci při posouvání: sbalování (collapsing), paralaxní efekt a připnutí (pinned). Na rozdíl od standardního AppBar je SliverAppBar widget sliver a může dynamicky měnit velikost v závislosti na pozici posouvání.

Hlavní režimy SliverAppBar jsou určeny kombinací vlastností pinned, floating a snap. V režimu pinned zůstává panel vždy viditelný v horní části obrazovky. V režimu floating se objeví při posouvání zpět. Kombinace floating + snap vytváří chování „lepivého“ panelu, který se objeví při sebemenším posunutí nahoru, často používaného v informačních kanálech.

Podle Flutter API SliverAppBar (2026) je pro použití SliverAppBar nutné nahradit běžný ListView nebo Column CustomScrollView s widgety sliver. Scaffold nadále funguje správně, ale vlastnost appBar Scaffold musí být null — SliverAppBar je umístěn uvnitř CustomScrollView jako první sliver.

Příklad nastavení AppBar v aplikaci

Podívejme se na příklad AppBar s vyhledáváním, rozbalovací nabídkou a TabBar. Tento kód demonstruje typickou konfiguraci horního panelu v produkční Flutter aplikaci.

Scaffold(
  appBar: AppBar(
    title: const Text('Katalog'),
    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('Nastavení')),
          const PopupMenuItem(value: 'about', child: Text('O aplikaci')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

V příkladu AppBar obsahuje centrový nadpis, tlačítko pro otevření Drawer vlevo, ikonu vyhledávání a rozbalovací nabídku vpravo. TabBar v bottom umožňuje přepínání mezi kategoriemi produktů. Tato konfigurace pokrývá většinu scénářů mobilních aplikací: navigace, vyhledávání, další možnosti a přepínání mezi sekcemi — vše v jednom horním panelu.