flushbar 0.5.4

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • new44

Flushbar

This is a flutter widget inspired by Flashbar. Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackbars. Development of Flushbar and Flashbar are totally separate. Although they look like each other, they work very differently. See the examples bellow. See the install instructions.

Getting Started

Since Flushbar is an offscreen widget, I made it to be wrapped in a Stack. Make sure Flushbar is the last child in the Stack.

A basic Flushbar

The most basic Flushbar uses title and a message. You can set your text and title latter if you don't have them on construction time.

  • Keep a reference to you flushbar. You are going to need it latter for customization.
class YourAwesomeApp extends StatelessWidget {

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YourAwesomeApp',
      home: new Scaffold(
        body: Stack(
          children: <Widget>[YourMainScreenWidget(), flushbar],
        ),
      ),
    );
  }
}

or

class YourAwesomeApp extends StatelessWidget {

  Flushbar flushbar = new Flushbar();

  @override
  Widget build(BuildContext context) {
    flushbar
          ..message = "Hey Ninja"
          ..message = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
          ..commitChanges();
    
    return MaterialApp(
      title: 'YourAwesomeApp',
      home: new Scaffold(
        body: Stack(
          children: <Widget>[YourMainScreenWidget(), flushbar],
        ),
      ),
    );
  }
}

Basic Example

Lets get crazy Flushbar

Here is how customized things can get.

Flushbar flushbar = new Flushbar(
    "Hey Ninja", //title
    "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(
      Icons.check,
      color: Colors.greenAccent,
    ),
    mainButton: FlatButton(
      onPressed: () {},
      child: Text("CLAP", style: TextStyle(color: Colors.amber),),
    ),
    linearProgressIndicator: LinearProgressIndicator(backgroundColor: 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[300],
          fontFamily: "ShadowsIntoLightTwo"),
    ),
  );

Complete Example

  • Note that every property is mutable after instantiation. The exceptions are flushbarPosition, reverseAnimationCurve, forwardAnimationCurve.
  • Don't forget to call commitChanges() or the changes won't take effect.
  • To deactivate any of those properties, pass null to it.
flushbar
      ..title = "Title"
      ..message = "Message"
      ..titleText = Text()
      ..messageText = Text()
      ..duration = Duration()
      ..icon = Icon()
      ..mainButton = FlatButton()
      ..backgroundColor = Color()
      ..backgroundGradient = LinearGradient()
      ..isDismissible = true
      ..shadowColor = Color()
      ..linearProgressIndicator = LinearProgressIndicator()
      ..onStatusChanged = (status) {}
      ..commitChanges();

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
Flushbar flushbar = new Flushbar(
    "Hey Ninja", //title
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry", //message
    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: 16.0,
          color: Colors.green[600],
          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.

Flushbar flushbar = new Flushbar(
    "Hey Ninja", //title
    "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
Flushbar flushbar = new Flushbar(
  "Hey Ninja", //title
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  backgroundGradient: new LinearGradient(colors: [Colors.blue, Colors.teal]),
  backgroundColor: Colors.red,
  shadowColor: Colors.blue[800],
  );

Background Gradient

Icon and button action

Lets put a Icon that has a PulseAnimation. Icons have this animation by default and cannot be changed as of this moment.

Flushbar flushbar = new Flushbar(
  "Hey Ninja", //title
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  icon: Icon(
    Icons.info_outline,
    color: Colors.blue,
  ),
  mainButton: FlatButton(
    onPressed: () {},
    child: Text("ADD", style: TextStyle(color: Colors.amber),),
  ),
);

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 bar is created.
Flushbar flushbar = new Flushbar(
  "Hey Ninja", //title
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  flushbarPosition: FlushbarPosition.TOP,
);

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. Use the isDismissible to change it.

Flushbar flushbar = new Flushbar(
  "Hey Ninja", //title
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  duration: Duration(seconds: 3),
  isDismissible: false,
);

//TODO add gif

Progress Indicator

If you are loading something, use a LinearProgressIndicator

Flushbar flushbar = new Flushbar(
  "Hey Ninja", //title
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  linearProgressIndicator: new LinearProgressIndicator(backgroundColor: Colors.grey[800],),
);

//TODO add gif

Show and dismiss animation curves

You can set custom animation curves using forwardAnimationCurve and reverseAnimationCurve.

  • These properties are immutable
Flushbar flushbar = new Flushbar(
  "Hey Ninja", //title
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
  forwardAnimationCurve: Curves.decelerate,
  reverseAnimationCurve: Curves.easeOut,
);

//TODO add gif

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 = new Flushbar(
  "Hey Ninja", //title
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry");

flushbar
   ..onStatusChanged = (FlushbarStatus status)
     {
       if(status == FlushbarStatus.DISMISSED){
         doSomething();
       }
     }
   ..commitChanges();

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

This example tries to mimic the Material Design style guide

flushbar
      ..userInputForm = Form(
          child: TextFormField(
        initialValue: "Initial Value",
        onFieldSubmitted: (String value) {
          flushbar.dismiss();
        },
        style: TextStyle(color: Colors.white),
        maxLength: 100,
        maxLines: 1,
        //maxLengthEnforced: ,
        decoration: InputDecoration(
            fillColor: Colors.white10,
            filled: true,
            icon: Icon(
              Icons.label,
              color: Colors.grey[500],
            ),
            border: UnderlineInputBorder(),
            helperText: "Helper Text",
            helperStyle: TextStyle(color: Colors.grey),
            labelText: "Label Text",
            labelStyle: TextStyle(color: Colors.grey)),
      ))
      ..commitChanges();

Bar input

Usage Sample

Since you are probably going to control your Flushbar from FirstScreen(), pass flushbar as an argument. Flushbar is an offscreen widget. It was made to be wrapped in a Stack. Make sure Flushbar is the last child in the Stack.

class YourAwesomeApp extends StatelessWidget {

  Flushbar flushbar = new Flushbar();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'YourAwesomeApp',
      home: new Scaffold(
        body: Stack(
          children: <Widget>[FirstScreen(flushbar), flushbar],
        ),
      ),
    );
  }
}

I created a helper class FlushbarMorph to help change the bar during the app lifetime. Fell free to create your own helper.

  • Remember to pass null to deactivate a widget.

class FlushbarMorph {
  /// Morph flushbar into a success notification.
  static Flushbar morphIntoSuccess(Flushbar flushbar,
      {@required String title, @required String message, Duration duration = const Duration(seconds: 3)}) {
    return flushbar
      ..title = title
      ..message = message
      ..icon = Icon(
        Icons.check_circle,
        color: Colors.green,
      )
      ..duration = duration
      ..mainButton = null
      ..linearProgressIndicator = null;
  }

  /// Morph flushbar into a information notification.
  static Flushbar morphIntoInfo(Flushbar flushbar,
      {@required String title, @required String message, Duration duration = const Duration(seconds: 3)}) {
    return flushbar
      ..title = title
      ..message = message
      ..icon = Icon(
        Icons.info_outline,
        color: Colors.blue,
      )
      ..duration = duration
      ..mainButton = null
      ..linearProgressIndicator = null;
  }

  /// Morph flushbar into a error notification.
  static Flushbar morphIntoError(Flushbar flushbar,
      {@required String title, @required String message, Duration duration = const Duration(seconds: 3)}) {
    return flushbar
      ..title = title
      ..message = message
      ..icon = Icon(
        Icons.warning,
        color: Colors.red,
      )
      ..duration = duration
      ..mainButton = null
      ..linearProgressIndicator = null;
  }

  /// Morph flushbar into a notification that can receive a user action through a button.
  static Flushbar morphIntoAction(Flushbar flushbar,
      {@required String title,
        @required String message,
        @required FlatButton button,
        Duration duration = const Duration(seconds: 3)}) {
    return flushbar
      ..title = title
      ..message = message
      ..icon = null
      ..duration = duration
      ..mainButton = button
      ..linearProgressIndicator = null;
  }

  /// Morph flushbar into a notification that shows the progress of a async computation.
  static Flushbar morphIntoLoading(Flushbar flushbar,
      {@required String title,
        @required String message,
        @required LinearProgressIndicator linearProgressIndicator,
        Duration duration = const Duration(seconds: 3)}) {
    return flushbar
      ..title = title
      ..message = message
      ..icon = Icon(
        Icons.cloud_upload,
        color: Colors.blue,
      )
      ..duration = duration
      ..mainButton = null
      ..linearProgressIndicator = linearProgressIndicator;
  }
}

Inside you MainScreenWidget use the reference to control it. Don't forget to commitChanges()

class FirstScreen extends StatelessWidget {
  FirstScreen(this.flushbar);

  final Flushbar flushbar;

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new FloatingActionButton(
          backgroundColor: Theme.of(context).accentColor,
          child: Icon(Icons.info_outline),
          onPressed: () {
            FlushbarHelper
                .changeToInfoFlushbar(flushbar,
                    title: "No connection",
                    message: "Your app is diconnected. Action not saved")
                .commitChanges();
            flushbar.show();
          },
        ),
      ),
    );
  }
}

