Flutter’s Snackbar widget lets you show a pop-up notification that users may close from within your application.
It is employed to display to users whether specific activities occur in our programmes.
For instance, if the user login process fails for some reason, we can use the snackbar to tell the user to try again. It appears on the screen and has additional functions like the ability to reverse a previously executed action.
Snackbar briefly displays the educational message before it automatically disappears at the end of the allotted time. The ideal onscreen duration for a snackbar is 5 to 10 seconds. It is offered in the flutter libraries’ material package.
You must import “package:flutter/material.dart” to use a snackbar. Syntax of the snackbar is given below.
SnackBar({Key key,
@required Widget content,
Color backgroundColor,
double elevation,
EdgeInsetsGeometry margin,
EdgeInsetsGeometry padding,
double width,
ShapeBorder shape,
SnackBarBehavior behavior,
SnackBarAction action,
Duration duration: _snackBarDisplayDuration,
Animation<double> animation,
VoidCallback onVisible})Here are the properties descriptions
- action: Action to perform based on snackbar.
- animation: Entry and the exit animation of snackbar.
- backgroundcolor: Snackbar background color
- behavior: Behavior and location of snackbar.
- content: Content of snackbar.
- duration: The amount of time snackbar should be displayed.
- elevation: Elevates the snackbar by increasing shadow.
- margin: Space around snackbar.
- onVisible: Called the first time that the snackbar is visible within a scaffold.
- padding: space around content inside snackbar.
- shape: Shape of snackbar.
- width: Width of snackbar.
Here is the basic example of the snackbar given below.
class SnackbarDisplay extends StatefulWidget {
@override
SnackbarDisplayState createState() => SnackbarDisplayState();
}
class SnackbarDisplayState extends State<SnackbarDisplay> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Snackbar Demo'),
automaticallyImplyLeading: false,
),
body: Center(
child: Column(
children: [
Container(
padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
margin: EdgeInsets.fromLTRB(5, 5, 5, 0),
child: TextButton(
style: TextButton.styleFrom(
shadowColor: Colors.black,
textStyle: TextStyle(fontSize: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
backgroundColor: Colors.black45,
),
onPressed: () async {
final snackBar = SnackBar(
content: Text('This is a snackbar'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: Text(
"Show Snackbar",
style: TextStyle(color: Colors.white, fontSize: 12),
),
),
),
],
)));
}
}The snackbar is also customizable. Similar to changing a colour or adding a button, you may alter the snackbar’s duration. In order for you to customise it to meet your needs.
final snackBar = SnackBar(
content: Text('This is a customize snackbar'),
backgroundColor: Colors.blue,
duration: Duration(seconds: 3),
action: SnackBarAction(
label: 'Dismiss',
onPressed: () {
// Perform action when the action button is pressed
},
),
);That code can be added to the onPressed method.
Your Flutter application’s snackbar has been successfully established. Snackbars are a fantastic method to give users momentary feedback or notifications. To improve the user experience, feel free to test out various customizations.
Recall that snackbars are merely one of the numerous UI elements offered by Flutter. For Flutter to help you create incredible applications, keep exploring and experimenting!
Related Posts
StartActivityForResult in Flutter
Progress Bars Example in Flutter