Flutter: How to create an error alert or popup notification with SnackBar

There are 3rd party libraries out there that offer alerts or popups in Flutter. But, what I'll be teaching you today is how to use the built in SnackBar widget to produce an error popup or notification easily.

For the video version of the tutorial go here: How to use snackbar in flutter as error alert or popup notification

To use the SnackBar widget and make a nice Snack Bar that you see in most google apps like youtube, all you need to do is wrap your entire app with the Scaffold Widget. So let's make create a new file page_wrapper.dart and create a new Widget named PageWrapper that accepts a widget as children.

After that all we need to do is call the PageWrapper widget in all of our pages so that we have a base widget that uses the Scaffold in every page. This means we can now use the SnackBar on every page. In the main.dart all you need to do is this:

Then now we can create the home page and create a snackbar. Before that we need a trigger so we'll be using the RaisedButton as the trigger and onTap we'll call the showSnackBar method to create a snackbar. Also, We'll be adding a SnackBarAction named dismiss which when called will hide the snackbar so that we have a way for the user to hide it whenever she wants.

On the onTap place the following:

Let's get the scaffold state by doing this:

ScaffoldState sState = Scaffold.of(context); 

Then after we got the scaffold state we can call the showNackBar like this:

sState.showSnackBar( 
    SnackBar( 
        content: Text("Hi Im snackbar!!!"), 
        action: SnackBarAction(
             label: 'Dismiss', 
            onPressed: () { 
                sState.hideCurrentSnackBar(); 
            }
        )
    ) 
);

As you can see the snackbar accepts a SnackBarAction as param which is a button that can be triggered by pressing. In this case we just want to hide the current snack bar by pressing the dissmiss text.

It should look like this:

SnackBar

And there it is we can now safely use the snackbar on every page without seeing the error:

Scaffold.of() called with a context that does not contain a Scaffold.

Here is the complete code of the home page:

And this is the complete demo of the app (see it in action!):
 

See the Pen Flutter: How to create an error alert or popup notification with SnackBar by doppelgunner (@doppelgunner) on CodePen.

A man's errors are his portals of discovery. - James Joyce

References

• https://flutter.dev/docs/cookbook/design/snackbars