How to create a snackbar in flutter:
Snackbar is used to show a message to the user briefly. It doesn’t overlap with other widgets like floating action button. For example, we can simply show a message to the user if one item is deleted with an option to undo. This is a part of material design and flutter makes it really easy to implement.
In this post, I will show you how to create a snackbar in flutter with example.
Classes used to create snackbar:
We need to use the following two classes to create a snackbar:
- Scaffold. widget is used to show the snackbar. It creates a visual structure and doesn’t overlap the important widgets.
- SnackBar class is used to show a snackbar. Using Scaffold, we can show a snackbar.
Example program:
Let’s take a look at the below program:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Snack bar Example'),
),
body: SnackBarWidget(),
));
}
}
class SnackBarWidget extends StatelessWidget {
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () {
final snackBar = SnackBar(content: Text('Showing a snackbar !!'));
Scaffold.of(context).showSnackBar(snackBar);
},
child: Text('Click me'),
),
);
}
}If you run it, it will create one app with a button and clicking on that will show a snackbar as like below:
Adding action button:
We can also add one action to a snackbar that can be used to trigger an action like reverting the last execution.
For that, we need to create the SnackBar as like below:
final snackBar = SnackBar(
content: Text('Showing a snackbar !!'),
action: SnackBarAction(
label: 'Revert',
onPressed: () {},
));onPressed will execute the function that will be called on clicking the action button. It will look somewhat like below:
