Since the beginning of mobile app development, we’ve always heard about SnackBar (Flutter), Toast (Java Android Development), and SwiftToast when it comes to iOS App development. Now, this package called “FlushBar” brings an amazing feature that lets you do more than just displaying a toast or snackbar.
A FlushBar is simply a widget that gives you the ability to further customize your toast, snackbar, or swifttoast to a more flexible and dynamic way. The FlushBar is simply a flexible widget to show notification to your users, as this plugin gives you the ability to customize your text, button, duration, animations, and much more. For Android devs, it is made to replace Snackbars and Toasts.
You’ll find the instructions and guide on how to use the FlushBar HERE. Customizing the FlushBar is a bit complex, as it requires a lot of properties. Let’s walk you through some quick examples of how you can use the Flutter FlushBar package.
The video below will walk you through the step by step guide on how to use the FlushBar in flutter
Not still satisfied with the result? Her an advanced video from Javier González Rodríguez on YouTube, as He walks you through a better usage of this powerful plugin.
Attributes
| Property | What does it do |
|---|---|
title | The title displayed to the user |
message | The message displayed to the user. |
titleText | Replaces [title]. Although this accepts a [widget], it is meant to receive [Text] or [RichText] |
messageText | Replaces [message]. Although this accepts a [widget], it is meant to receive [Text] or [RichText] |
icon | You can use any widget here, but I recommend [Icon] or [Image] as indication of what kind of message you are displaying. Other widgets may break the layout |
shouldIconPulse | An option to animate the icon (if present). Defaults to true. |
maxWidth | Used to limit Flushbar width (usually on large screens) |
margin | Adds a custom margin to Flushbar |
padding | Adds a custom padding to Flushbar. The default follows material design guide line |
borderRadius | Adds a radius to all corners of Flushbar. Best combined with [margin]. I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor] |
borderColor | Adds a border to every side of Flushbar. I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor] |
borderWidth | Changes the width of the border if [borderColor] is specified |
backgroundColor | Flushbar background color. Will be ignored if [backgroundGradient] is not null. |
leftBarIndicatorColor | If not null, shows a left vertical bar to better indicate the humor of the notification. It is not possible to use it with a [Form] and I do not recommend using it with [LinearProgressIndicator]. |
boxShadows | The shadows generated by Flushbar. Leave it null if you don’t want a shadow. You can use more than one if you feel the need. Check this example |
backgroundGradient | Flushbar background gradient. Makes [backgroundColor] be ignored. |
mainButton | Use if you need an action from the user. [FlatButton] is recommended here. |
onTap | A callback that registers the user’s click anywhere. An alternative to [mainButton] |
duration | How long until Flushbar will hide itself (be dismissed). To make it indefinite, leave it null. |
isDismissible | Determines if the user can swipe or click the overlay (if [routeBlur] > 0) to dismiss. It is recommended that you set [duration] != null if this is false. If the user swipes to dismiss or clicks the overlay, no value will be returned. |
dismissDirection | FlushbarDismissDirection.VERTICAL by default. Can also be [FlushbarDismissDirection.HORIZONTAL] in which case both left and right dismiss are allowed. |
flushbarPosition | Flushbar can be based on [FlushbarPosition.TOP] or on [FlushbarPosition.BOTTOM] of your screen. [FlushbarPosition.BOTTOM] is the default. |
flushbarStyle | Flushbar can be floating or be grounded to the edge of the screen. If grounded, I do not recommend using [margin] or [borderRadius]. [FlushbarStyle.FLOATING] is the default |
forwardAnimationCurve | The [Curve] animation used when show() is called. [Curves.easeOut] is default. |
reverseAnimationCurve | The [Curve] animation used when dismiss() is called. [Curves.fastOutSlowIn] is default. |
animationDuration | Use it to speed up or slow down the animation duration |
showProgressIndicator | true if you want to show a [LinearProgressIndicator]. If [progressIndicatorController] is null, an infinite progress indicator will be shown |
progressIndicatorController | An optional [AnimationController] when you want to control the progress of your [LinearProgressIndicator]. You are responsible for controlling the progress |
progressIndicatorBackgroundColor | a [LinearProgressIndicator] configuration parameter. |
progressIndicatorValueColor | a [LinearProgressIndicator] configuration parameter. |
barBlur | Default is 0.0. If different than 0.0, blurs only Flushbar’s background. To take effect, make sure your [backgroundColor] has some opacity. The greater the value, the greater the blur. |
blockBackgroundInteraction | Determines if user can interact with the screen behind it. If this is false, [routeBlur] and [routeColor] will be ignored |
routeBlur | Default is 0.0. If different than 0.0, creates a blurred overlay that prevents the user from interacting with the screen. The greater the value, the greater the blur. It does not take effect if [blockBackgroundInteraction] is false |
routeColor | Default is [Colors.transparent]. Only takes effect if [routeBlur] > 0.0. Make sure you use a color with transparency e.g. Colors.grey[600].withOpacity(0.2). It does not take effect if [blockBackgroundInteraction] is false |
userInputForm | A [TextFormField] in case you want a simple user input. Every other widget is ignored if this is not null. |
onStatusChanged | a callback for you to listen to the different Flushbar status |
