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
|
1 |
flutter pub add fluttertoast |
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:
|
1 2 |
dependencies: fluttertoast: ^8.0.8 |
Now add this import line in dart file where you want to use flutter toast in your project
|
1 |
import ‘package:fluttertoast/fluttertoast.dart’; |
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
|
1 2 3 |
Fluttertoast.showToast( msg: "www.codingzest.com", ); |
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.
msg
The msg property accepts a string value to be displayed to the users as a message.
|
1 2 3 |
Fluttertoast.showToast( msg: 'www.codingzest.com', ); |
toastLength
This property accepts two values (Toast.LENGTH_LONG and Toast.LENGTH_SHORT), we use these values to change the duration of flutter toast displaying.
|
1 2 3 4 |
Fluttertoast.showToast( msg: 'www.codingzest.com', toastLength: Toast.LENGTH_LONG ); |
gravity
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.
|
1 2 3 4 5 |
Fluttertoast.showToast( msg: 'www.codingzest.com', toastLength: Toast.LENGTH_LONG, gravity: ToastGravity.CENTER ); |
fontSize
We use this property to change toast message font size, you can set font size according to your requirements.
|
1 2 3 4 5 |
Fluttertoast.showToast( msg: 'www.codingzest.com', toastLength: Toast.LENGTH_LONG, fontSize: 20 ); |
backgroundColor
It takes material color as value. We will use this property to change the background color of the toast message.
|
1 2 3 4 5 6 |
Fluttertoast.showToast( msg: 'www.codingzest.com', toastLength: Toast.LENGTH_LONG, fontSize: 25, backgroundColor: Colors.blue ); |
textColor
We will use this property to change the text color of the toast message. It takes material color as value.
|
1 2 3 4 5 6 |
Fluttertoast.showToast( msg: 'www.codingzest.com', toastLength: Toast.LENGTH_LONG, fontSize: 25, textColor: Colors.red ); |
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.
|
1 |
FToast fToast; |
Now, we have to initialize the object with the current context in the initState() method.
|
1 2 3 4 5 6 |
@override void initState() { super.initState(); fToast = FToast(); fToast.init(context); } |
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
|
1 2 3 4 5 6 7 8 |
Widget toast = Container( padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(25.0), color: Colors.greenAccent, ), child: Text("This is a Custom Toast"), ); |
To display the custom toast message created above we have to provide the above widget as child to fToast.ShowToast() method.
|
1 2 3 |
fToast.showToast( child: toast, ); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Toast', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() { return _MyHomePageState(); } } class _MyHomePageState extends State<MyHomePage> { late FToast fToast; showCustomToast() { Widget toast = Container( padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(25.0), color: Colors.green, ), child: Text("This is a Custom Toast"), ); fToast.showToast( child: toast, toastDuration: Duration(seconds: 3), ); } @override void initState() { super.initState(); fToast = FToast(); fToast.init(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Flutter Toast"), ), body: Center( child: ElevatedButton( child: Text("Show Toast"), onPressed: () { showCustomToast(); }, ), ) ); } } |
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
