Customize Flutter Snackbar Example

flutter snackbar

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.


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

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.


Output :

display flutter snackbar

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


Output :

flutter snackbar bg


If you want to set padding to the content of snackbar then you can use Padding property like below


Output :

padding to snackbar flutter


To change the shape of the snackbar use shape property and I’m just using stadium border shape in the below example


Output :

flutter snackbar shape


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.


Output :

snackbar behaviour


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.


Output :



To set margin to snackbar we can use margin property. Margin is nothing but the amount of space we want around the snackbar.


Output :



We can change the elevation of the snackbar by using the elevation property.


Output :



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.


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.


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.


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

Written by Hilal Ahmad

Leave a Reply

Your email address will not be published. Required fields are marked *