Flutter – Flushbar

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.

Implementation:

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';

Simple Snackbar with Flushbar:

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:

Snackbar with Icons:

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:

Customized Flushbar:

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 dismissible 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.

Using Flushbar Helpers:

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:

Flushbar with Buttons:

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: