Toasts are messages that usually slide in from the top or bottom of the page. Since they slide or 'pop' in, they are nick-named toast - you know like toast popping out of your toaster. Pretty descriptive and sensible right?
So, how do you do toast messages in Flutter? You use a component named Snackbar. The name Snackbar comes form Google's Material Design. But just think of Snackbar=Toast and you will be fine...
A Simple Example of a Toast... ummmm... SnackBar
In this example we will create the simplest SnackBar. When a user submits the form a Snackbar appears confirming their action was successful.
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
void _submit() {
SnackBar snackBar = new SnackBar(
content: new Text("Changes saved at " + new DateTime.now().toString()));
_scaffoldKey.currentState.showSnackBar(snackBar);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(
title: new Text('My Form'),
backgroundColor: Colors.deepOrangeAccent,
),
body: new Padding(
padding: const EdgeInsets.all(16.0),
child: new Form(
autovalidate: true,
child: new Column(
children: [
new TextFormField(
decoration: new InputDecoration(labelText: 'Enter something'),
),
new RaisedButton(
onPressed: _submit,
child: new Text('Save'),
),
],
),
),
),
);
}
}
Adding a Button
Let's add a simple button to the SnackBar. When the button is clicked, the content is copied to the clipboard. Here is the new definition for the SnackBar.
void _submit() {
String msg = "Changes saved at " + new DateTime.now().toString();
SnackBar snackBar = new SnackBar(
content: new Text(msg),
action: SnackBarAction(
label: 'Copy',
onPressed: () {
Clipboard.setData(new ClipboardData(text: msg));
print("Successfully copied " + msg + " to clipboard");
},
),
);
_scaffoldKey.currentState.showSnackBar(snackBar);
}
Add Some Styling
So far our Snackbar is rather bland. Let's change it's color. Doing so is easy by specifying something for the backgroundColor. In this example we switched it to a nice Amber color
SnackBar snackBar = new SnackBar(
content: new Text(msg),
action: SnackBarAction(
label: 'Copy',
onPressed: () {
Clipboard.setData(new ClipboardData(text: msg));
print("Successfully copied " + msg + " to clipboard");
},
),
backgroundColor: Colors.amber,
);
Adjust the Duration
By default the SnackBar appears for 4 seconds. Let's double that to give the user a little more time to click the Copy button on the SnackBar if they desire. Just add this line directly below the backgroundColor property you just specified in the last example:
duration: new Duration(seconds: 8),
Summary
As you can see, SnackBars (or Toast messages if you prefer) are simple enough in Flutter.