AppBar — vad är det, konfiguration och Flutter-widgets

Vad är AppBar i Flutter

AppBar — är en standard Material-komponent för den övre panelen som visas högst upp i Scaffold. Den innehåller skärmens titel, navigeringsknapp (vanligtvis en hamburgerikon eller "Tillbaka"-pil) och åtgärder — ikoner som öppnar sökning, inställningar eller andra funktioner. AppBar anpassar sig automatiskt till plattformen: på Android används standard Material bottom-shadow, på iOS — en plattare design med genomskinlighet.

AppBar implementerar gränssnittet PreferredSizeWidget, vilket innebär att dess höjd är fast och känd innan bygget. Som standard är höjden på AppBar 56dp på Android och 44dp på iOS i porträttorientering, med hänsyn till SafeArea ovanför. Denna funktion gör att Scaffold kan beräkna tillgängligt utrymme för body i förväg och undvika omkomposition under rendering.

Enligt Flutter Material Library Guide (2026) har AppBar genomgått flera iterationer: i Flutter 1.x var det en enkel behållare med text, i Flutter 2.x fick det stöd för Material 3 och flexibleSpace, och i Flutter 3.x — integration med System UI (statusfältsfärg, genomskinlighet). Modern AppBar stöder Dynamic Color från Material You på Android 12+-enheter.

Struktur för AppBar: egenskaper och parametrar

AppBar erbjuder en uppsättning parametrar som styr varje del av den övre panelen. Att förstå dessa egenskaper möjliggör flexibel konfiguration av panelen för alla designkrav utan att skapa anpassade lösningar.

Title och leading: konfiguration av titel och navigering

Egenskapen title accepterar vilken widget som helst, men oftast används Text med stilkonfiguration via TextStyle. För långa titlar rekommenderas att linda title i Flexible så att texten kapas korrekt vid brist på utrymme. Egenskapen leading ersätts automatiskt med BackButton vid övergång till en nästlad skärm via Navigator.push, om den inte är explicit inställd.

Actions: placering av åtgärdsikoner

Listan actions innehåller widgets som är högerjusterade i AppBar. Varje element bör inte vara bredare än 48dp (Material Design-standard). För att gruppera åtgärder, använd PopupMenuButton — detta döljer mindre viktiga alternativ i en rullgardinsmeny och följer Materials rekommendationer om gränssnittets densitet.

Anpassning av AppBar: stilar, färger och beteende

AppBar stöder djup anpassning genom egenskaper för färg, skugga och marginaler. Det grundläggande utseendet ärvs från appens tema, men varje egenskap kan åsidosättas individuellt. Låt oss titta på de viktigaste konfigurationsscenarierna.

Bakgrundsfärgen på AppBar ställs in via backgroundColor. Om den inte anges används appBarTheme från ThemeData. I Material 3 beräknas AppBar-färgen automatiskt från ColorScheme.primary, men kan åsidosättas för en specifik skärm. För en genomskinlig AppBar (ofta använd i profiler), ställ in backgroundColor: Colors.transparent med elevation: 0.

Egenskapen elevation styr skuggan under AppBar. Värdet 0 tar bort skuggan och skapar en "platt" paneleffekt, vilket är relevant för Material 3. Värdet 4 ger en standard Material Design-skugga. För anpassad skugghantering, använd shadowColor — skuggfärgen som visuellt separerar panelen från innehållet.

För att styra textfärgen i AppBar, använd foregroundColor. Denna egenskap påverkar färgen på titeln, ikonerna och texten i actions. När backgroundColor ändras väljs automatiskt en kontrasterande foregroundColor, men den kan forceras för icke-standardiserade designer.

SliverAppBar: animerad version av AppBar

SliverAppBar — är en utökning av AppBar för användning i CustomScrollView som stöder animation vid scrollning: hopfällning (collapsing), parallaxeffekt och fastsättning (pinned). Till skillnad från standard AppBar är SliverAppBar en sliver-widget och kan dynamiskt ändra storlek beroende på scrollpositionen.

Huvudlägena för SliverAppBar bestäms av kombinationen av egenskaperna pinned, floating och snap. I pinned-läget förblir panelen alltid synlig högst upp på skärmen. I floating-läget visas den vid scrollning bakåt. Kombinationen floating + snap skapar ett "klibbigt" panelbeteende som visas vid minsta scrollning uppåt, ofta använd i nyhetsflöden.

Enligt Flutter API SliverAppBar (2026) måste du för att använda SliverAppBar ersätta den vanliga ListView eller Column med CustomScrollView med sliver-widgets. Scaffold fortsätter att fungera korrekt, men egenskapen appBar i Scaffold måste vara null — SliverAppBar placeras i CustomScrollView som första sliver.

Exempel på konfiguration av AppBar i appen

Låt oss titta på ett exempel på AppBar med sökning, rullgardinsmeny och TabBar. Denna kod visar en typisk konfiguration av den övre panelen i en produktions-Flutter-app.

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('Inställningar')),
          const PopupMenuItem(value: 'about', child: Text('Om appen')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

I exemplet innehåller AppBar en centrerad titel, en knapp för att öppna Drawer till vänster, en sökikon och en rullgardinsmeny till höger. TabBar i bottom möjliggör växling mellan produktkategorier. Denna konfiguration täcker de flesta scenarier för mobila appar: navigering, sökning, ytterligare alternativ och växling mellan sektioner — allt i en övre panel.