3 min read

In Flutter, the Toast is a small message that typically appears at the bottom of the screen and disappears on its own after the specified time. It is used to let users know about the action they have performed. Adding the Toast in your Flutter app helps you improve the user experience of the app. So in this tutorial, we’ll learn how to show toast in Flutter.

Here’s what we’ll cover:

The Need of Toast in Flutter

Sometimes, due to bad UI design or some other reason, it happens that users are unaware of the action they have performed. For example, a customized button (with no ripple effect) can make users confused whether they have clicked on a button. Thus, a Toast message helps you improve the overall user experience of your app by showing a message that confirms the user’s action.

TLDR: It’s always a good idea to let users know about any critical action they have performed such as payment or deletion of any vital data.

Ways to Show Toast in Flutter

To show Toast in Flutter, there are mainly two ways:

  1. Using SnackBar
  2. Using fluttertoast plugin

You can use any of the above based on your requirements.

1. Using SnackBar

To show a Toast in Flutter, you can use the SnackBar. The SnackBar is the correct/official way of displaying Toast as per the Material Design guideline.

To show toast using snackbar:

Step 1: Add the button (ElevatedButton) if you haven’t already added it.

Step 2: Inside the onPressed method of a button, create a SnackBar.

Step 3: Just in the next line, add the ScaffoldMessenger, call the showSnackBar method and pass the SnackBar created previously.

Code Example: 

// Step 1
ElevatedButton(
  onPressed: () {
    // Step 2
    var snackBar = SnackBar(content: Text('Hello, I am here'));
    // Step 3
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  },
  child: const Text(
    'Show SnackBar Message',
    style: TextStyle(fontSize: 24),
  ),
),

Output:

2. Using fluttertoast Plugin

If you want to display the Toast in the exact THE Toast way, you can use the fluttertoast plugin.

Steps to show Toast using fluttertoast plugin:

Step 1: Go to the pubspec.yaml file and the dependency. 

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  fluttertoast: ^8.0.8 # <-- SEE HERE

Step 2: Add the button (ElevatedButton) if you haven’t already added it.

Step 3: Inside the onPressed method of a button, call the. Fluttertoast.showToast method with a message to be displayed.

Code Example: 

// Step 2
ElevatedButton(
  onPressed: () {
    // Step 3
    Fluttertoast.showToast(
      msg: "THE toast message",
      toastLength: Toast.LENGTH_SHORT,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0,
    );
  },
  child: const Text(
    'Show Toast Message',
    style: TextStyle(fontSize: 24),
  ),
),

Output:

Conclusion

In this tutorial, we learned how to show toast in Flutter with practical examples. We first saw the need of adding the Toast in Flutter and then saw the two different ways that include the SnackBar and the fluttertoast plugin to display the Toast in Flutter.

Would you like to check other interesting Flutter tutorials?

TextField Initial Value in Flutter: Top 3 Ways You Should Know (2022)
3 Ways to Add ListView inside Column in Flutter