Flutter: FlushBar

Learn How To Show Error Messages In Your Flutter Apps

Recently I’ve been working on a project and in a page which contains steppers I wanted to show an error message to the user with dismiss option and return to the step that has an error option.

And because the SnackBar in flutter just provide one action I decided to use this amazing package : FlushBar.

FlushBar : Like SnackBar it is a package which is used to notify the user about something and provide him an option to do something. For example when the user delete an item from a list it will be a good practice to inform him with a message and provide him the ability to undo this deletion.

I will use another_flushbar which is provided in flutter pub dev. This package is amazing because it gives us the ability to customize our FlushBar.

another_flushbar | Flutter Package

Let’s import it by adding it to the project’s pubspec.yaml file.

another_flushbar: ^1.12.29

Next I will add FlushBar object to the class where I want to show it.

Now I created showFlushBar method and I will initialize this flushBar in it.

Now we can show this flushBar just by calling showFlushBar() method and we can dismiss it by calling.

But what if we want to show multiple flush bars on each other?

In this case we have to create a list of flush bars

and every time we want to show a Flush Bar we have to create a FlushBar object and add it to this list

And by calling

flushBars[flushBars.length - 1].dismiss();
flushBars.removeAt(flushBars.length - 1);

we can dismiss the last shown flush bar.

Dismiss All these flush bars

for (var element in flushBars) {
  element.dismiss();
}
flushBars = [];

How to dismiss all Flush Bar by pressing back button in android or by swipe back in IOS

First of all we have to check if OS is IOS or Android

And I will override back button pressed method in case OS is Android so we can dismiss all the shown flus bars.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong, Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.