Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

What Is A FlushBar in Flutter? Display customized SnackBar

June 23, 2020
in Flutter Widgets
6 min read
What Is A FlushBar in Flutter? Display customized SnackBar

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.

RELATED FLUTTER RESOURCES

Understanding The Flutter ListView Widget

How To Build A Code Editor App In Flutter with code_editor Plugin

Flutter Form & FormField Widget – Implementation & Example

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.

ADVERTISEMENT

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

PropertyWhat does it do
titleThe title displayed to the user
messageThe message displayed to the user.
titleTextReplaces [title]. Although this accepts a [widget], it is meant to receive [Text] or [RichText]
messageTextReplaces [message]. Although this accepts a [widget], it is meant to receive [Text] or [RichText]
iconYou 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
shouldIconPulseAn option to animate the icon (if present). Defaults to true.
maxWidthUsed to limit Flushbar width (usually on large screens)
marginAdds a custom margin to Flushbar
paddingAdds a custom padding to Flushbar. The default follows material design guide line
borderRadiusAdds a radius to all corners of Flushbar. Best combined with [margin]. I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor]
borderColorAdds a border to every side of Flushbar. I do not recommend using it with [showProgressIndicator] or [leftBarIndicatorColor]
borderWidthChanges the width of the border if [borderColor] is specified
backgroundColorFlushbar background color. Will be ignored if [backgroundGradient] is not null.
leftBarIndicatorColorIf 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].
boxShadowsThe 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
backgroundGradientFlushbar background gradient. Makes [backgroundColor] be ignored.
mainButtonUse if you need an action from the user. [FlatButton] is recommended here.
onTapA callback that registers the user’s click anywhere. An alternative to [mainButton]
durationHow long until Flushbar will hide itself (be dismissed). To make it indefinite, leave it null.
isDismissibleDetermines 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.
dismissDirectionFlushbarDismissDirection.VERTICAL by default. Can also be [FlushbarDismissDirection.HORIZONTAL] in which case both left and right dismiss are allowed.
flushbarPositionFlushbar can be based on [FlushbarPosition.TOP] or on [FlushbarPosition.BOTTOM] of your screen. [FlushbarPosition.BOTTOM] is the default.
flushbarStyleFlushbar 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
forwardAnimationCurveThe [Curve] animation used when show() is called. [Curves.easeOut] is default.
reverseAnimationCurveThe [Curve] animation used when dismiss() is called. [Curves.fastOutSlowIn] is default.
animationDurationUse it to speed up or slow down the animation duration
showProgressIndicatortrue if you want to show a [LinearProgressIndicator]. If [progressIndicatorController] is null, an infinite progress indicator will be shown
progressIndicatorControllerAn optional [AnimationController] when you want to control the progress of your [LinearProgressIndicator]. You are responsible for controlling the progress
progressIndicatorBackgroundColora [LinearProgressIndicator] configuration parameter.
progressIndicatorValueColora [LinearProgressIndicator] configuration parameter.
barBlurDefault 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.
blockBackgroundInteractionDetermines if user can interact with the screen behind it. If this is false, [routeBlur] and [routeColor] will be ignored
routeBlurDefault 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
routeColorDefault 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
userInputFormA [TextFormField] in case you want a simple user input. Every other widget is ignored if this is not null.
onStatusChangeda callback for you to listen to the different Flushbar status

Custom widget for Flutter
https://github.com/AndreHaueisen/flushbar
133 forks.
753 stars.
54 open issues.
Recent commits:

  • [button] is now a [Widget] instead of [FlatButton]Removed generic type requirement to extend ObjectFixed bar blur clipping, andrehaueisen
  • Fixes example pictures, andrehaueisen
  • Fixes SDK version, andrehaueisen
  • With FLutter's 1.17 release, Flushbar 1.10 is now compatible with stable channel, andrehaueisen
  • Merge remote-tracking branch 'origin/master', andrehaueisen

RelatedFlutter Resource

fLUTTER ListView builder seperated
Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton
Flutter Widgets

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

July 27, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
Understanding the Flutter COntainer
Flutter Widgets

Container Widget & Box Model in Flutter – All You Need To Know

July 22, 2020
Next Post
flutter material design icon

Get Material Design Icons for Flutter App Developments

responsive scaffold flutter

How to use the Responsive Scaffold Package

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Full Mobile Web Browser Created with Flutter + Source Code

A Full Mobile Web Browser Created with Flutter + Source Code

August 8, 2020
flutter_auth_buttons

Social Media Sign-In Buttons in Flutter (Facebook, Twitter, Google, etc)

June 27, 2020
flutter social share

Flutter Package to Share on Social Media

June 27, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In