Flutter: Drawer-Widget und Seitenmenü

Drawer ist ein Seitenmenü, mit dem mehrere Seiten auf demselben Bildschirm erreichbar werden. Es öffnet und schließt sich reaktionsschnell per Fingergeste und lässt sich auch mit dem Zurück-Button schließen.

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('Drawer Example')),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text('Menu Title'),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Home'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
  body: Center(child: Text('Content')),
)

DrawerHeader

Der Kopfbereich am oberen Rand des Drawers:

DrawerHeader(
  decoration: BoxDecoration(
    color: Colors.blue,
    image: DecorationImage(
      image: NetworkImage('https://example.com/bg.jpg'),
      fit: BoxFit.cover,
    ),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      CircleAvatar(
        radius: 30,
        backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
      ),
      SizedBox(height: 10),
      Text('Username', style: TextStyle(color: Colors.white)),
      Text('[email protected]', style: TextStyle(color: Colors.white70)),
    ],
  ),
)

UserAccountsDrawerHeader

Fertiges Widget für Benutzerinformationen:

UserAccountsDrawerHeader(
  accountName: Text('Ahmet Balaman'),
  accountEmail: Text('[email protected]'),
  currentAccountPicture: CircleAvatar(
    backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
  ),
  decoration: BoxDecoration(color: Colors.blue),
  otherAccountsPictures: [
    CircleAvatar(child: Text('AB')),
  ],
)

Programmatisch öffnen und schließen

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

Scaffold(
  key: _scaffoldKey,
  drawer: Drawer(...),
  body: ElevatedButton(
    onPressed: () {
      _scaffoldKey.currentState?.openDrawer();
    },
    child: Text('Open Drawer'),
  ),
)

// To close
Navigator.pop(context);
// or
_scaffoldKey.currentState?.closeDrawer();

EndDrawer (rechte Seite)

Scaffold(
  endDrawer: Drawer(
    child: ListView(...),
  ),
  appBar: AppBar(
    actions: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {
          _scaffoldKey.currentState?.openEndDrawer();
        },
      ),
    ],
  ),
)

Wichtige Eigenschaften

Eigenschaft	Beschreibung
drawer	Drawer auf der linken Seite
endDrawer	Drawer auf der rechten Seite
drawerScrimColor	Farbe der Hintergrundabdunklung
drawerEdgeDragWidth	Empfindlichkeit der Wischgeste
drawerEnableOpenDragGesture	Öffnen per Wischgeste aktivieren/deaktivieren

Breite des Drawers

Drawer(
  width: 250, // Custom width
  child: ...
)

Zusammenfassung

• Drawer: Seitenmenü links
• EndDrawer: Seitenmenü rechts
• DrawerHeader: Kopfbereich oben
• UserAccountsDrawerHeader: Für Benutzerinformationen
• Navigator.pop(): Schließt den Drawer

Drawer eignet sich ideal, um in Ihrer App umfangreiche Navigationsmöglichkeiten anzubieten.