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,
);

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,

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,
);

There is a lot more to customize in Flutter SnackBar such as:
Padding
: this is the space around thecontent
of the SnackBarMargin
: this is the space around the SnackBar relative to the parentonVisible
: 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.