How to customize Flutter SnackBar

Share this post

In my previous post, I explained how to show a SnackBar (sometimes known as Toast) and do some basic things with it. But what if you want to change the SnackBar to match your design, like many other widgets in Flutter, SnackBar can be customized a lot.

The first thing we probably want to do is to change backgroundColor of the SnackBar:

final snackBar = SnackBar(
      content: Text('Email deleted'),
      action: SnackBarAction(
        label: 'Undo',
        textColor: Colors.white,
        onPressed: () {},
      ),
      backgroundColor: Colors.blue,
    );
SnackBar with custom backgroundColor
SnackBar with custom background color

By default, SnackBar always sticks at the bottom of the screen. If you would like the one that “floats” (means shows above other widgets like FloatingActionButton and BottomNavigationBar), then we need to change the behavior:

behavior: SnackBarBehavior.floating,
SnackBarBehavior.floating

Add border radius to SnackBar

Personally I think the SnackBar with “floating” behavior already looks much cooler, but let’s make the borders round to give it a more customised look:

final snackBar = SnackBar(
      content: Text('Email deleted'),
      action: SnackBarAction(
        label: 'Undo',
        textColor: Colors.white,
        onPressed: () {},
      ),
      behavior: SnackBarBehavior.floating,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24),
      ),
      backgroundColor: Colors.blue,
    );
BorderRadius in Flutter SnackBar

There is a lot more to customize in Flutter SnackBar such as:

  • Padding: this is the space around the content of the SnackBar
  • Margin: this is the space around the SnackBar relative to the parent
  • onVisible: this is a callback which is called, whenever the SnackBar becomes visible (is shown)
  • animation: If you want to customize how SnackBar enters and leaves the screen: I will explain this more in detail in a later post.
  • elevation: customize the size of the shadow below the SnackBar

Of course the content of the SnackBar could be customized in anyway possible, because it’s just a widget. So you could for example add an image or icon to it, or anything else you might want to show.