Man sieht sie immer wieder und immer wieder taucht sie auf. Mal mehr, mal weniger gewollt:
Die Snackbar in Flutter
Snackbars werden meist verwendet, um kürzlich getätigte Aktionen zu bestätigen, bevorstehende Aktionen anzukündigen oder auf Fehler aufmerksam zu machen. Sie erscheinen temporär und dezent im unteren Bereich des Bildschirms. Am besten so, dass sie die User Experience nicht beeinträchtigen. Wie erstellt man nun eine Snackbar?
Einfaches Erstellen einer Snackbar:
Im ersten Sourcecode seht ihr die Implementierung einer einfachen Snackbar in Flutter. Die Snackbar erscheint nach dem Drücken des Buttons.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Builder(
builder: (BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
child: Text('Snackbar zeigen'),
onPressed: () {
final snackBar = SnackBar(
content: Text('Eine Beispiel Snackbar'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
)
],
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
Snackbar mit Actionbutton
Nun kann man einer Snackbar natürlich auch einen Button hinzufügen. Diesen gibt es bei Flutter schon als Widget und ist per Default auf der rechten Seite zu finden. Dieser Action-Button hat ein Label und kann beim Betätigen beliebig viele Methoden aufrufen, wie zum Beispiel das Zeigen einer neuen Snackbar.
final snackBar = SnackBar(
content: Text('Eine Beispiel Snackbar'),
action: SnackBarAction(
label: 'Rückgängig',
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Rückgängig gemacht'),
));
},
),
);
Styling der Snackbar
Abgerundete Ecken
Wenn man schon einmal eine Snackbar hat, sollte man diese stylen. Wie wäre es denn mal mit einer Snackbar mit abgerundeten Ecken? Kein Problem.
Man kann dem Snackbar Widget ganz einfach einen Shape Parameter geben. In diesem Fall RoundetRectangleBorder. Dieser rundet die Ecken nach Belieben ab.
Aber Achtung: Dies funktioniert erst ab Flutter Version 1.6.3.
final snackBar = SnackBar(
content: Text('Eine Beispiel Snackbar'),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
),
),
action: SnackBarAction(
label: 'Rückgängig',
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Rückgängig gemacht'),
));
},
),
);
Floating Snackbar
Abgerundete Ecken reichen nicht? Das Ding muss schweben? Dann gib ihm ein behavior Parameter und lass es schweben! (Aber denk daran, dass es für die Optik Sinn macht, wenn jetzt alle Ecken abgerundet sind 😉)
final snackBar = SnackBar(
content: Text('Eine Beispiel Snackbar'),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
),
action: SnackBarAction(
label: 'Rückgängig',
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Rückgängig gemacht'),
));
},
),
);
Farbe der Snackbar ändern
Damit die Snackbar auch in das Corporate Design passt, sollte man sie auch farblich gestalten. Um die backgroundColor zu setzten, gibt es verschiedene Möglichkeiten:
Feste Colors Objekte -> backgroundColor: Colors.purple
Feste Colors Objekte verblasst -> backgroundColor: Colors.purple[200]
Beliebige RGB-Werte -> backgroundColor: Color.fromRGBO (int, int, int, double) (O steht hier für Opacity)
final snackBar = SnackBar(
content: Text('Eine Beispiel Snackbar'),
backgroundColor: Colors.purple,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
),
action: SnackBarAction(
label: 'Rückgängig',
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Rückgängig gemacht'),
));
},
),
);
Schatten der Snackbar
Schweben: cool, Schatten: uncool?
Über den Parameter elevation lässt sich einstellen, wie hoch die Snackbar hervorgehoben werden soll.
final snackBar = SnackBar(
content: Text('Eine Beispiel Snackbar'),
elevation: 0.0,
backgroundColor: Colors.purple,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
),
action: SnackBarAction(
label: 'Rückgängig',
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Rückgängig gemacht'),
));
},
),
);
Anzeigelänge der Snackbar
Deine Snackbar zeigt was sie soll und sieht auch noch gut aus. Sie wird aber viel zu kurz/ zu lang angezeigt? Per Default wird die Snackbar automatisch nach 4 Sekunden ausgeblendet. Sie lässt sich aber mit einem Duration Parameter von Tagen bis hin zur Mikrosekunde genau einstellen.
final snackBar = SnackBar(
content: Text('Eine Beispiel Snackbar'),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
backgroundColor: Colors.purple,
duration: Duration(seconds: 6, milliseconds: 3, microseconds: 1),
action: SnackBarAction(
label: 'Rückgängig',
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text('Rückgängig gemacht'),
))
},
)
);
Jetzt habt ihr eine tolle Snackbar in Flutter selbst gestaltet!