Flutter SnackBar component plugin

original

https://medium.com/flutterdevs/snackbar-widget-in-flutter-476bb2431538

Code

https://github.com/flutter-devs/flutter_snackbar_demo

refer to

https://pub.flutter-io.cn/packages/another_flushbar

text

Learn how to create static and custom SnackBar widgets in your Flutter app

Whenever you write code to build anything in Flutter, it will be in a widget. Each element on the screen of a Flutter application is a widget. The perspective of the screen is completely dependent on the selection and grouping of the widgets used to build the application. In addition, the structure of the application code is a tree of widgets.

In this blog, we will learn about static and custom SnackBar widgets and their functions in flutter. We will see the implementation of a simple demo program SnackBar Widget

https://pub.flutter-io.cn/packages/another_flushbar

In Flutter, SnackBar is a small tool that can pop up a quick message in your application lightly and briefly mark the user when something happens. With SnackBar, you can pop up a message at the bottom of your app for a few seconds.

By default, SnackBar is displayed at the bottom of the screen. When the specified time is completed, it will disappear from the screen. We can make a custom SnackBar and it contains some actions, allowing users to add or delete any actions and images. SnackBar needs a Scaffold, with a Scaffold instance, your SnackBar will pop up immediately. By using scaffold, you can easily get a reference to scaffold anywhere in the widget tree. Function.

Demo module:

How to implement the code in the dart file:

You need to implement it in your code separately:

First, in this Dart file, I created two buttons, the first button is used to display the default SnackBar, and the second button is used to customize the SnackBar.

Default SnackBar Default SnackBar

There are two steps to display SnackBar. First, you must create a SnackBar, which can be done by calling the following constructor. Very simple and easy to use. This is the password.

final snackBar = SnackBar(content: Text('Yay! A DefaultSnackBar!'));
ScaffoldMessenger._of_(context).showSnackBar(snackBar);

But by default, some of our requirements are not met. So May custom SnackBar is doing this. For custom SnackBar, I have to use Flushbar dependency. It is a very harmonious dependency to design your custom SnackBar according to your choice.

First, add the dependency of SnackBar in pubspec.yaml

another_flushbar: ^1.10.24

Then you must create a method to display the custom SnackBar.

void showFloatingFlushbar( {@required BuildContext? context,
  @required String? message,
  @required bool? isError}){
  Flushbar? flush;
  bool? _wasButtonClicked;
  flush = Flushbar<bool>(
    title: "Hey User",
    message: message,
    backgroundColor: isError! ? Colors._red_ : Colors._blueAccent_,
    duration: Duration(seconds: 3),
    margin: EdgeInsets.all(20),


    icon: Icon(
      Icons._info_outline_,
      color: Colors._white_,),
    mainButton: FlatButton(
      onPressed: () {
        flush!.dismiss(true); _// result = true_ },
      child: Text(
        "ADD",
        style: TextStyle(color: Colors._amber_),
      ),
    ),) _// <bool> is the type of the result passed to dismiss() and collected by show().then((result){})_ ..show(context!).then((result) {

    });
}

When we run the application, we should get the screen output, just like the screenshot below.

Custom SnackBar Custom SnackBar

Full code:

import 'package:another_flushbar/flushbar.dart';
import 'package:flutter/material.dart';

class SnackBarView extends StatefulWidget {
  const SnackBarView({Key? key}) : super(key: key);

  @override
  _SnackBarViewState createState() => _SnackBarViewState();
}

class _SnackBarViewState extends State<SnackBarView> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Column(
       mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _buildSnackBarButton()
        ],
      ),
    );
  }

  Widget _buildSnackBarButton() {
    return Column(
      children: [
        Center(
          child: InkWell(
            onTap: (){
              final snackBar = SnackBar(content: Text('Yay! A Default SnackBar!'));
              ScaffoldMessenger._of_(context).showSnackBar(snackBar);
            },
            child: Container(
              height: 40,
              width: 180,
              decoration: BoxDecoration(
                color: Colors._pinkAccent_,
                borderRadius: BorderRadius.all(Radius.circular(15))
              ),
              child: Center(
                child: Text("SnackBar",
                style: TextStyle(
                  color: Colors._white_,
                  fontSize: 16,

                ),),
              ),

            ),
          ),
        ),
        SizedBox(height: 10,),
        Center(
          child: InkWell(
            onTap: (){
              showFloatingFlushbar(context: context,
                  message: 'Custom Snackbar!',
                  isError: false);
              _// showSnackBar(
              //     context: context,
              //     message: 'Custom Snackbar!',
              //     isError: false);_ },
            child: Container(
              height: 40,
              width: 180,
              decoration: BoxDecoration(
                color: Colors._pinkAccent_,
                borderRadius: BorderRadius.all(Radius.circular(15))
              ),
              child: Center(
                child: Text("Custom SnackBar",

                style: TextStyle(
                  color: Colors._white_,
                  fontSize: 16,

                ),),
              ),

            ),
          ),
        ),
      ],
    );
  }
}

void showFloatingFlushbar( {@required BuildContext? context,
  @required String? message,
  @required bool? isError}){
  Flushbar? flush;
  bool? _wasButtonClicked;
  flush = Flushbar<bool>(
    title: "Hey User",
    message: message,
    backgroundColor: isError! ? Colors._red_ : Colors._blueAccent_,
    duration: Duration(seconds: 3),
    margin: EdgeInsets.all(20),


    icon: Icon(
      Icons._info_outline_,
      color: Colors._white_,),
    mainButton: FlatButton(
      onPressed: () {
        flush!.dismiss(true); _// result = true_ },
      child: Text(
        "ADD",
        style: TextStyle(color: Colors._amber_),
      ),
    ),) _// <bool> is the type of the result passed to dismiss() and collected by show().then((result){})_ ..show(context!).then((result) {

    });
}

void showSnackBar(
    {@required BuildContext? context,
    @required String? message,
    @required bool? isError}) {
  final snackBar = SnackBar(
    content: Text(
      message!,
      style: TextStyle(fontSize: 14.0, fontWeight: FontWeight._normal_),
    ),
    duration: Duration(seconds: 3),
    backgroundColor: isError! ? Colors._red_ : Colors._green_,
    width: 340.0,
    padding: const EdgeInsets.symmetric(
      horizontal: 8.0,
    ),
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),

    action: SnackBarAction(
      label: 'Undo',
      textColor: Colors._white_,
      onPressed: () {},
    ),
  );
  ScaffoldMessenger._of_(context!).showSnackBar(snackBar);
}

Conclusion:

In this article, I have briefly introduced the basic overview of the SnackBar widget, you can modify this code according to your choice. This is my little introduction to SnackBar Widget On User Interaction, which is working with Flutter.

I hope this blog will provide you with full information about trying to explore the SnackBar widget in your Flutter project.

If I did something wrong, please let me know in the comments and I am happy to improve.

Applause if this article is helpful to you.