How to Show Snackbar in Flutter

In this example, we will show you how to display the Snackbar message in Flutter. We have given different kinds of Snackbar examples, the simple one, Snackbar with action and style it. See the example below:

ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text("Hello This is FlutterCampus"))
);

You can replace the message text with your own. The output of this Snackbar looks like the below:

ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text("Hello This is FlutterCampus"),
      action: SnackBarAction(
          onPressed: (){
            //if action button is pressed
          },
          label: "OPEN WEBSITE",
      ),
    )
);

You can show Snackbar with the action using the above code. The output will look like the below:

ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text("Hello This is FlutterCampus"),
      backgroundColor: Colors.redAccent,
      elevation: 10, //shadow
    )
);

You can use the above code to style Snackbar. You can change the elevation and background color.

import 'package:flutter/material.dart';
Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          body: Container(
            padding: EdgeInsets.all(60),
            alignment: Alignment.center,
            child: Column(children: [
                 ElevatedButton(
                      onPressed: (){
                        ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text("Hello This is FlutterCampus"))
                        );
                      }, 
                      child: Text("Show Simple Snackbar"),
                 ),

                 ElevatedButton(
                      onPressed: (){
                        ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text("Hello This is FlutterCampus"),
                              backgroundColor: Colors.redAccent,
                              elevation: 10, //shadow
                            )
                        );
                      }, 
                      child: Text("Styled Snackbar"),
                 ),

                 ElevatedButton(
                      onPressed: (){
                        ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text("Hello This is FlutterCampus"),
                              action: SnackBarAction(
                                 onPressed: (){
                                    //if action button is pressed
                                 },
                                 label: "OPEN WEBSITE",
                              ),
                            )
                        );
                      }, 
                     child: Text("Show Snackbar with Action"),
                 ),
                 
            ],)
          )
       );
  }
}