Customize Flutter Snackbar Example
Flutter snackbar is a material widget in flutter. Snackbar in flutter is use to notify users with a short message. We can use flutter snackbar after a particular action eg: after deleting a file or when there is no internet connection available and flutter snackbar displayed at bottom of screen and display a message for a short period of time and disappear.
Flutter provides a widget called SnackBar that let us add a snackbar to our application, So this tutorial shows you how to use a snackbar widget in flutter with example and will also customize its style with different properties.
We can create flutter snackbar in our application by calling its constructor and there is only one required property to create a snackbar which is content.
Usually, we will use a Text widget for content since we need to show some message to the user.
We can use other widgets instead if we want.
To show a message in snackbar we can use Text widget for content.
Constructor:
SnackBar({
Key? key,
required Widget content,
Color? backgroundColor,
double? elevation,
EdgeInsetsGeometry? margin,
EdgeInsetsGeometry? padding,
double? width,
ShapeBorder? shape,
SnackBarBehavior? behavior,
SnackBarAction? action,
Duration duration,
Animation<double>? animation,
VoidCallback? onVisible
})Showing Flutter Snackbar
You can’t display a snackbar continuously like other widgets.
We can display snackbar for some action done in application like file deleted or
no internet connection, so in these cases you can display a snackbar to user.
Below is the code for displaying a snackbar in flutter
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Hi, Flutter developers'),
)
);Flutter Snackbar Example Complete Code
Let’s see an example where we create a button in flutter and on button click we will show a snackbar,
we will also create a separate method where we will implement our snackbar for clean code approach, so let’s check out the below code.
import 'package:flutter/material.dart';void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Snackbar demo'),
),
body: SnackBarPage(),
),
);
}
}class SnackBarPage extends StatelessWidget {
const SnackBarPage({Key? key}) : super(key: key);void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}@override
Widget build(BuildContext context) {
return Center(
child: MaterialButton(
child: Text('Show Snackbar'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
showSnackBar(context);
},
),
);
}
}
Output :
Flutter Snackbar Properties
The Properties of a snackbar are :
- backgroundColor
- padding
- shape
- behavior
- width
- margin
- elevation
- duration
- action
- onVisible
Now let’s see the all the snackbar property one by one.
Flutter Snackbar BackgroundColor
If you want to change the background color of snackbar so you can BackgroundColor property, let’s see it in code
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Padding
If you want to set padding to the content of snackbar then you can use Padding property like below
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
padding: EdgeInsets.all(20),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Shape
To change the shape of the snackbar use shape property and I’m just using stadium border shape in the below example
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
shape: StadiumBorder()
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Behavior
By default the snackbar behavior is fixed. If we want to change it so we have to use the behavior property where we provide SnackBarBehavior constant as value. The SnackBarBehavior has two constants fixed and floating and If there is a BottomNavigationBar widget present then the snackbar will be diaplayed above the bottom navigation if the behaviour is fixed.
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
behavior: SnackBarBehavior.floating,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Width
We can set or change the snackbar width by using the width property.
NOTE: We can use width, margin and elevation properties of snackbar only when the behavior is set to floating. Also remember we have to use either width or margin but not both for a snackbar. Doing so will throw an error.
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
behavior: SnackBarBehavior.floating,
width: 200,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Margin
To set margin to snackbar we can use margin property. Margin is nothing but the amount of space we want around the snackbar.
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
behavior: SnackBarBehavior.floating,
margin: EdgeInsets.all(50),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Elevation
We can change the elevation of the snackbar by using the elevation property.
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
behavior: SnackBarBehavior.floating,
margin: EdgeInsets.all(50),
elevation: 30,
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Duration
If you want to change the snackbar display duration then you can use the Duration property and you can provide duration in microseconds, milliseconds or minutes.
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
behavior: SnackBarBehavior.floating,
duration: Duration(milliseconds: 10000),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Action
You can add action button to your snackbar and for that you need use the Action property of snackbar.
The value for action is SnackBarAction() and it has four main properties.
- label : The name we want to display for the action button.
- textColor : To add color to the actionButton text.
- disabledTextColor : The color of the text to be displayed when the action button is disabled.
- onPressed : A callback function to perform any action when we click the action button.
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
behavior: SnackBarBehavior.floating,
action: SnackBarAction(
label: 'Dismiss',
disabledTextColor: Colors.white,
textColor: Colors.yellow,
onPressed: () {
//Do whatever you want
},
),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}Output :
Flutter Snackbar onVisible
If we want to perform an action when the snackbar is displayed we can do it inside the onVisible() callback function.
void showSnackBar(BuildContext context) {
final snackBar = SnackBar(
content: Text('Hi, Flutter developers'),
backgroundColor: Colors.teal,
behavior: SnackBarBehavior.floating,
action: SnackBarAction(
label: 'Dismiss',
disabledTextColor: Colors.white,
textColor: Colors.yellow,
onPressed: () {
//Do whatever you want
},
),
onVisible: (){
//your code goes here
},
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}So guys that is the end of this tutorial I hope you understand how to use snackbar in flutter and also how to customize it.
If you have any question then you can ask me in the comment section below.
Happy Coding!
You might be interested in:
How to connect your Android device to the android studio without a USB cable
