In this article, we will create and display different types of SnackBars in Flutter.
SnackBars in Flutter
SnackBars are used to briefly display some information or inform the
user about an action. For instance, when a user deletes a mail or message you
may want to inform the user about the action. Also, the user can undo the
action he performed by the undo button in the Snackbar.
Syntax
For creating a SnackBar, we use the following code.
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: content));
Inside the content field of SnackBar, we will pass the content. Any content
can be passed inside it, but in practice, small messages with or without a
button.
Example
Simple SnackBar
class SnackBarTutorial
extends StatelessWidget {
const SnackBarTutorial({Key?
key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:
const Text("SnackBar Tutorial"),
),
body: Center(
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Welcome to AllAboutFlutter"),
),
);
},
child:
const Text("Create SnackBar"),
)
],
),
),
);
}
}
Output
|
| SnackBar |
Custom SnackBar
There are many parameters to customize a SnackBar.
Modify the code as follows.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
behavior: SnackBarBehavior.floating,
content:
const Text("Welcome to AllAboutFlutter"),
backgroundColor: Colors.orangeAccent,
margin:
const EdgeInsets.all(12.0),
elevation: 2.0,
duration:
const Duration(seconds:
2),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
);
Output
|
| SnackBar |
Summary
In this tutorial, we learnt to create s simple snackbar as well as
custom snackbar.
Comments
Post a Comment
If you have any problem or doubt please comment.