Hello Guys, In this post, you will learn how to create a toast message in a flutter. We can implement a toast message on android, ios, and the web by using the fluttertoast package. This package helps us to implement toast in an easy way. So, Let’s get started.
1. Create a Project
First, create a flutter project by using IDE. If you are using visual studio code, you can use the command. This command helps us to create a project. Make sure your pc connected to the internet. For example, flutter create appname .
2. Add the Package in Project
Now, open the pubspec.yaml in your project. Then add the fluttertoast package under the dependency section and then click on the pub get the link to import the library in your project. The fluttertoast package version may be changed in feature.
Before proceeding pub get, please ensure indentation is correct. The procced pub get.
3. Create Toast Widget (Android & iOS)
Then navigate to go lib folder and open main.dart. Then create a toast widget, code given below,
Fluttertoast.showToast(
msg: "This is Center Short Toast",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);| property | description | default |
|---|---|---|
| msg | String (Not Null)(required) | required |
| toastLength | Toast.LENGTH_SHORT or Toast.LENGTH_LONG (optional) | Toast.LENGTH_SHORT |
| gravity | ToastGravity.TOP (or) ToastGravity.CENTER (or) ToastGravity.BOTTOM (Web Only supports top, bottom) | ToastGravity.BOTTOM |
| timeInSecForIosWeb | int (for ios & web) | 1 (sec) |
| backgroundColor | Colors.red | null |
| textcolor | Colors.white | null |
| fontSize | 16.0 (float) | null |
| webShowClose | false (bool) | false |
| webBgColor | String (hex Color) | linear-gradient(to right, #00b09b, #96c93d) |
| webPosition | String (left, center or right) | right |
Note:
Custom Toast will not work on android 11 and above, it will only use msg and toastLength remaining all properties are ignored. For more info, visit the package’s official documentation.
Here, the full source code,
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(ToastExample());
class ToastExample extends StatefulWidget {
@override
_ToastExampleState createState() {
return _ToastExampleState();
}
}
class _ToastExampleState extends State {
void showToast() {
Fluttertoast.showToast(
msg: 'This is toast notification',
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.yellow
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Toast Example',
home: Scaffold(
appBar: AppBar(
title: Text('Toast Example'),
),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: MaterialButton(
color: Colors.blue[200],
child: Text('Click to show'),
onPressed: showToast,
),
),
)
),
);
}
}
4. Run the App
To run the app on emulator, you will get output like this, here left side output is android 10 and right side output is android 11.
Related Post, How to create Splash Screen in Flutter.
Thank you. You saved my time.