How to Show Toast and Snackbar Message in Flutter

In this example, we are going to show you how to show toast message and snackbar message in Flutter App. These two message types are the easiest way to show messages to your user. You can also add action to snackbar message.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello This is Snackbar'),
  )
);

You can use ScaffoldMessenger.of(context).showSnackBar(snackbar_widget); to show the snackbar message in Flutter app. The output of the above code will look like below:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello This is Snackbar'),
    action: SnackBarAction(
        onPressed: (){ 
          
        },
        label: "DISMISS",
    ),
  )
);

You can also add an action on the Snackbar message. The output of the above code will look like below:

To show the Toast message in the Flutter app, first, add fluttertoast Flutter package in your project by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  fluttertoast: ^8.0.8

Now, show the toast message like below:

import 'package:fluttertoast/fluttertoast.dart';

Fluttertoast.showToast(
    msg: "This is Toast Message",
    toastLength: Toast.LENGTH_SHORT, //duration
    gravity: ToastGravity.BOTTOM, //location
    timeInSecForIosWeb: 1,
    backgroundColor: Colors.red, //background color
    textColor: Colors.white, //text Color
    fontSize: 16.0 //font size
);

The output of the code above will look like below:

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

void main(){
  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(
          appBar: AppBar( 
             title: Text("Flutter Snackbar/Toast"),
             backgroundColor: Colors.redAccent,
          ),
          body: Container(
             alignment: Alignment.center,
             padding: EdgeInsets.all(20),
             child: Column(
                 children:[
                      ElevatedButton(
                        onPressed: (){
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text('Hello This is Snackbar'),
                            )
                          );
                        },
                        child: Text("Show Snackbar"),
                    ),

                    ElevatedButton(
                        onPressed: (){
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text('Hello This is Snackbar'),
                              action: SnackBarAction(
                                 onPressed: (){ 
                                    
                                 },
                                 label: "DISMISS",
                              ),
                            )
                          );
                        },
                        child: Text("Show Snackbar with Action"),
                    ),

                    ElevatedButton(
                        onPressed: (){
                          Fluttertoast.showToast(
                              msg: "This is Toast Message",
                              toastLength: Toast.LENGTH_SHORT, //duration
                              gravity: ToastGravity.BOTTOM, //location
                              timeInSecForIosWeb: 1,
                              backgroundColor: Colors.red, //background color
                              textColor: Colors.white, //text Color
                              fontSize: 16.0 //font size
                          );
                        },
                        child: Text("Show Toast Message"),
                    )
                 ]
             )
          )
       );
  }
}