AppBar — mi ez, beállítás és Flutter widgetek

Mi az AppBar a Flutterben

AppBar — egy szabványos Material felső panel komponens, amely a Scaffold felső részén jelenik meg. Tartalmazza a képernyő címét, a navigációs gombot (általában hamburger ikon vagy „Vissza” nyíl) és a műveleteket — ikonokat, amelyek megnyitják a keresést, beállításokat vagy más funkciókat. Az AppBar automatikusan alkalmazkodik a platformhoz: Androidon a szabványos Material bottom-shadow használatos, iOS-en — laposabb kialakítás átlátszósággal.

Az AppBar megvalósítja a PreferredSizeWidget interfészt, ami azt jelenti, hogy a magassága rögzített és ismert az építés előtt. Alapértelmezésben az AppBar magassága 56dp Androidon és 44dp iOS-en portré tájolásban, figyelembe véve a SafeArea-t felől. Ez a tulajdonság lehetővé teszi a Scaffold számára, hogy előre kiszámítsa a rendelkezésre álló helyet a body számára, elkerülve az újrakomponálást a renderelés során.

A Flutter Material Library Guide (2026) szerint az AppBar több iteráción ment keresztül: a Flutter 1.x-ben egyszerű konténer volt szöveggel, a Flutter 2.x-ben megkapta a Material 3 és flexibleSpace támogatást, a Flutter 3.x-ben pedig az integrációt a System UI-val (állapotsor színe, átlátszóság). A modern AppBar támogatja a Dynamic Color-t a Material You-ból Android 12+ eszközökön.

Az AppBar felépítése: tulajdonságok és paraméterek

AppBar egy sor paramétert kínál, amelyek a felső panel minden részét vezérlik. Ezen tulajdonságok megértése lehetővé teszi a panel rugalmas beállítását bármilyen dizájnkövetelményhez anélkül, hogy egyedi megoldásokat kellene létrehozni.

Title és leading: a cím és navigáció beállítása

A title tulajdonság bármilyen widgetet elfogad, de leggyakrabban a Text használatos a stílus TextStyle-en keresztül történő beállításával. Hosszú címek esetén ajánlott a title becsomagolása Flexible-be, hogy a szöveg megfelelően levágódjön helyhiány esetén. A leading tulajdonság automatikusan BackButton-ra cserélődik beágyazott képernyőre való áttéréskor a Navigator.push-on keresztül, ha nincs explicit módon beállítva.

Actions: műveleti ikonok elhelyezése

Az actions lista az AppBar jobb széléhez igazított widgeteket tartalmaz. Minden elem nem lehet szélesebb 48dp-nél (Material Design szabvány). A műveletek csoportosításához használja a PopupMenuButton-t — ez elrejti a kevésbé fontos opciókat egy legördülő menüben, és betartja a Material ajánlásokat a felület sűrűségére vonatkozóan.

Az AppBar testreszabása: stílusok, színek és viselkedés

AppBar támogatja a mély testreszabást a szín, árnyék és margó tulajdonságokon keresztül. Az alap megjelenés az alkalmazás témájából öröklődik, de minden tulajdonság egyedül felülírható. Tekintsük át a fő beállítási forgatókönyveket.

Az AppBar háttérszíne a backgroundColor-en keresztül állítható be. Ha nincs megadva, a ThemeData-ból származó appBarTheme használatos. A Material 3-ban az AppBar színe automatikusan a ColorScheme.primary-ból számítódik ki, de felülírható egy adott képernyőhöz. Átlátszó AppBar (gyakran használatos profilokban) esetén állítsa be a backgroundColor: Colors.transparent értéket elevation: 0 paraméterrel.

Az elevation tulajdonság vezérli az AppBar alatti árnyékot. A 0 érték eltávolítja az árnyékot, „lapos” panel hatást keltve, ami releváns a Material 3 számára. A 4 érték a szabványos Material Design árnyékot adja. Az árnyék egyedi vezérléséhez használja a shadowColor-t — az árnyék színét, amely vizuálisan elválasztja a panelt a tartalomtól.

Az AppBar szöveg színének vezérléséhez használja a foregroundColor-t. Ez a tulajdonság befolyásolja a cím, az ikonok és az actions szövegének színét. A backgroundColor megváltoztatásakor automatikusan kontrasztos foregroundColor kerül kiválasztásra, de nem szabványos dizájnok esetén kényszeríthető.

SliverAppBar: az AppBar animált változata

SliverAppBar — az AppBar kiterjesztése a CustomScrollView-on belüli használathoz, amely támogatja az animációt görgetéskor: összecsukás (collapsing), parallaxis hatás és rögzítés (pinned). A szabványos AppBar-tól eltérően a SliverAppBar egy sliver widget, és dinamikusan változtathatja a méretét a görgetés pozíciójától függően.

A SliverAppBar fő módjait a pinned, floating és snap tulajdonságok kombinációja határozza meg. Pinned módban a panel mindig látható marad a képernyő tetején. Floating módban visszagörgetéskor jelenik meg. A floating + snap kombináció „ragadós” panel viselkedést hoz létre, amely a legkisebb felfelé görgetésnél előbukkan, gyakran használatos hírfolyamokban.

A Flutter API SliverAppBar (2026) szerint a SliverAppBar használatához a szokásos ListView vagy Column helyére CustomScrollView-t kell használni sliver widgetekkel. A Scaffold továbbra is helyesen működik, de a Scaffold appBar tulajdonságának null-nak kell lennie — a SliverAppBar a CustomScrollView-on belülre kerül az első sliverként.

Példa az AppBar beállítására az alkalmazásban

Tekintsünk egy AppBar példát kereséssel, legördülő menücel és TabBar-ral. Ez a kód egy tipikus felső panel konfigurációt mutat be egy éles Flutter alkalmazásban.

Scaffold(
  appBar: AppBar(
    title: const Text('Katalógus'),
    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('Beállítások')),
          const PopupMenuItem(value: 'about', child: Text('Az alkalmazásról')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

A példában az AppBar egy középre igazított címet, bal oldalt egy Drawer nyitó gombot, jobb oldalt egy kereső ikont és egy legördülő menüt tartalmaz. A TabBar a bottom-ban lehetővé teszi a termékkategóriák közötti váltogatást. Ez a konfiguráció a mobilalkalmazások legtöbb forgatókönyvét lefedi: navigáció, keresés, további opciók és szekciók váltása — minden egy felső panelben.