[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:


dependencies:
  flushbar: "^0.5.4"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter packages get

Alternatively, your editor might support pub get or flutter packages 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
0.5.4 Jun 16, 2018 Go to the documentation of flushbar 0.5.4 Download flushbar 0.5.4 archive
0.5.2 Jun 5, 2018 Go to the documentation of flushbar 0.5.2 Download flushbar 0.5.2 archive
0.5.1 Jun 5, 2018 Go to the documentation of flushbar 0.5.1 Download flushbar 0.5.1 archive
0.5.0 Jun 5, 2018 Go to the documentation of flushbar 0.5.0 Download flushbar 0.5.0 archive
0.4.7 Jun 4, 2018 Go to the documentation of flushbar 0.4.7 Download flushbar 0.4.7 archive
0.4.5 Jun 3, 2018 Go to the documentation of flushbar 0.4.5 Download flushbar 0.4.5 archive
0.4.0 May 30, 2018 Go to the documentation of flushbar 0.4.0 Download flushbar 0.4.0 archive
0.3.1 May 27, 2018 Go to the documentation of flushbar 0.3.1 Download flushbar 0.3.1 archive
0.3.0 May 27, 2018 Go to the documentation of flushbar 0.3.0 Download flushbar 0.3.0 archive
0.2.6 May 26, 2018 Go to the documentation of flushbar 0.2.6 Download flushbar 0.2.6 archive

All 11 versions...

Analysis

We analyzed this package on Jun 19, 2018, and provided a score, details, and suggestions below. Analysis was completed with status tool failures using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3
  • Flutter: 0.5.4

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
0 / 100
Health:
Code health derived from static analysis. [more]
100 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
72 / 100
Overall score:
Weighted score of the above. [more]
44
Learn more about scoring.

Platforms

Detected platforms: unsure

Error(s) prevent platform classification:

Fix dependencies in pubspec.yaml.

Suggestions

  • Fix dependencies in pubspec.yaml.

    Running flutter packages pub upgrade failed with the following output:

    ERR: The current Dart SDK version is 2.0.0-dev.60.0.flutter-a5e41681e5.
     
     Because flushbar requires SDK version >=2.0.0-dev.52.0 <=2.0.0-dev.54.0.flutter-46ab040e58, version solving failed.
    
  • Fix platform conflicts.

    Error(s) prevent platform classification:

    Fix dependencies in pubspec.yaml.

  • Running dartdoc failed.

    Make sure dartdoc runs without any issues.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use flushbar.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 2 hints.

    Run flutter format to format lib/flushbar.dart.

    Run flutter format to format lib/flushbar_morph.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.52.0 <=2.0.0-dev.54.0.flutter-46ab040e58