How To Easily Use Flutter Snackbar Widget

In this Flutter post, we will be going through how to properly use Flutter snackbar in Flutter apps. We will be implementing Flutter snackbar step by step and with a proper Flutter example to give you a better practical idea of how to use it. After reading this post, you will quickly be able to incorporate Flutter snackbar to your own Flutter applications. So let’s just dive right into its implementation.

What is Flutter Snackbar?

It is used to show some information to the user after some action takes place. The information can be like, the task is done, successfully downloaded etc. You can even give the user an option to undo the action.

Let’s now implement snackbar practically in our Flutter app.

Implementing Flutter Snackbar (Steps)

In order to use the Flutter snackbar, just follow the steps below:

Step 1: Create a Flutter Button

We will be creating a Flutter raisedbutton so after clicking it, we can see a snackbar. You can use other Flutter widgets as well like a text widget and make it clickable by wrapping it with ink well or gesture detector class. We will define the implementation of Flutter snackbar in our Flutter raisedbutton onPressed function. But first let’s just create a simple raisedbutton. See below code:

RaisedButton(
        onPressed: () {},
        color: Colors.blue,
        child: Text(
          'Click here to see a Snackbar',
          style: TextStyle(color: Colors.white),
        ),
      )

You can see that we now have a Flutter raisedbutton in our screen. We have decorated that button a bit so it doesn’t look too bad. Let’s now see how to implement Flutter snackbar using this button.

Step 2: Using Flutter Snackbar

We have to use the onPressed constructor of the raised button. It takes a function, so we will pass our Flutter snackbar in that function’s body. See below code:

ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('This is a snackbar')) )

You can see that using this line, you can easily show snackbar in your app’s screen. It will show at the bottom of your screen. We have used this line in the onPressed function’s body and then we have clicked that button to see if the snackbar would show or not. You can see in the above image that the snackbar is showing on the screen and again disappears after few seconds.

This is the default snackbar in Flutter. Let’s customize it now:

Step 3: Flutter Snackbar Customization

Let’s now customize our Flutter snackbar widget using its constructors.

Content Constructor

As you can see in the above example code, we have used the content constructor of snackbar class. It takes a widget which means we can pass image, row, column or some other widget to it.

Action Constructor

We also have an action constructor which takes snack bar action widget. See below code:

SnackBar(

            content: Text(‘This is a snackbar’),

            action: SnackBarAction(label: ‘Undo’, onPressed: () {}),

          )

Snack bar action has two required constructors, label and onPressed, label is used to give a title text and onPressed is used to perform some action. You can see the action label text in the right side of Flutter snackbar widget.

Let’s use this to hide the Flutter snackbar. See below code:

onPressed: () {
              ScaffoldMessenger.of(context).hideCurrentSnackBar();
                }

We just have to call hide current snackbar like this and it will dismiss the snackbar if it is showing on the screen.

Background Color Constructor

In order to change the background color of Flutter snackbar, we have to use the background color constructor of snackbar class. It takes color so we will pass a blue color to it for demonstration. See below code:

backgroundColor: Colors.blue

Duration Constructor

It specifies the amount of time snackbar will be visible on the screen. Duration constructor is used to customize that time. See below code:

duration: Duration(seconds: 2)

You can see that we have specified it to 2 seconds which means that Flutter snackbar will be shown for only 2 seconds whenever it is triggered.

So this is how you can implement and customize Flutter snackbar. There are other constructors of Flutter snackbar as well. I would love to see you give them a try and share your experience with us.

Conclusion

To conclude, hope you now have learned how to properly use and customize Flutter snackbar in Flutter apps. I would love to see how you use it. Do share your experience with us. Thank you for reading this Flutter post.