Creating a Snackbar in Flutter

Flutter’s Snackbar widget lets you show a pop-up notification that users may close from within your application.

It is employed to display to users whether specific activities occur in our programmes.

For instance, if the user login process fails for some reason, we can use the snackbar to tell the user to try again. It appears on the screen and has additional functions like the ability to reverse a previously executed action.

Snackbar briefly displays the educational message before it automatically disappears at the end of the allotted time. The ideal onscreen duration for a snackbar is 5 to 10 seconds. It is offered in the flutter libraries’ material package.

You must import “package:flutter/material.dart” to use a snackbar. Syntax of the snackbar is given below.

SnackBar({Key key, 
@required Widget content, 
Color backgroundColor, 
double elevation, 
EdgeInsetsGeometry margin, 
EdgeInsetsGeometry padding, 
double width, 
ShapeBorder shape, 
SnackBarBehavior behavior, 
SnackBarAction action, 
Duration duration: _snackBarDisplayDuration, 
Animation<double> animation, 
VoidCallback onVisible})

Here are the properties descriptions

  • action: Action to perform based on snackbar.
  • animation: Entry and the exit animation of snackbar.
  • backgroundcolor: Snackbar background color
  • behavior: Behavior and location of snackbar.
  • content: Content of snackbar.
  • duration: The amount of time snackbar should be displayed.
  • elevation: Elevates the snackbar by increasing shadow.
  • margin: Space around snackbar.
  • onVisible: Called the first time that the snackbar is visible within a scaffold.
  • padding: space around content inside snackbar.
  • shape: Shape of snackbar.
  • width: Width of snackbar.

Here is the basic example of the snackbar given below.

class SnackbarDisplay extends StatefulWidget {
  @override
  SnackbarDisplayState createState() => SnackbarDisplayState();
}

class SnackbarDisplayState extends State<SnackbarDisplay> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Snackbar Demo'),
          automaticallyImplyLeading: false,
        ),
        body: Center(
            child: Column(
          children: [
            Container(
              padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
              margin: EdgeInsets.fromLTRB(5, 5, 5, 0),
              child: TextButton(
                style: TextButton.styleFrom(
                  shadowColor: Colors.black,
                  textStyle: TextStyle(fontSize: 20),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  backgroundColor: Colors.black45,
                ),
                onPressed: () async {
                  final snackBar = SnackBar(
                    content: Text('This is a snackbar'),
                  );
                  ScaffoldMessenger.of(context).showSnackBar(snackBar);
                },
                child: Text(
                  "Show Snackbar",
                  style: TextStyle(color: Colors.white, fontSize: 12),
                ),
              ),
            ),
          ],
        )));
  }
}

The snackbar is also customizable. Similar to changing a colour or adding a button, you may alter the snackbar’s duration. In order for you to customise it to meet your needs.

final snackBar = SnackBar(
  content: Text('This is a customize snackbar'),
  backgroundColor: Colors.blue,
  duration: Duration(seconds: 3),
  action: SnackBarAction(
    label: 'Dismiss',
    onPressed: () {
      // Perform action when the action button is pressed
    },
  ),
);

That code can be added to the onPressed method.

Your Flutter application’s snackbar has been successfully established. Snackbars are a fantastic method to give users momentary feedback or notifications. To improve the user experience, feel free to test out various customizations.

Recall that snackbars are merely one of the numerous UI elements offered by Flutter. For Flutter to help you create incredible applications, keep exploring and experimenting!

Related Posts

StartActivityForResult in Flutter

Custom Tabbar in Flutter

Bottom Tab Bar in Flutter

Tabbar with image in flutter

Simple Tabbar in Flutter

Progress Bars Example in Flutter

Wave Design Template Android App

Highlights of App:

Wave Design Application is a Android Mobile Application. It has really clean and eye-catching interfaces with a perfect color scheme. In this App, I developed this

template for Android Developer who can develop waves android mobile application. It is very clear des‌ign of waves app.

In that App, I developed Cardview, RecycleView, XML Design of that App, Custom Adapter of Recycleview, Click Event of Cardview, Snackbar. Also Added Waves design and

Blob Design for New Interface of this App. So In that things So many feature we can develop on your App.

Screenshot of the App :

Wave Design Apk :

https://www.dropbox.com/s/2sma1nn4zlzaenq/Wave_Design_V1.apk?dl=0

I hope you can check this APK and Buy this project for create your projects.