Toast Message in Flutter

A toast message is a small message that appears on the screen for a few seconds. It is considered as a simple information that you have done.

Let’s see how do we achieve it in flutter,

For the toast message, we have to use a package called toast. This package has four main properties.

• msg - It is a String property and it will only contain the feedback or the information that displays on our screen.
• context - It is nothing but BuildContext.
• duration - It denotes the period of time. We have two options short-period(Toast.LENGTH_SHORT), long-period(Toast.LENGTH_LONG).
• gravity - It denotes the position of the toast message, whether it is top(Toast.TOP), center(Toast.CENTER), or bottom(Toast.BOTTOM).

Step 1: Adding Dependency

We need to add the toast plugin in pubspec.yaml file under the dependencies. Then click the pub get to add the plugin in our flutter project.

Step 2: Initializing the Toast

Now move to the main.dart file and import the material package and toast package.

Step 3: Implementing the Toast

Under the main function, create the stateful widget called MyToastPage. Inside the class, create Scaffold. Here, we are setting the appBar title as “Toast plugin example app”.

Step 4: Creating showToast Function

Here, we are going to exhibit the different kinds of toast messages for that we are creating a simple function called showToast and passing the arguments such as msg, duration & gravity.

Toast.show - This is the only command to display our toast message on the screen.

Step 5: Building the Layout

Now, let’s remember Step 3.

Under the scaffold, create a Column with the help of body property. Inside the Column, we have to create a few RaisedButtons to show the various types of toast messages.

1. Create the RaisedButton and in its child property, create a text widget as “Show Short Toast” which is the button name, and in the onPressed property, call the showToast as “Show Short Toast” which displays the toast message.
   [Note : showToast is a function which we already created in step 4.]
2. On the next button, we have added the gravity property in showToast. Here, the gravity is Toast.BOTTOM which means it will display the toast message on the bottom of the screen.
3. On the last button, the gravity property is Toast.TOP which means it will display the toast message on top of the screen.

Note: In the last button, the text widget has the value represented as “““ ……”””. It denotes the multiline text where flutter will format the text respect to the screen size and align the lines accordingly.

In this package, we also have another four properties.

• textColor → It denotes the color of the text and the default color is white.
• backgroundColor → Here default color is 0xAA000000.
• backgroundRadius → Here default radius is 16.
• border → It is an optional property.

Here, I have added two more RaisedButtons. The entire code for this project is given below.

You can also refer to my git repository for the project code,
https://github.com/keerthiga14/flutter_toast

Thank you for reading this article.