Toast is a small message that is shown at the bottom of the mobile app. It notifies the users of specific interactions done on the screen. Many flutter developer faces difficulty in creating toast message in a flutter.
In this entire tutorial, you will know various methods for creating toast in a flutter.
If you have already built the mobile application in Kotlin programming language then you must be aware of creating toast message in it. It is like below.
val text = "Hello toast!"
val duration = Toast.LENGTH_SHORT
val toast = Toast.makeText(applicationContext, text, duration)
toast.show()But in flutter it is different.
In the next section, you will implement the various method for creating toast messages.
Methods to Create Toast in Flutter
Method 1: Flutter Toast using Flutter Snackbar
There is a flutter snackbar widget that helps you to show messages to the user when they interact. The syntax for the snackbar is below.
final snackbar =
SnackBar(content: const Text("Your Message"));
ScaffoldMessenger.of(context).showSnackBar(snackbar);For our example, this snackbar message will be inside the onPressed attribute for the TextButton() constructor.
Execute the complete code given below.
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
// This widget is the root of your application.
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Application name
title: 'My Flutter App',
debugShowCheckedModeBanner: false, // Remove debug banner
home: Scaffold(
appBar: AppBar(
// The title text which will be shown on the action bar
title: Text("My Flutter App"),
),
body: ToastWidget(),
),
);
}
}
class ToastWidget extends StatelessWidget {
const ToastWidget({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
onPressed: () {
// toast message
final snackbar =
SnackBar(content: const Text("Text Button is Clicked"));
ScaffoldMessenger.of(context).showSnackBar(snackbar);
},
child: Text(
"Click Me",
style: TextStyle(color: Colors.white),
)));
}
}
void main() {
runApp(MyApp());
}Output
Method 2: Third Party Flutter Package
The other method to create a toast message is using the third-party flutter package. There is two mostly used flutter package.
- fluttertoast package
- toast package
But before implementing these packages you have to add them to dependencies inside the pubspec.yaml file. Let’s add them.
fluttertoast: ^8.0.9 toast: ^0.1.5
Example 1: Creating toast message using fluttertoast package.
Below is the syntax for using the fluttertoast package.
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
);Using the same example that was in method1 you will know how to create a toast message when the text button is clicked. Execute the below lines of code.
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class MyApp extends StatefulWidget {
// This widget is the root of your application.
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Application name
title: 'My Flutter App',
debugShowCheckedModeBanner: false, // Remove debug banner
home: Scaffold(
appBar: AppBar(
// The title text which will be shown on the action bar
title: Text("My Flutter App"),
),
body: ToastWidget(),
),
);
}
}
class ToastWidget extends StatelessWidget {
const ToastWidget({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
onPressed: () {
// toast message
Fluttertoast.showToast(
msg: "Text Button is Clicked",
backgroundColor: Colors.grey,
toastLength: Toast.LENGTH_LONG,
timeInSecForIosWeb: 10);
},
child: Text(
"Click Me",
style: TextStyle(color: Colors.white),
)));
}
}
void main() {
runApp(MyApp());
}Output
Example 2: Flutter Toast message using toast package
The second package that is useful for showing toast messages is the toast package. It used the syntax as the below.
Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);I am using it inside the onPressed() attribute for the text button.
Toast.show("Text Button is clicked", context,
duration: Toast.LENGTH_LONG);Run the complete lines of code.
import 'package:flutter/material.dart';
import 'package:toast/toast.dart';
class MyApp extends StatefulWidget {
// This widget is the root of your application.
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Application name
title: 'My Flutter App',
debugShowCheckedModeBanner: false, // Remove debug banner
home: Scaffold(
appBar: AppBar(
// The title text which will be shown on the action bar
title: Text("My Flutter App"),
),
body: ToastWidget(),
),
);
}
}
class ToastWidget extends StatelessWidget {
const ToastWidget({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.red)),
onPressed: () {
// toast message
//Alert(message: 'Test').show();
Toast.show("Text Button is clicked", context,
duration: Toast.LENGTH_LONG);
},
child: Text(
"Click Me",
style: TextStyle(color: Colors.white),
)));
}
}
void main() {
runApp(MyApp());
}Output
Conclusion
Toast is a good way to interact with users. It allows you to make users do some specific tasks like navigation, notifying users of any tasks they have done e.t.c.
These are the methods to create a toast message in a very simple way. I hope you have liked this tutorial. If you have any doubt then you can contact us for more help.
