Flutter - Flushbar - GeeksforGeeks

02 Jan, 2022
Flutter is loaded with libraries to make development easier with less code and more functionalities. We are back with another amazing Flutter package today. 
Showing snackbar in the apps is a common feature of today’s apps. Showing error messages when something goes wrong or sending important notifications to users from time to time is important to stay connected with users and keep them updated about the information. Although there was a simple snackbar package available to show snackbars on the application which was very limited in functionalities now we have an upgraded version of it.  
The flushbar is not limited to the snackbar functionality but we can customize it to make it as useful and beautiful as possible. To use the flushbar we are going to use the awesome another_flushbar package which supports null safety in Flutter. In this article, we will learn how to create different types of snackbars easily and fastly.
Step 1: Add package.
To use the package first we need to install it, to do so add dependency in the pubspec.yaml file.
Dart
dependencies:  another_flushbar: ^1.10.28
Then, run pub get in the terminal to install it. 
Step 2: Import the Library.
Import the library to the file in which you have to add the snackbar feature as:
Dart
import 'package:flushbar/flushbar.dart';import 'package:flushbar/flushbar_helper.dart';
The simple flushbar is just a snackbar with an information message and title. As you can see in the below code of simple flushbar, how simple is its code? We created a simple show_Simple_Snackbar function that shows the widget Flushbar defined inside. Here, we are adding simple messages and text. You can customize the text give it a size, weight, style, etc. Flushbar also contains titleText and message text property which are widgets but in the below code, we used String title and String message giving it the duration of 3 seconds to be on the screen.
Dart
void show_Simple_Snackbar(BuildContext context) {    Flushbar(      duration: Duration(seconds: 3),      title: "This is simple flushbar",      message: "Hey, you are a registered user now.",    )..show(context);  }
Output:
Sometimes showing only text doesn’t look good. You want to say more. It can be done through icons, which add more meaning to the text and make UI better. Sometimes, we also need to show different kinds of information like warnings, error messages along with their respective icons on the snackbar. This is very easy using Flushbar, you can add any icon and customize it according to your choice with just a few lines of code.
Dart
void show_Icon_Flushbar(BuildContext context) {    Flushbar(      icon: Icon(        Icons.email_outlined,        color: Colors.white,        size: 30,      ),      backgroundColor: Color(0xFF0277BD),      duration: Duration(seconds: 4),      message: "This email is already registered.",      messageSize: 18,      titleText: Text("Flushbar with Icon.",          style: TextStyle(              fontSize: 16, fontWeight: FontWeight.bold,             color: Colors.white)),    )..show(context);  }
Output:
Well, showing snackbar has gone to a different level now. It’s not just a simple snackbar, it’s a matter of creativity now. You can customize the snackbar using the Flushbar library that might include a floating snackbar, snackbar with different colors, styles, etc. You are not limited to using creativity.  You can play with the parameters of Flushbar like giving rounded borders, adding animation to it, and much more. In the below example, I designed the snackbar with gradient colors and gave the box-shadow. Added animation to make it smooth, and gave a dismissable horizontal direction to it.
Dart
void show_Custom_Flushbar(BuildContext context) {    Flushbar(      duration: Duration(seconds: 3),      margin: EdgeInsets.all(8),      padding: EdgeInsets.all(10),        backgroundGradient: LinearGradient(        colors: [          Colors.pink.shade500,          Colors.pink.shade300,          Colors.pink.shade100        ],        stops: [0.4, 0.7, 1],      ),      boxShadows: [        BoxShadow(          color: Colors.black45,          offset: Offset(3, 3),          blurRadius: 3,        ),      ],      dismissDirection: FlushbarDismissDirection.HORIZONTAL,      forwardAnimationCurve: Curves.fastLinearToSlowEaseIn,      title: 'This is a floating Flushbar',      message: 'Welcome to Flutter community.',      messageSize: 17,    )..show(context);  }
Output:
However, Flushbar’s creativity doesn’t stop there. You can explore its more properties if you want to go crazier.
Previously displaying an error, or success message was a difficult task and time taking process. For this reason, the Flushbar widget includes helpers. It is a simple function that creates a cool snackbar to save you time. Let’s see how much shorter it is to create the snackbar “Information Flushbar” with a helper.
Dart
void show_FlushbarHelper(BuildContext context) {    FlushbarHelper.createInformation(        title: "Flushbar Helper",      message: "This is illegal action.")      ..show(context);  }
Output:
Sometimes, after showing an error message, you want to redirect the user to a different page as per the error. So, there could be any button to click on with the error. What if you can show the button with the snackbar? Is it possible? Yes, you can do this using mainButton property of Flushbar. Like in the below-shown code, I am wrapping the Text “Click me”, inside a GestureDetector which is a child of ButtonBar widget assigned to mainButton property of Flushbar. When this snackbar is shown, the user can click on the text and it will do whatever you give inside the onTap or onPressed whichever property.
Dart
void show_Button_Flushbar(BuildContext context) {    Flushbar(      mainButton: ButtonBar(        children: [          GestureDetector(            onTap: () {              print("You clicked me!");            },            child: Text(              "Click me",              style: TextStyle(color: Colors.white),            ),          )        ],      ),      backgroundColor: Colors.black,      title: "Flushbar with Button",      message: "We require additional information.",      messageSize: 17,      duration: Duration(seconds: 4),    )..show(context);  }}
Output:
Even though Flutter contains its default Snackbar, using Flushbar should be preferred. Flushbar involves less boilerplate code and contains unlimited features to add to. You can style every parameter of the Flushbar widget, and it will surprise you with its ease. Whenever you want to show something more than an error message or success message go for Flushbar library.
Complete Flushbar Tutorial Code:
Dart
import 'package:flutter/material.dart';import 'package:another_flushbar/flushbar.dart';import 'package:another_flushbar/flushbar_helper.dart';  void main() {  runApp(const MyApp());}  class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      title: 'Flutter Flushbar Tutorial',      theme: ThemeData(        primarySwatch: Colors.green,      ),      home: MyHomePage(),    );  }}  class MyHomePage extends StatefulWidget {  @override  State<MyHomePage> createState() => _MyHomePageState();}  class _MyHomePageState extends State<MyHomePage> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: Text("GeeksForGeeks"), centerTitle: true),      body: Center(        child: Column(          children: [            SizedBox(              height: 40,            ),            ElevatedButton(                onPressed: () {                                      // invoking show_Simple_Snackbar function                  show_Simple_Snackbar(context);                },                child: Text("Simple Snackbar with Flushbar")),            ElevatedButton(                onPressed: () {                                      // calling function to show flushbar with icon                  show_Icon_Flushbar(context);                },                child: Text("Flushbar with Icon")),            ElevatedButton(                onPressed: () {                  //calling show Customized Flushbar                  show_Custom_Flushbar(context);                },                child: Text("Flushbar with gradient colors")),            ElevatedButton(                onPressed: () {                                      // calling function to FlushbarHelper                  show_FlushbarHelper(context);                },                child: Text("Flushbar Helper")),            ElevatedButton(                onPressed: () {                                      // calling function to show flushbar with button                  show_Button_Flushbar(context);                },                child: Text("Flushbar with Button"))          ],        ),      ),    );  }    void show_Simple_Snackbar(BuildContext context) {    Flushbar(      duration: Duration(seconds: 3),      title: "This is simple flushbar",      message: "Hey, you are a registered user now.",    )..show(context);  }    void show_Icon_Flushbar(BuildContext context) {    Flushbar(      icon: Icon(        Icons.email_outlined,        color: Colors.white,        size: 30,      ),      backgroundColor: Color(0xFF0277BD),      duration: Duration(seconds: 4),      message: "This email is already registered.",      messageSize: 18,      titleText: Text("Flushbar with Icon.",          style: TextStyle(              fontSize: 16,            fontWeight: FontWeight.bold,            color: Colors.white)),    )..show(context);  }    void show_Custom_Flushbar(BuildContext context) {    Flushbar(      duration: Duration(seconds: 3),      margin: EdgeInsets.all(8),      padding: EdgeInsets.all(10),        backgroundGradient: LinearGradient(        colors: [          Colors.pink.shade500,          Colors.pink.shade300,          Colors.pink.shade100        ],        stops: [0.4, 0.7, 1],      ),      boxShadows: [        BoxShadow(          color: Colors.black45,          offset: Offset(3, 3),          blurRadius: 3,        ),      ],              // All of the previous Flushbars could be dismissed      // by swiping to any direction      dismissDirection: FlushbarDismissDirection.HORIZONTAL,              // The default curve is Curves.easeOut      forwardAnimationCurve: Curves.fastLinearToSlowEaseIn,      title: 'This is a floating Flushbar',      message: 'Welcome to Flutter community.',      messageSize: 17,    )..show(context);  }    void show_FlushbarHelper(BuildContext context) {    FlushbarHelper.createInformation(        title: "Flushbar Helper", message: "This is illegal action.")      ..show(context);  }    void show_Button_Flushbar(BuildContext context) {    Flushbar(      mainButton: ButtonBar(        children: [          GestureDetector(            onTap: () {              print("You clicked me!");            },            child: Text(              "Click me",              style: TextStyle(color: Colors.white),            ),          )        ],      ),      backgroundColor: Colors.black,      title: "Flushbar with Button",      message: "We require additional information.",      messageSize: 17,      duration: Duration(seconds: 4),    )..show(context);  }}
Output:
Flutter
Flutter UI-components
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Flexbox-Layout in Android
How to Post Data to API using Retrofit in Android?
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar