Mr Flutter

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,

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 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.

How to show SnackBar aka Toast in Flutter

Share this post

One of the very useful Material widgets is SnackBar. SnackBar helps you with showing a brief message to your user as feedback to some action they have taken. For example, after a user has a deleted an email or created a new to-do item in a certain app.

The basic use of SnackBar is very simple. Let’s see how it works when we just want to show a user that a certain action was successful:

First we start by defining our SnackBar and the options:

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

What’s important is that we need to use Scaffold on our page. Scaffold makes our life easier by taking care of SnackBar not overlapping any important other widgets, like FloatingActionButton.

So let’s trigger our SnackBar:

final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

  @override
  Widget build(BuildContext context) {
    final snackBar = SnackBar(content: Text('Yay! A SnackBar!'));

    return Scaffold(
      appBar: AppBar(
        title: Text('MrFlutter'),
      ),
      body: Container(
        child: ElevatedButton(
          onPressed: () => ScaffoldMessenger.of(context).showSnackBar(snackBar),
          child: Text('SnackBar'),
        ),
      ),
    );
  }

How you use SnackBar with action

Let’s say we want to perform a certain action when we tap a SnackBar. For instance, when we want to undo the action we just performed or dismiss the SnackBar. We just need to pass an action to our SnackBar widget:

final snackBar = SnackBar(
      content: Text('Email deleted'),
      action: SnackBarAction(
        label: 'Undo',
        onPressed: () {
          // Undo action here
        },
        // textColor: ,  Color for undo button
        // disabledTextColor: , Color when undo button is disabled
      ),
    );

Define how long SnackBar is shown

To define how long it should take for the SnackBar message to disappear, we need to use the duration property. Let’s say we want the message to show for 5 seconds. This is how we do it:

final snackBar = SnackBar(
      content: Text('Email deleted'),
      action: SnackBarAction(
        label: 'Undo',
        onPressed: () {},
      ),
      duration: Duration(seconds: 5),
    );

We have discussed already how we can show a SnackBar, defined the content (could be any Widget), defined the action, and finally defined how to set how long to show a SnackBar. There are more ways to customize a SnackBar in Flutter. In my next post, I will show you in detail how we can customize a SnackBar, like animation, colors, shape, and behavior.

How to use Google Fonts in Flutter

Share this post

Using Google Fonts in Flutter is very straightforward and it gives you access to nearly 1000 open-sourced font families. Using google_fonts library allows you to fetch Google Fonts at runtime and cache them in your app’s file system, removing the need for storing the fonts in the assets folder and decreasing your app size. There is of course the option to store the fonts locally as well if you prefer not fetching fonts at runtime.

Install Google Fonts library in Flutter

Run the following command:

flutter pub add google_fonts

Or manually add the following to your pubspec.yaml dependencies list (the version might have changed):

google_fonts: ^2.1.0

Import it in your code:

import 'package:google_fonts/google_fonts.dart';

Using Google Fonts in theme

If you want your entire app to use a particular font, you can just add the font that you want as your text theme (In this case we are using Lato font):

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);

The above code will make sure that all font variations use Lato as well. If you want to override a particular variation like body1, then you can use the following:

<strong>final</strong> textTheme = Theme.of(context).textTheme;

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(textTheme).copyWith(
      body1: GoogleFonts.oswald(textStyle: textTheme.body1),
    ),
  ),
);

What the above code does is tell Flutter to use Lato for every font variation except for body1. In this case, all body1 texts in our app will use Oswald.

Use Google Fonts in individual Text widgets

Use the Google Fonts in a Text widget we can just assign the font style to our Text widget textStyle:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(),
),
// or to load font dynamically:
Text(
  'This is Google Fonts',
  style: GoogleFonts.getFont('Lato'),
),

And of course it’s possible to override other Text properties, like you normally would do:

Text(
  'This is Google Fonts',
  style: GoogleFonts.lato(
    textStyle: Theme.of(context).textTheme.headline4,
    fontSize: 48,
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
  ),
),

Bundling font files in your app’s assets

If you prefer not to fetch the fonts during runtime (only the first time, after that they will be cached), then you can:

Download the fonts that you want (only the weights and styles needed). It’s important not to rename them!!!
Add the fonts to a top-level folder (same level as the lib folder) called google_fonts:

Add the google_fonts folder name under assets in your pubspec.yaml file:

There is no need to add your fonts to the fonts section of pubspec.yaml, because we keep the name of font files consistent with what they’re called in the Google Fonts library, so it knows where to get them from.