flutter_flushbar

Use this package if you need more customization when notifying your user.

See the install instructions.

Quick reference

Since customization requires a lot of properties, here is a quick cheatsheet:

Quick tip

If you use a lot of those properties, it makes sense to make a factory to help with your Flushbar's base appearance. Things like shadows, padding, margins, text styles usually don't change within the app. Take a look at FlushbarHelper class and use it as an example.

Getting Started

The examples bellow were updated for version 1.3.0. Changes might have been made. See the changelog if any of the examples do not reflect Flushbar's current state.

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 _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Flushbar(
                  flushbarPosition: FlushbarPosition.TOP,
                  backgroundColor: Colors.red,
                  duration: Duration(seconds: 3),
                  titleText: Text(
                    "Oops, No Internet Connection",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0,
                        color: Colors.white,
                        fontFamily: "ShadowsIntoLightTwo"),
                  ),
                  messageText: Text(
                    "Make sure wifi or cellular data is turned on and then try again.",
                    style: TextStyle(
                        fontSize: 16.0,
                        color: Colors.white,
                        fontFamily: "ShadowsIntoLightTwo"),
                  ),
                )..show(context);
              },
              child: Text("Show Flushbar"),
            ),
          ],
        ),
      ),
    );
  }
}

Flushbar position

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

Flushbar(
  flushbarPosition: FlushbarPosition.TOP,
  title: "Oops, No Internet Connection",
  message: "Make sure wifi or cellular data is turned on and then try again.",)..show(context);

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.

Flushbar(
  title: "Oops, No Internet Connection",
  message: "Make sure wifi or cellular data is turned on and then try again.",
  duration: Duration(seconds: 3),
  isDismissible: false,
)..show(context);

Show and dismiss animation curves

You can set custom animation curves using forwardAnimationCurve and reverseAnimationCurve.

Flushbar(
  forwardAnimationCurve: Curves.decelerate,
  reverseAnimationCurve: Curves.easeOut,
  title: "Oops, No Internet Connection",
  message: "Make sure wifi or cellular data is turned on and then try again.",
)..show(context);