Flutter: SliverAppBar für fixierte Header und Suchleisten

SliverAppBar ist eine der wirkungsvollsten Erweiterungen gegenüber einer gewöhnlichen AppBar. Es eignet sich ideal für Header, die beim Scrollen einklappen, oben fixiert bleiben oder eine Suchleiste enthalten.

Live-Demo

Sie können die AppBar-Struktur im interaktiven Beispiel unten ausprobieren:

💡 Falls sich das Beispiel nicht öffnet, klicken Sie auf den Link DartPad, um es in einem neuen Tab auszuführen.

Warum SliverAppBar verwenden?

Wenn Nutzer durch Inhalte scrollen, verbessert ein weiterhin erreichbarer Header den Navigationsfluss. SliverAppBar gibt Ihnen deutlich mehr Spielraum für Suchleisten, Kategorieauswahl und bildstarke Kopfbereiche.

Dieses Thema trifft eine starke Suchintention rund um Begriffe wie „flutter sliverappbar“, „sticky header flutter“ und „flutter appbar Suchleiste“.

Grundlegende Verwendung

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: const Text('Explore'),
      pinned: true,
      floating: false,
      expandedHeight: 220,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.network(
          'https://example.com/banner.jpg',
          fit: BoxFit.cover,
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Item $index')),
        childCount: 30,
      ),
    ),
  ],
)

Was pinned, floating und snap bewirken

• pinned: Hält den Header oben fixiert.
• floating: Lässt den Header beim Zurückscrollen schnell wieder erscheinen.
• snap: Erzeugt zusammen mit floating einen schnelleren Auf- und Zuklapp-Effekt.

Diese Kombination funktioniert besonders gut in Nachrichten-, Blog- und Katalog-Apps.

Einsatz als Suchleiste

Sie können ein Suchfeld direkt in die SliverAppBar einbetten.

SliverAppBar(
  pinned: true,
  title: TextField(
    decoration: InputDecoration(
      hintText: 'Search...',
      border: InputBorder.none,
      prefixIcon: Icon(Icons.search),
    ),
  ),
)

Den Header mit flexibleSpace aufwerten

Mit flexibleSpace machen Sie den Header visueller – etwa durch Farbverläufe, Bilder oder Weichzeichner-Effekte.

SliverAppBar(
  expandedHeight: 240,
  pinned: true,
  flexibleSpace: Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.indigo, Colors.blue],
      ),
    ),
    child: const FlexibleSpaceBar(
      title: Text('Featured'),
    ),
  ),
)

Wann eine normale AppBar genügt

Wenn Sie auf einem kleinen, statischen Screen nur eine einfache obere Leiste brauchen, reicht eine gewöhnliche AppBar. Sobald sich der Header beim Scrollen anpassen soll, wirkt SliverAppBar deutlich ausgereifter.

Häufige Fehler

• SliverAppBar verwenden, ohne die umgebende CustomScrollView korrekt aufzubauen
• Eine zu große expandedHeight wählen
• Beim Einbauen des Suchfelds die Lesbarkeit opfern
• Den Header mit unnötigen Effekten überladen

Häufig gestellte Fragen

Was ist der Unterschied zwischen AppBar und SliverAppBar?

AppBar ist statisch, während sich SliverAppBar beim Scrollen aus- und einklappen kann.

Eignet sich SliverAppBar für Suchleisten?

Ja. Besonders nützlich ist es in Katalog-, Blog- und Inhaltslisten-Screens.

Brauche ich immer pinned?

Nein, aber in den meisten modernen Oberflächen bietet ein fixierter Header die bessere Erfahrung.

Zusammenfassung

SliverAppBar ist einer der besten Wege, in Flutter fixierte Header, Suchleisten und visuell reiche Kopfbereiche zu bauen. Richtig eingesetzt verbessert es sowohl die UX-Qualität als auch den SEO-Wert des Artikels.