Flutter: AppBar-Widget und Anpassung

AppBar ist ein Widget am oberen Rand der Seite, das standardmäßig in jedem Scaffold enthalten ist. Es kann einen Titel, Navigationsbuttons und Aktionsbuttons enthalten.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

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

Grundlegende Verwendung

Scaffold(
  appBar: AppBar(
    title: Text('Page Title'),
  ),
  body: Center(child: Text('Content')),
)

Wichtige Eigenschaften

Eigenschaft	Beschreibung
title	Titel-Widget
leading	Widget auf der linken Seite (meist der Zurück-Button)
actions	Liste der Buttons auf der rechten Seite
backgroundColor	Hintergrundfarbe
foregroundColor	Farbe von Symbolen und Text
elevation	Stärke des Schattens
centerTitle	Titel zentrieren
automaticallyImplyLeading	Automatischer Zurück-Button

Actions verwenden

AppBar(
  title: Text('Title'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {},
    ),
  ],
)

Leading anpassen

AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // Open drawer
    },
  ),
  title: Text('Title'),
)

Suchleiste integrieren

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

AppBar mit Farbverlauf

AppBar(
  title: Text('Gradient'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.purple, Colors.blue],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
)

SliverAppBar

AppBar, die beim Scrollen schrumpft und sich wieder ausdehnt:

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

Zusammenfassung

• AppBar: Leiste am oberen Seitenrand
• title: Titel-Widget
• leading: Linke Seite (Zurück-Button, Menü)
• actions: Buttons auf der rechten Seite
• SliverAppBar: Scrollbare AppBar

Die AppBar ist eine grundlegende Komponente für die Navigation in Ihrer App.