Flutter Toast Message Example Tutorial

Toast is a flash message in a flutter, which displays some information to the user for a limited time

and it appears at the bottom of the screen and disappears. Generally, we use a flutter toast message to notify the user about some status of action performed. For example, the use sign-in to the app successfully or sign-in failed, so we use the flutter toast message to notify the user of such status.

In flutter, there is no specific widget available for toast, so we will use the fluttertoast package or dependency to display a toast message.

So in this tutorial, you will learn how to create and display a toast message in flutter using fluttertoast dependency.

You can also watch this video, If you don’t want to read the post

NOTE: This video is in Urdu/Hindi language

Creating Toast Message In Flutter

First of all, we need to add FlutterToast dependency to our project, so follow the below steps to add the dependency.

Using terminal to add the dependency:

Open your terminal in Android studio or Vs Code and run the following command


Source: fluttertoast

Using pubspec.yaml file to add the dependency:

Go to pubspec.yaml in your project directory and paste the following dependency below dependencies:


Now add this import line in dart file where you want to use flutter toast in your project


So your project is ready to show flutter toast and to show the toast message

call FlutterToast.ShowToast() and provide a message to msg in flutter toast like below


Note: All the below properties will completely work on devices with android version 10 and below. For devices with android version 11 and above, it will only use msg and toastLength remaining all properties will not work. Consider creating custom toast for android version 11 and above, which is explained below.

Flutter Toast Properties

You can customize your toast using different properties of flutter toast message

and these properties will help you to style and position your toast message.

  • msg
  • toastLength
  • gravity
  • fontSize
  • backgroundColor
  • textColor

As toast messages cannot be displayed directly, add the below code inside onPressed callback of any button or widget to see the output. In all the below examples we will show toast without context.


The msg property accepts a string value to be displayed to the users as a message.


This property accepts two values (Toast.LENGTH_LONG and Toast.LENGTH_SHORT), we use these values to change the duration of flutter toast displaying.


We use this property to change the position of the toast. It accepts constants of ToastGravity.

I am using ToastGravity.CENTER you can try the rest for yourself.


We use this property to change toast message font size, you can set font size according to your requirements.


It takes material color as value. We will use this property to change the background color of the toast message.

flutter toast message


We will use this property to change the text color of the toast message. It takes material color as value.

flutter toast message

Creating Custom Toast Message In Flutter

To create a custom toast in flutter we will use the same dependency ( FlutterToast ) which is used above. This dependency has incorporated another way of creating a toast message using buildcontext. Since we have already added the library and imported the package, let’s get to the code implementation.

We have to declare an object of class FToast which is provided in the dependency.

Now, we have to initialize the object with the current context in the initState() method.

It’s time to design our custom toast message. Let’s create a custom toast message using container widget and assign it to a variable of type widget.

Custom Toast Widget Code

To display the custom toast message created above we have to provide the above widget as child to fToast.ShowToast() method.

Custom Flutter Toast Message Example

Below is the example of custom toast message for android version 11 and above.

You can use this code to create custom toast message in flutter app development.


flutter toast message

That brings an end to the tutorial on how to create and show toast & custom toast in flutter. We have also seen an example where we’ve used FlutterToast dependency for adding toast functionality to our flutter project.

Do share this with your friends if you find this post helpful. Thank you !!

You might also be interested in: Customize Snackbar in Flutter


Written by Hilal Ahmad

Leave a Reply

Your email address will not be published. Required fields are marked *