How to create SnackBar in Flutter | SnackBar Tutorial

In this article, we will create and display different types of SnackBars in Flutter.

SnackBars in Flutter

SnackBars are used to briefly display some information or inform the user about an action. For instance, when a user deletes a mail or message you may want to inform the user about the action. Also, the user can undo the action he performed by the undo button in the Snackbar.


For creating a SnackBar, we use the following code.

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: content));

Inside the content field of SnackBar, we will pass the content. Any content can be passed inside it, but in practice, small messages with or without a button.


Simple SnackBar

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

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SnackBar Tutorial"),
      body: Center(
        child: Column(
          children: [
              onPressed: () {
                  const SnackBar(
                    content: Text("Welcome to AllAboutFlutter"),
              child: const Text("Create SnackBar"),


Custom SnackBar

There are many parameters to customize a SnackBar.

Modify the code as follows.

    behavior: SnackBarBehavior.floating,
    content: const Text("Welcome to AllAboutFlutter"),
    backgroundColor: Colors.orangeAccent,
    margin: const EdgeInsets.all(12.0),
    elevation: 2.0,
    duration: const Duration(seconds: 2),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),



In this tutorial, we learnt to create s simple SnackBar as well as a custom SnackBar.

Did you find this article valuable?

Support All About Flutter | Flutter and Dart by becoming a sponsor. Any amount is appreciated!