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 :

Snackbar after changing background color

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 :

Snackbar with padding

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 :

Snackbar with changed shape

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 :

Snackbar with floating behaviour

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 :

Snackbar with custom width

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 :

Snackbar with margin

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 :

Snackbar with elevation

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 :

Snackbar with action button

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

--

--

--

A Software Engineer with 3 years of experience in Software development. Visit me at https://about.me/hilalahmad

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Responsive Web Design with Bootstrap

NFT Vision Hack x Rarible “Build on the Rarible Protocol”

Power-Ups Respawn

A CoreOS development cluster with Vagrant and VirtualBox

5 New Metrics For Quality at Speed Test Automation

Dell Boomi: 6 Aspects Showing Why Firms are Yearning for Boomi Integration

10 free stock photos you would actually use (Monday 16th 02AM edition)

How to Get Image Information in Swift

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hilal Ahmad

Hilal Ahmad

A Software Engineer with 3 years of experience in Software development. Visit me at https://about.me/hilalahmad

More from Medium

Flutter Challenge — Flutter Puzzle Hack

How to unit test your Flutter loading widgets

How to test every widget in Flutter?

What is Flutter?