It can be useful to briefly inform your users when certain actions take place. For example, when a user swipes away a message in a list, you might want to inform them that the message has been deleted. You might even want to give them an option to undo the action.
In Material Design, this is the job of a
SnackBar
. This recipe implements a snackbar using the following steps:
- Create a
Scaffold
.
- Display a
SnackBar
.
- Provide an optional action.
When creating apps that follow the Material Design guidelines, give your apps a consistent visual structure. In this example, display the
SnackBar
at the bottom of the screen, without overlapping other important widgets, such as the
FloatingActionButton
.
The
Scaffold
widget, from the
material library
, creates this visual structure and ensures that important widgets don't overlap.
dart
return
MaterialApp
(
title:
'SnackBar Demo'
,
home:
Scaffold
(
appBar:
AppBar
(
title:
const
Text
(
'SnackBar Demo'
),
),
body:
const
SnackBarPage
(),
),
);
With the
Scaffold
in place, display a
SnackBar
. First, create a
SnackBar
, then display it using
ScaffoldMessenger
.
dart
const
snackBar =
SnackBar
(
content:
Text
(
'Yay! A SnackBar!'
),
);
// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger
.
of
(context).
showSnackBar
(snackBar);
You might want to provide an action to the user when the SnackBar is displayed. For example, if the user accidentally deletes a message, they might use an optional action in the SnackBar to recover the message.
Here's an example of providing an additional
action
to the
SnackBar
widget:
dart
final
snackBar =
SnackBar
(
content:
const
Text
(
'Yay! A SnackBar!'
),
action:
SnackBarAction
(
label:
'Undo'
,
onPressed: () {
// Some code to undo the change.
},
),
);
import 'package:flutter/material.dart';
void main() => runApp(const SnackBarDemo());
class SnackBarDemo extends StatelessWidget {
const SnackBarDemo({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SnackBar Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('SnackBar Demo'),
),
body: const SnackBarPage(),
),
);
}
}
class SnackBarPage extends StatelessWidget {
const SnackBarPage({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () {
final snackBar = SnackBar(
content: const Text('Yay! A SnackBar!'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change.
},
),
);
// Find the ScaffoldMessenger in the widget tree
// and use it to show a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: const Text('Show SnackBar'),
),
);
}
}