Flutter: SnackBar und SnackBarAction verwenden

SnackBar ist ein visuelles Element, das dem Nutzer eine kurze Rückmeldung zu seiner Aktion gibt. Es erscheint am unteren Bildschirmrand und verschwindet nach einer bestimmten Zeit automatisch. SnackBarAction fügt der SnackBar einen anklickbaren Button hinzu.

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

Zum Anzeigen einer SnackBar wird ScaffoldMessenger verwendet:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Your message here'),
  ),
);

SnackBarAction verwenden

Fügt einen Button hinzu, mit dem der Nutzer interagieren kann:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Item deleted'),
    action: SnackBarAction(
      label: 'UNDO',
      onPressed: () {
        // Undo operation
      },
    ),
  ),
);

Wichtige Eigenschaften

Eigenschaft	Beschreibung
content	Inhalt der SnackBar (meist Text)
action	Anklickbarer Button (SnackBarAction)
duration	Anzeigedauer
backgroundColor	Hintergrundfarbe
behavior	fixed oder floating
shape	Form (z. B. Eckenradius)
margin	Abstände im Floating-Modus

Floating SnackBar

Eine schwebende Darstellung leicht oberhalb des unteren Bildschirmrands:

SnackBar(
  content: Text('Floating SnackBar'),
  behavior: SnackBarBehavior.floating,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  margin: EdgeInsets.all(16),
)

SnackBar mit Symbol

SnackBar(
  content: Row(
    children: [
      Icon(Icons.info, color: Colors.white),
      SizedBox(width: 10),
      Text('Information message'),
    ],
  ),
  backgroundColor: Colors.blue,
)

SnackBar programmatisch schließen

final snackBar = ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Loading...')),
);

// Close when operation completes
await someAsyncOperation();
snackBar.close();

Zusammenfassung

• SnackBar: Gibt dem Nutzer eine kurze Rückmeldung
• SnackBarAction: Anklickbarer Button auf der SnackBar
• ScaffoldMessenger: Dient zum Anzeigen der SnackBar
• behavior: floating für ein modernes Erscheinungsbild
• duration: Steuert die Anzeigedauer

SnackBar ist ein unverzichtbares Werkzeug, um die Nutzererfahrung zu verbessern.