Flutter: SliverAppBar für Kategorie-Header und Suchfelder

SliverAppBar ist nicht nur für große Hero-Bilder gedacht. Es ist auch eine starke Lösung für Kategorie-Header und Suchfelder – besonders in listenlastigen Screens, in denen Nutzer den oberen Bereich ständig erreichen müssen.

Live-Demo

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

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Warum Kategorie-Header funktionieren

In langen Listen müssen Nutzer erkennen, welche Inhaltsgruppe sie gerade durchsehen. Ein Header, eine Suchleiste und ein Filterbereich erleichtern die Navigation erheblich.

Dieser Artikel passt zu Suchanfragen wie „flutter sliverappbar search“, „Kategorie-Header Flutter“ und „fixierte Suchleiste“.

Grundstruktur

CustomScrollView(
  slivers: [
    SliverAppBar(
      pinned: true,
      title: const Text('Categories'),
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(48),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            decoration: InputDecoration(
              hintText: 'Search categories...',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
        ),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text('Category $index')),
        childCount: 40,
      ),
    ),
  ],
)

pinned und bottom verwenden

pinned hält den Header sichtbar. bottom eignet sich perfekt, um Suchfelder, Tabs oder eine kompakte Filterleiste unterzubringen.

Kombination mit Kategoriefiltern

Im Bereich bottom können Sie horizontal scrollende Kategorie-Chips platzieren.

SliverAppBar(
  pinned: true,
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(56),
    child: SizedBox(
      height: 56,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: const [
          Chip(label: Text('All')),
          Chip(label: Text('Design')),
          Chip(label: Text('Flutter')),
        ],
      ),
    ),
  ),
)

Design-Tipps

• Halten Sie den Suchbereich kompakt.
• Nutzen Sie horizontales Scrollen für Chips.
• Halten Sie den Titel kurz.
• Testen Sie den Scrollverlauf innerhalb der CustomScrollView.

Häufig gestellte Fragen

Ist es in Ordnung, ein TextField in der SliverAppBar zu verwenden?

Ja, insbesondere bei suchorientierten Screens.

Wofür eignet sich der Bereich bottom?

Für Suchfelder, Tabs, Filterleisten oder Kategorie-Chips.

Funktioniert das auf Mobilgeräten gut?

Ja, solange Sie eine passende Höhe und sinnvolle Abstände wählen.

Zusammenfassung

SliverAppBar ist eine flexible Möglichkeit, Kategorie-Header und Suchfelder zu verbinden. In Listen-Screens verbessert es Navigation, Kontext und die gesamte Nutzererfahrung.