SnackBar Widget – Flutter Widget Guide By Flutter Agency

SnackBar Widget – Flutter Widget Guide By Flutter Agency

What is SnackBar Widget?

SnackBar Widget is a widget to show a lightweight message at the bottom of the screen. It can also contain an optional action.

For display, a SnackBar in a flutter all you need to do is to add the following code in your action. The first block of code is to just display a SnackBar with a message. And the second block of code is to display SnackBar with an action button.

Snackbar Message

final snackBar = SnackBar(content: Text('Hello world'));
Scaffold.of(context).showSnackBar(snackBar);

Snackbar with message and button

final snackBar = SnackBar(
  content: Text('You can click me'),
  action: SnackBarAction(
    label: 'Show Toast',
    onPressed: () {
      // To do
    },
  ),
);

To display SnackBar create a Raised Button like below and we will display SnackBar in a onPressed() of RaisedButton Widget

  RaisedButton(
              onPressed: () {
                final snackBar = SnackBar(content: Text('Hello world!'));
                scaffold_state.currentState.showSnackBar(snackBar);
              },
              child: Text('Display Snack Bar'),
            ),

So Now, when the user clicks on the RaisedButton SnackBar will be displayed like below :

SnackBar Example

How to display SnackBar with action buttons.

Now we will move on to the implementation of SnackBar with an action button. So we will have a small change in the above code in which SnackBar will have a button. This code is giving action of displaying a toast message when the user clicks on the SnackBar button.

Create another Raised Button like below :

RaisedButton(
              onPressed: () {
                final snackBar = SnackBar(
                  content: Text('Click the button to show toast'),
                  action: SnackBarAction(
                    label: 'Show',
                    onPressed: () {
                      Fluttertoast.showToast(
                        msg: "Please Subscribe",
                        textColor: Colors.white,
                        toastLength: Toast.LENGTH_SHORT,
                        gravity: ToastGravity.BOTTOM,
                        backgroundColor: Colors.indigo,
                      );
                    },
                  ),
                );
                scaffold_state.currentState.showSnackBar(snackBar);
              },
              child: Text('Show SnackBar'),
            ),

In this example, some action is performed when the button is clicked. For example, this button click will display a Toast message asking users to Subscribe. The output will look like below :

When a user clicks on Show in a SnackBar user will get Toast Message like below

SnackBar with Action Button

Complete Source Code

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class Snackbarwidget extends StatefulWidget {
  Snackbarwidget({
    Key key,
    this.title,
  }) : super(key: key);
  final String title;

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

class _SnackbarwidgetState extends State<Snackbarwidget> {
  GlobalKey<ScaffoldState> scaffold_state = new GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     
      key: scaffold_state,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                final snackBar = SnackBar(content: Text('Hello world!'));
                scaffold_state.currentState.showSnackBar(snackBar);
              },
              child: Text('Display Snack Bar'),
            ),
            RaisedButton(
              onPressed: () {
                final snackBar = SnackBar(
                  content: Text('Click the button to show toast'),
                  action: SnackBarAction(
                    label: 'Show',
                    onPressed: () {
                      Fluttertoast.showToast(
                        msg: "Please Subscribe",
                        textColor: Colors.white,
                        toastLength: Toast.LENGTH_SHORT,
                        gravity: ToastGravity.BOTTOM,
                        backgroundColor: Colors.indigo,
                      );
                    },
                  ),
                );
                scaffold_state.currentState.showSnackBar(snackBar);
              },
              child: Text('Show Snackbar'),
            ),
          ],
        ),
      ),
    );
  }
}

In this article we have used ”  fluttertoast: 4.0.1 ” to show a Toast message to the user. Toast Messages are basically used to notify the user that some action has been performed.

Need further assistance with Flutter Development?

Do Contact Us !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.