flushbar 1.2.3

  • README.md
  • Installing
  • Versions
  • 96

Flushbar #

Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackbars. IOS developers, I don't know what you use there, but you will like it

See the install instructions.

This is a flutter widget inspired by Flashbar. Development of Flushbar and Flashbar are totally separate.



Flushbar works by pushing a new route on top of the existing ones. For it to work as intended, make sure there is no route on top of the Flushbar you want to dismiss. To help you accomplish that, you have two options. First, a listener that you can subscribe to that will notify you when it changed state, including when it reaches the DISMISSED state. Second, the function dismiss() yields a Future that completes only when Flushbar is DISMISSED. Choose your pick.

Dismissing a Flushbar that is not the top route will have the following effects:

  • It does not animate back. It simply vanishes.
  • FlushbarStatus listener will not register FlushbarStatus.IS_HIDING or FlushbarStatus.DISMISSED
  • It returns no value when the Future yield by dismiss() completes.

Getting Started #

The possibilities #

Flushbar Animated

A basic Flushbar #

The most basic Flushbar uses only a message. Failing to provide it before you call show() will result in a runtime error. Duration, if not provided, will create an infinite Flushbar, only dismissible by code, back button clicks, or a drag (case isDismissible is set to true).

  • Note that only message is a required parameter. All the other ones are optional
class YourAwesomeApp extends StatelessWidget {

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YourAwesomeApp',
      home: new Scaffold(
          child: Center(
            child: MaterialButton(
              onPressed: (){
                  ..title = "Hey Ninja"
                  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
                  ..duration = Duration(seconds: 3)

Basic Example

Lets get crazy Flushbar #

Here is how customized things can get.

      title: "Hey Ninja",
      message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP, //Immutable
      reverseAnimationCurve: Curves.decelerate, //Immutable
      forwardAnimationCurve: Curves.elasticOut, //Immutable
      backgroundColor: Colors.red,
      shadowColor: Colors.blue[800],
      backgroundGradient: new LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: false,
      duration: Duration(seconds: 4),
      icon: Icon(
        color: Colors.greenAccent,
      mainButton: FlatButton(
        onPressed: () {},
        child: Text(
          style: TextStyle(color: Colors.amber),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: new Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: "ShadowsIntoLightTwo"),
      messageText: new Text(
        "You killed that giant monster in the city. Congratulations!",
        style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: "ShadowsIntoLightTwo"),

Complete Example

  • Note that the properties flushbarPosition, reverseAnimationCurve, forwardAnimationCurve are immutable and have to be set at construction time.
  • Don't forget to call show() or the bar will stay hidden.
  • To deactivate any of those properties, pass null to it.

Here is a notation I like to use.

      ..title = "Title"
      ..message = "Message"
      ..titleText = Text()
      ..messageText = Text()
      ..duration = Duration()
      ..icon = Icon()
      ..mainButton = FlatButton()
      ..backgroundColor = Color()
      ..backgroundGradient = LinearGradient()
      ..isDismissible = true
      ..shadowColor = Color()
      ..showProgressIndicator = true,
      ..progressIndicatorBackgroundColor = Colors.blueGrey,
      ..onStatusChanged = (status) {}

Left indicator bar #

Flushbar has a lateral bar to better convey the humor of the notification. To use it, simple give leftBarIndicatorColor a color.

  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
  ..icon = Icon(
    size: 28.0,
    color: Colors.blue[300],
  ..duration = Duration(seconds: 3)
  ..leftBarIndicatorColor = Colors.blue[300]

Left indicator example

Customize your text #

If you need a more fancy text, you can create a Text and pass it to the titleText or messageText variables.

  • Note that title will be ignored if titleText is not null
  • Note that message will be ignored if messageText is not null
  ..title = "Hey Ninja" //ignored since titleText != null
  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry" //ignored since messageText != null
  ..titleText = new Text("Hello Hero",
          TextStyle(fontWeight: FontWeight.bold, fontSize: color: Colors.yellow[600], fontFa"ShadowsIntoLightTwo"))
  ..messageText = new Text("You killed that giant monster in the city. Congratulations!",
      style: TextStyle(fontSize: 16.0, color: Colors.green[fontFamily: "ShadowsIntoLightTwo"))

Customized Text

Customize background and shadow #

You can paint the background with any color you want. The same goes for shadows. shadow won't show by default. You will only see a shadow if you specify a color.

  ..title = "Hey Ninja"
  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
  ..backgroundColor = Colors.red
  ..shadowColor = Colors.red[800]

Background and Shadow

Want a gradient in the background? No problem.

  • Note that backgroundColor will be ignored while backgroundGradient is not null
  ..title = "Hey Ninja"
  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
  ..backgroundGradient = new LinearGradient(colors: [Colors.Colors.teal])
  ..backgroundColor = Colors.red
  ..shadowColor = Colors.blue[800]

Background Gradient

Icon and button action #

Let us put a Icon that has a PulseAnimation. Icons have this animation by default and cannot be changed as of this moment. Also, let us put a button. Have you noticed that show() returns a Future? This Future will yield a value when you call dismiss([T result]). I recommend that you specify the result generic type if you intend to collect an user input.

Flushbar flush;
bool _wasButtonClicked;
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: MaterialButton(
          onPressed: () {
            flush = Flushbar<bool>() // <bool> is the type of the result passed to dismiss() and collected by show().then((result){})
              ..title = "Hey Ninja"
              ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
              ..icon = Icon(
                color: Colors.blue,
              ..mainButton = FlatButton(
                onPressed: () {
                  flush.dismiss(true); // result = true
                child: Text(
                  style: TextStyle(color: Colors.amber),
              ..show(context).then((result) {
                setState(() { // setState() is optional here
                  _wasButtonClicked = result;

Icon and Button

Flushbar position #

Flushbar can be at FlushbarPosition.BOTTOM or FlushbarPosition.TOP.

  • This variable is immutable and can not be changed after the instance is created.
Flushbar(flushbarPosition: FlushbarPosition.TOP)
  ..title = "Hey Ninja"
  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"

Bar position

Duration and dismiss policy #

By default, Flushbar is infinite. To set a duration, use the duration property. By default, Flushbar is dismissible by the user. A right or left drag will dismiss it. Set isDismissible to false to change this behaviour.

  ..title = "Hey Ninja"
  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
  ..duration = Duration(seconds: 3)
  ..isDismissible = false

Progress Indicator #

If you are loading something, use a LinearProgressIndicator If you want an undetermined progress indicator, do not set progressIndicatorController. If you want a determined progress indicator, you now have full controll over the progress since you own the AnimationController

  • There is no need to add a listener to your controller just to call setState(){}. Once you pass in your controller, Flushbar will do this automatically. Just make sure you call _controller.forward()

AnimationController _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 3),

  ..title = "Hey Ninja"
  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
  ..showProgressIndicator = true,
  ..progressIndicatorController = _controller,
  ..progressIndicatorBackgroundColor = Colors.grey[800],

Show and dismiss animation curves #

You can set custom animation curves using forwardAnimationCurve and reverseAnimationCurve.

  • These properties are immutable
  forwardAnimationCurve: Curves.decelerate,
  reverseAnimationCurve: Curves.easeOut,
  ..title = "Hey Ninja"
  ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"

Listen to status updates #

You can listen to status update using the onStatusChanged property.

  • Note that when you pass a new listener using onStatusChanged, it will activate once immediately so you can check in what state the Flushbar is.

Flushbar flushbar = Flushbar(title: "Hey Ninja", message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry");

    ..onStatusChanged = (FlushbarStatus status) {
      switch (status) {
        case FlushbarStatus.SHOWING:
        case FlushbarStatus.IS_APPEARING:
        case FlushbarStatus.IS_HIDING:
        case FlushbarStatus.DISMISSED:

Input text #

Sometimes we just want a simple user input. Use the propertyuserInputForm.

  • Note that buttons, messages, and icons will be ignored if userInputForm != null
  • dismiss(result) will yield result. dismiss() will yield null.
Flushbar<List<String>> flush;
final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
TextFormField getFormField(String text) {
    return TextFormField(
      initialValue: text,
      style: TextStyle(color: Colors.white),
      maxLength: 100,
      maxLines: 1,
      maxLengthEnforced: true,
      decoration: InputDecoration(
          fillColor: Colors.white10,
          filled: true,
          icon: Icon(
            color: Colors.grey[500],
          border: UnderlineInputBorder(),
          helperText: "Helper Text",
          helperStyle: TextStyle(color: Colors.grey),
          labelText: "Label Text",
          labelStyle: TextStyle(color: Colors.grey)),

flush = Flushbar<List<String>>()
      ..userInputForm = Form(
          key: _formKey,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              getTextFormField("Initial Value"),
              getTextFormField("Initial Value Two"),
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: MaterialButton(
                  textColor: Colors.amberAccent,
                  child: Text("SUBMIT"),
                  onPressed: () {
                    flush.dismiss([_controller1.value.text, _controller2.value.text]);
      ..show(context).then((result) {
        if (result != null) {
          String userInput1 = result[0];
          String userInput2 = result[1];

This example tries to mimic the Material Design style guide

Bar input

Flushbar Helper #

I made a helper class to facilitate the creation of the most common Flushbars.

FlushbarHelper.createSuccess({message, title, duration});
FlushbarHelper.createInformation({message, title, duration});
FlushbarHelper.createError({message, title, duration});
FlushbarHelper.createAction({message, title, duration flatButton});
FlushbarHelper.createLoading({message,linearProgressIndicator, title, duration, progressIndicatorController, progressIndicatorBackgroundColor});

Make it rain #

<a href="https://www.buymeacoffee.com/AndreHaueisen" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

[1.2.3] - 2019-25-02

  • Breaking Change Flushbar now accepts a BoxShadow for a more customized shadow

[1.2.2] - 2019-22-02

  • Fixed a bug when push an route after flushbar, and flushbar timer pop the current route out

[1.2.1] - 2019-11-01

  • aroundPadding is now more flexible and receives EdgeInsets instead of an int

[1.2.0] - 2018-09-12

  • add animationDuration argument. You can now control how long does it take to show and dismiss Flushbar

[1.1.2] - 2018-24-10

  • icon argument can now be any widget, though I recommend using Icon or Image
  • added null checks

[1.1.1] - 2018-17-10

  • Fixed bug where calling Navigator.push() on Flushbar swipe dismissal did not pop the route
  • Fixed bug where swipe to dismiss a padded Flushbar caused to being stuck at the edge

[1.1.0] - 2018-11-10

  • Added two new features: aroundPadding and borderRadius
  • Fixed a bug where the overlay background was not null

[1.0.1] - 2018-11-02

  • Texts now respond to alignment

[1.0.0] - 2018-11-02

  • No changes. Simply reached stable after a month without new bugs

[0.9.2] - 2018-09-29

Changes #

  • Dismissing a Flushbar that is not the top route no longer throws an exception
  • Dismissing a Flushbar that is not the top route has the following effects:
    • It does not animate back. It simply vanishes
    • FlushbarStatus listener will not register FlushbarStatus.IS_HIDING or FlushbarStatus.DISMISSED
    • It returns no value when the Future yield by dismiss() completes

Fixes #

  • Fixed an issue where a dismissible Flushbar would not cancel the timer and pop two routes instead of one

[0.9.1] - 2018-09-25

Changes #

  • Fixed an issue where Flushbar could get stuck when swipe to dismiss was used
  • Minor layout tweeks
  • Flushbar gets a weird logo! Do not judge me. I'm not a designer :)
  • README file update
  • README file fixes

[0.9.0] - 2018-09-10

Looking good for version 1.0. Please, report any issues your have.

Changes #

  • IMPORTANT dismiss() now returns a future when the animation is completed and route is poped. That makes it easier to concatenate two or more Flushbars.
  • Major changes on how show and dismiss animations work, making Flushbar more reliable.
  • Trying to dismiss() a Flushbar that is not the top route is going to throw an error.
  • Pressing the back button will now properly dismiss() Flushbar.
  • Performance improvements. In and out animations are smoother.

Layout Changes #

  • Removed top padding when flushbarPosition == FlushbarPosition.TOP

[0.8.3] - 2018-09-07

Fixes #

  • Fixed issue when isDismissible is set to false Issue #6
  • Fixed issue where the keyboard would hide Flushbar Issue #7

[0.8.2] - 2018-08-27

Changes #

  • Add key property
  • Fixed bug here using flushbar_helper progressIndicator did not show
  • Fixed documentation about progressIndicator

[0.8.1] - 2018-08-12

Changes #

  • Fixed Dart version issue

[0.8.0] - 2018-08-11

Breaking changes #

  • Changed the behaviour of linearProgressIndicator to allow the user to controll its progress. See README.md for examples

Changes #

  • Added a left vertical bar to better convey the humor of the notification. See README.md for examples
  • Title is not mandatory anymore

[0.7.6] - 2018-08-07

Changes #

  • Version update to supprt master channel

[0.7.5] - 2018-07-28

Changes #

  • Fix bug where keyboard did not show when using a Form
  • Flushbar is now compatible with the master channel
  • Bug fixes

[0.7.1] - 2018-07-08

Changes #

  • Flushbar doc update

[0.7.0] - 2018-07-08

Breaking changes #

  • Flushbar does not need a global instance anymore
  • Flushbar it now made be used only one time. After it hits the dismissed state, that instance wont work anymore
  • Due to the behaviour above, there is no need to call commitChanges() anymore
  • Flushbar does not need to be within a Stack widget anymore
  • Purged state eliminated
  • FlushbarMorph is now called FlushbarHelper

Changes #

  • README.md is updated

Known issues #

  • When using a Form, the keyboard is not shown. Still figuring out how to solve it.

[0.5.6] - 2018-06-20

Changed #

  • Fixed dependency issue

[0.5.5] - 2018-06-20

Changed #

  • Updated flushbar_morph
  • Updated sdk version

[0.5.4] - 2018-06-16

Changed #

  • Flushbar now animates size changes when commit is called while showing
  • Layout refinements

[0.5.2] - 2018-06-05

Changed #

  • User input now receives a Form to facilitate field validation

[0.5.1] - 2018-06-05

Changed #

  • Fixed brain fart. Same changes as 0.5.0

[0.5.0] - 2018-06-05

Changed #

  • Removed change...() functions. Cascade notation is now recommended
  • Update readme file
  • Default message font size reduced from 16.0 to 14.0
  • Default title font size reduced from 16.0 to 15.0

[0.4.7] - 2018-06-04

Changed #

  • Fixed bug with bar duration
  • Blink animation when Flushbar is not dismissed now animates the whole bar and is synchronised with content change.

[0.4.5] - 2018-06-03

Added #

  • Blink animation when commitChanges() is called when Flushbar is not dismissed. This provides a smooth content transition
  • Helper class to morph Flushbar (FlushbarMorph)

Changed #

  • Code cleanup

[0.4.0] - 2018-05-27

Added #

  • InputTextField

[0.3.1] - 2018-05-27

Changed #

  • Fixed bar being automatically called
  • Title and message are not required at construction time
  • Better usage example
  • Removed callback from constructor

[0.3.0] - 2018-05-27

Changed #

  • Removed the possibility to chose icon position
  • Widgets are now aligned correctly
  • Documentation improvements

[0.2.5] - 2018-05-26

Changed #

  • Bug fixes
  • Moved icon animation into the flushbar
  • changeStatusListener() is now activated on change

[0.2.0] - 2018-05-24

Added #

  • Removed requirement for a initial widget
  • OnStatusChanged callback so it is possible to listen to the various Flushbar status
  • The callback can be changed using changeStatusListener()
  • Started working on the README.md file

Changed #

  • IconAwareAnimation is now more general and it is called PulseAnimator
  • Flushbar now accepts an Icon instead of only the IconData and IconColor
  • Alignment changes
  • Default background color

[0.0.1] - 2018-05-23

Added #

  • Flushbar creation
  • Single button action
  • Status listeners
  • Left or right icon positioning
  • Top or bottom positioning

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flushbar: ^1.2.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flushbar/flushbar.dart';
Version Uploaded Documentation Archive
1.5.0 May 4, 2019 Go to the documentation of flushbar 1.5.0 Download flushbar 1.5.0 archive
1.4.0 Apr 8, 2019 Go to the documentation of flushbar 1.4.0 Download flushbar 1.4.0 archive
1.3.1 Apr 2, 2019 Go to the documentation of flushbar 1.3.1 Download flushbar 1.3.1 archive
1.3.0 Mar 15, 2019 Go to the documentation of flushbar 1.3.0 Download flushbar 1.3.0 archive
1.2.4 Mar 5, 2019 Go to the documentation of flushbar 1.2.4 Download flushbar 1.2.4 archive
1.2.3 Feb 25, 2019 Go to the documentation of flushbar 1.2.3 Download flushbar 1.2.3 archive
1.2.1 Jan 11, 2019 Go to the documentation of flushbar 1.2.1 Download flushbar 1.2.1 archive
1.2.0 Dec 9, 2018 Go to the documentation of flushbar 1.2.0 Download flushbar 1.2.0 archive
1.1.2 Nov 24, 2018 Go to the documentation of flushbar 1.1.2 Download flushbar 1.1.2 archive
1.1.1 Nov 20, 2018 Go to the documentation of flushbar 1.1.1 Download flushbar 1.1.1 archive

All 37 versions...

Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on May 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.1
  • pana: 0.12.16
  • Flutter: 1.5.4-hotfix.2


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/flushbar.dart. (-0.50 points)

Analysis of lib/flushbar.dart reported 1 hint:

line 327 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: Flushbar.onStatusChanged, Flushbar.title, Flushbar.message, Flushbar.titleText, Flushbar.messageText, Flushbar.backgroundColor, Flushbar.leftBarIndicatorColor, Flushbar.boxShadow, Flushbar.backgroundGradient, Flushbar.icon, Flushbar.mainButton, Flushbar.duration, Flushbar.showProgressIndicator, Flushbar.progressIndicatorController, Flushbar.progressIndicatorBackgroundColor, Flushbar.progressIndicatorValueColor, Flushbar.isDismissible, Flushbar.aroundPadding, Flushbar.borderRadius, Flushbar.userInputForm, Flushbar.animationDuration, Flushbar._flushbarRoute, Flushbar._result

Maintenance suggestions

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package.

Common filename patterns include main.dart, example.dart, and flushbar.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.52.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies