How to show a Snackbar in Flutter

Material Design’s Snackbars are a great way to give feedback to users, and even allow them to undo or retry an action. So, how do you display a Snackbar in Flutter?

If you create a Material App in Flutter, you will use a Scaffold. In the Scaffold.of documentation, there are examples to show a Snackbar. While very useful, in all those examples, the Snackbar is shown when the user presses a button. But often, you need to show a Snackbar following an async operation, such as a server call.

In this code tutorial, we will demonstrate how to show a snackbar outside the build method of your widget, and will call this after an async operation.

Setting up the app

We will create a simple app with one screen. The screen has a button, which simulates calling a server API by waiting for 5 seconds. Then, a snackbar saying there was a server error is shown, with a “Retry” button. We will use a basic MVP structure for this screen.

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Firstly, we create a Material app in main.dart, which will launch the HomePage widget.

 

Secondly, we create home_page.dart. This displays a button.

 

Setting up the MVP structure

I like to use “contracts” when using MVP. Contracts are interfaces (in Java)  or abstract classes (in Dart) that define the methods for each component of the feature, ie View, Model, and Presenter.

Note: You do not need to set up contracts for applying MVP, but I find it very helpful to have them. I define them all in one file, and this makes it easy to understand what a feature does.  When I worked as an Android DPE at Google, I worked on the first release of the Android Architecture Blueprints project and we decided to use contracts. I have used contracts on all my professional projects since, and I haven’t looked back: this really helps make a complex app maintainable!

So let’s set up our contract for this feature, by creating home_contract.dart.

 

There are 2 possible user actions: tapping the main button, and tapping the “retry” button in the snackbar. We add them to the Presenter contract. As the server call is async, we set them up as async too, because the Presenter will need to wait for the results of the call before sending back some data to the View.

 

For simplicity, both user actions lead to the same model request, which is to simulate calling a server, an async action.

 

Finally, in our simplified case, the view has only one method, which is to show the error message (ie the Snackbar), as our simulated server call always fails.

Note: in a real app, you would also have a method to show server call in progress (ie showing a ProgressBar), and, obviously, a method to show the updated data retrieved from the server.

 

Now, we create Model and Presenter classes that implement the abstract classes. The View abstract class is implemented in HomePage.

Firstly, let’s start with home_presenter.dart. The Presenter has a reference to the View and the Model, as it acts as a “coordinator” between View and Model. For our simplified example, the logic is simple: it waits while the model does the simulated server call, then it asks the view to display the error message (ie Snackbar).

Secondly, let’s set up home_model.dart.

And, lastly, HomePage itself will implement the View, and will create the Presenter when initialised.

 

Adding an async operation

The simulated server call should be async, so let’s implement it as such. For our code tutorial purpose, we will simply create a future from a duration of 5 seconds.

Showing a snackbar

To show a snackbar, Flutter provides Scaffold.of(context).showSnackBar . However, the context should be the context of a descendant of a Scaffold, and not the context that includes a Scaffold. Put simply, if we use the context of the HomePage widget, which includes a Scaffold, we will get an error as below.

 

So, instead, we need to use a BuildContext for the body of the Scaffold, and store it in a variable, as below.

 

Next, we want to show a “Retry” button on the Snackbar and hook it up to our presenter. This is done as below.

 

Voila!

Snackbar screencast
Snackbar screencast

 

What next?

This code tutorial includes an introduction to MVP. App architecture is probably the most important factor determining app longevity. With good architecture, it is easy to add or change features, and therefore, the app is a pleasure to maintain. So it’s well worth keeping an eye on Flutter Architecture Samples,  a project inspired, in part, by Android Architecture Blueprints.

 

Author: Natalie Masse Hooper

Mobile app developer with 14 years experience. Started with the Android SDK in 2010 and switched to Flutter in 2017. Past apps range from start ups to large tech (Google) and non tech (British Airways) companies, in various sectors (transport, commercial operations, e-commerce).

2 thoughts on “How to show a Snackbar in Flutter”

Leave a Reply

Your email address will not be published.