AppBar — was es ist, Konfiguration und Flutter-Widgets

Was ist AppBar in Flutter

AppBar ist eine standardmäßige Material-Komponente für die obere Leiste, die oben in einem Scaffold angezeigt wird. Sie enthält den Bildschirmtitel, eine Navigationsschaltfläche (normalerweise ein „Hamburger“-Symbol oder ein „Zurück“-Pfeil) und Aktionen — Symbole, die Suche, Einstellungen oder andere Funktionen öffnen. AppBar passt sich automatisch an die Plattform an: Unter Android wird der standardmäßige Material-Unterschatten verwendet, unter iOS — ein flacheres Design mit Transparenz.

AppBar implementiert das PreferredSizeWidget-Interface, was bedeutet, dass seine Höhe festgelegt und vor dem Aufbau bekannt ist. Standardmäßig beträgt die AppBar-Höhe 56dp unter Android und 44dp unter iOS im Hochformat, unter Berücksichtigung von SafeArea oben. Diese Funktion ermöglicht es Scaffold, den verfügbaren Platz für den Body im Voraus zu berechnen und eine Neuzusammensetzung während des Renderns zu vermeiden.

Laut Flutter Material Library Guide (2026) hat AppBar mehrere Iterationen durchlaufen: In Flutter 1.x war es ein einfacher Container mit Text, in Flutter 2.x erhielt es Unterstützung für Material 3 und flexibleSpace, und in Flutter 3.x — Integration mit System UI (Statusleistenfarbe, Transparenz). Die moderne AppBar unterstützt Dynamic Color von Material You auf Android 12+ Geräten.

AppBar-Struktur: Eigenschaften und Parameter

AppBar bietet eine Reihe von Parametern, die jeden Teil der oberen Leiste steuern. Das Verständnis dieser Eigenschaften ermöglicht eine flexible Anpassung des Panels an beliebige Designanforderungen, ohne benutzerdefinierte Lösungen erstellen zu müssen.

Title und leading: Konfiguration von Titel und Navigation

Die Eigenschaft title akzeptiert jedes Widget, am häufigsten wird jedoch Text mit Stilkonfiguration über TextStyle verwendet. Bei langen Titeln wird empfohlen, title in Flexible zu packen, damit der Text bei Platzmangel korrekt abgeschnitten wird. Die Eigenschaft leading wird beim Navigieren zu einem verschachtelten Bildschirm über Navigator.push automatisch durch BackButton ersetzt, wenn sie nicht explizit gesetzt ist.

Actions: Platzierung von Aktionssymbolen

Die Liste actions enthält Widgets, die am rechten Rand der AppBar ausgerichtet sind. Jedes Element sollte nicht breiter als 48dp sein (Material Design-Standard). Zum Gruppieren von Aktionen verwenden Sie PopupMenuButton — dies verbirgt weniger wichtige Optionen in einem Dropdown-Menü und hält die Material-Empfehlungen zur Schnittstellendichte ein.

AppBar-Anpassung: Stile, Farben und Verhalten

AppBar unterstützt eine tiefgehende Anpassung über Farb-, Schatten- und Abstandseigenschaften. Das grundlegende Styling wird aus dem App-Design geerbt, aber jede Eigenschaft kann einzeln überschrieben werden. Sehen wir uns die wichtigsten Konfigurationsszenarien an.

Die Hintergrundfarbe von AppBar wird über backgroundColor festgelegt. Wenn nicht angegeben, wird appBarTheme aus ThemeData verwendet. In Material 3 wird die AppBar-Farbe automatisch aus ColorScheme.primary berechnet, kann aber für einen bestimmten Bildschirm überschrieben werden. Für eine transparente AppBar (häufig in Profilen verwendet) setzen Sie backgroundColor: Colors.transparent mit elevation: 0.

Die Eigenschaft elevation steuert den Schatten unter der AppBar. Der Wert 0 entfernt den Schatten und erzeugt einen „flachen“ Paneeleffekt, der für Material 3 relevant ist. Der Wert 4 ergibt den Standard-Material Design-Schatten. Für eine benutzerdefinierte Schattensteuerung verwenden Sie shadowColor — die Schattenfarbe, die das Panel visuell vom Inhalt trennt.

Um die Textfarbe in der AppBar zu steuern, verwenden Sie foregroundColor. Diese Eigenschaft beeinflusst die Farbe des Titels, der Symbole und des Textes in actions. Beim Ändern von backgroundColor wird automatisch eine kontrastierende foregroundColor ausgewählt, die jedoch für nicht standardmäßige Designs erzwungen werden kann.

SliverAppBar: animierte Version von AppBar

SliverAppBar ist eine Erweiterung von AppBar zur Verwendung innerhalb von CustomScrollView, die Scroll-Animationen unterstützt: Einklappen, Parallax-Effekt und Fixieren. Im Gegensatz zu einer standardmäßigen AppBar ist SliverAppBar ein Sliver-Widget und kann seine Größe dynamisch in Abhängigkeit von der Scrollposition ändern.

Die Hauptmodi von SliverAppBar werden durch eine Kombination der Eigenschaften pinned, floating und snap bestimmt. Im pinned-Modus bleibt das Panel immer am oberen Bildschirmrand sichtbar. Im floating-Modus erscheint es beim Zurückscrollen. Die Kombination floating + snap erzeugt ein „klebendes“ Panel-Verhalten, das bei der geringsten Aufwärtsbewegung erscheint und häufig in Nachrichtenfeeds verwendet wird.

Laut Flutter API SliverAppBar (2026) muss für die Verwendung von SliverAppBar eine normale ListView oder Column durch CustomScrollView mit Sliver-Widgets ersetzt werden. Scaffold funktioniert weiterhin korrekt, aber die appBar-Eigenschaft von Scaffold muss null sein — SliverAppBar wird innerhalb von CustomScrollView als erster Sliver platziert.

Beispiel für die AppBar-Konfiguration in einer Anwendung

Sehen wir uns ein AppBar-Beispiel mit Suche, Dropdown-Menü und TabBar an. Dieser Code zeigt eine typische Konfiguration der oberen Leiste in einer Produktionsanwendung mit Flutter.

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('Einstellungen')),
          const PopupMenuItem(value: 'about', child: Text('Über die App')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

Im Beispiel enthält AppBar einen zentrierten Titel, einen Drawer-Öffnen-Button links, ein Suchsymbol und ein Dropdown-Menü rechts. TabBar unten ermöglicht das Umschalten zwischen Produktkategorien. Diese Konfiguration deckt die meisten mobilen Anwendungsszenarien ab: Navigation, Suche, zusätzliche Optionen und Bereichsumschaltung — alles in einer oberen Leiste.