Flutter snackbar : A Complete Overview with Example

Flutter Snackbar is a widget that allows you to show messages to the user when they perform actions on the screen. For example, showing messages when the file is deleted, to undo a thing after deletion, and many more. In this entire tutorial, you will know how to implement a flutter snackbar in an easy way. You will know the most used attribute of the flutter snackbar class for manipulating snackbar.

How to create a Flutter Snackbar

To create a flutter snackbar you have to use Snackbar() class with content, action as an attribute of the class. Let’s create a simple snack bar using it. Execute the below lines of code to create a snackbar.

import 'package:flutter/material.dart';

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


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

class _MySnackbarAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("SnackBarApp"),
        ),
        body: SnackBarWidget(),
      ),
    );
  }
}

class SnackBarWidget extends StatelessWidget {
  const SnackBarWidget({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
        child: Text("Click Me"),
        onPressed: () {
          final snackbar = SnackBar(content: const Text("Text Button is Clicked"));

          ScaffoldMessenger.of(context).showSnackBar(snackbar);
        },
      ),
    );
  }
}

void main() {
  runApp(MySnackbarApp());
}

Explanation of the code

In the above entire code, you can see I have created two state widgets one is a stateful widget for returning the material app and the other stateless widget for SnackBar widget. Inside the SnackBarWidget I have created a text button that show snackbar message when you will click on it. I have called the SnackBar() widget inside the onPressed() attribute.  At last to show the snackbar message you have to call the showSnackBar() message. When you will run the above code you will get the following output.

How to manipulate Flutter Snackbar

There are many properties or attributes for the snackbar that allows you to manipulate it. These are action,animation,content, e.t.c. You will know about each of them in detail in this section.

1.content

It accepts the text widget for showing the text messages to the user.

Center(
      child: TextButton(
        child: Text("Click Me"),
        onPressed: () {
          final snackbar = SnackBar(content: const Text("Text Button is Clicked"));
          ScaffoldMessenger.of(context).showSnackBar(snackbar);
          
        },
      ),
    );

2. action

If you want to make the user take any action while the message is showing then you will use this attribute. You will call the SnackBarAction() for performing it. Use the below lines of code.

Center(
      child: TextButton(
        child: Text("Click Me"),
        onPressed: () {
          final snackbar = SnackBar(
              content: const Text("Text Button is Clicked"),
            action: SnackBarAction(
              label: "Action Button",
              onPressed: () {
                
              },
            ),

          );
          ScaffoldMessenger.of(context).showSnackBar(snackbar);

        },
      ),
    )

3. backgroundColor

It will change the background color of the snackbar. For example, If I want to change the background color to red then  I will use the following lines of code.

backgroundColor: Colors.red,

Output

4. duration

It allows you to keep snack bar messages open for a particular duration. Let’s keep open the snackbar message for 3 seconds. This attribute accepts Duration() function for passing the arguments. Add the below lines of code to change the duration for displaying snackbar to 3 seconds.

duration: Duration(seconds: 3),

5. margin

Margin is a styling thing for the snack bar. It let you give some empty space around the snackbar . But the margin can be used only when the behavior of the snack bar is set to float that is SnackBarBehavior.floating. Add the following lines of code.

behavior: SnackBarBehavior.floating,
margin: EdgeInsets.all(20),

Output

6. padding

If you want to add some space around the content and the action then you will use this attribute. Use the below lines of code to add some padding for the content.

7. shape

You can also add a border for the snackbar. Using the shape attribute you can add around, the flat border around the snack bar. For example, I want to add a border of the color black to the top and bottom. To do so I will use the below lines code.

shape: Border(
              top: BorderSide(color: Colors.black),
              bottom: BorderSide(color: Colors.black),
            ),

Output

8. width

It allows you to change the width of the snack bar. It accepts the double value.

Conclusion

Flutter Snackbar is very useful for user interaction. It allows you to tell the user what to do or what to not. These are examples of how to create and manipulate the flutter snackbar widget. I hope you have liked this complete tutorial. If you have any queries then you can contact us for more help.

Source:

Flutter Offical Documentation