When we want to show some flash message to the user while running the application on mobile, we will use Toast messages. Toast is a simple flash message in flutter. By using Toast messages we will show some information to the user about the current activity on the screen. This Flash message we can show at any place like bottom of the page, center ot top of the page with some customization. In this flutter example we will learn how to create a custom toast in flutter and create toast with icon.
To show Toast in the flutter application we need current screen context, we can also show toast message without context object.
Let get started
Step 1: Create flutter application
Step 2: To show custom Toast in flutter we are using the "fluttertoast" library.
Let's add this library in pubspec.yaml file
fluttertoast: ^8.1.2 |
Now run flutter pub get on terminal to add library to project.
To create a custom toast inside our application we will use the below to show the toast.
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.greenAccent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check),
SizedBox(
width: 12.0,
),
Text("This is a Custom Toast"),
],
),
);
_showToast() {
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2),
);
}
|
In this example we are going to create Toast with and without context. Now create two different widgets to show toast with context and without context
Those two widgets are like below
class ToastNoContext extends StatefulWidget {
@override
_ToastNoContextState createState() => _ToastNoContextState();
}
class _ToastNoContextState extends State<ToastNoContext> {
void showLongToast() {
Fluttertoast.showToast(
msg: "This is Long Toast",
toastLength: Toast.LENGTH_LONG,
fontSize: 18.0,
);
}
void showWebColoredToast() {
Fluttertoast.showToast(
msg: "This is Colored Toast with android duration of 5 Sec",
toastLength: Toast.LENGTH_SHORT,
webBgColor: "#e74c3c",
textColor: Colors.black,
timeInSecForIosWeb: 5,
);
}
void showColoredToast() {
Fluttertoast.showToast(
msg: "This is Colored Toast with android duration of 5 Sec",
toastLength: Toast.LENGTH_SHORT,
backgroundColor: Colors.red,
textColor: Colors.white);
}
void showShortToast() {
Fluttertoast.showToast(
msg: "This is Short Toast",
toastLength: Toast.LENGTH_SHORT,
timeInSecForIosWeb: 1);
}
void showTopShortToast() {
Fluttertoast.showToast(
msg: "This is Top Short Toast",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.TOP,
timeInSecForIosWeb: 1);
}
void showCenterShortToast() {
Fluttertoast.showToast(
msg: "This is Center Short Toast",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1);
}
void cancelToast() {
Fluttertoast.cancel();
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Toast'),
),
body: new Center(
child: new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(10.0),
child: new ElevatedButton(
child: new Text('Show Long Toast'),
onPressed: showLongToast),
),
new Padding(
padding: const EdgeInsets.all(10.0),
child: new ElevatedButton(
child: new Text('Show Short Toast'),
onPressed: showShortToast),
),
new Padding(
padding: const EdgeInsets.all(10.0),
child: new ElevatedButton(
child: new Text('Show Center Short Toast'),
onPressed: showCenterShortToast),
),
new Padding(
padding: const EdgeInsets.all(10.0),
child: new ElevatedButton(
child: new Text('Show Top Short Toast'),
onPressed: showTopShortToast),
),
new Padding(
padding: const EdgeInsets.all(10.0),
child: new ElevatedButton(
child: new Text('Show Colored Toast'),
onPressed: showColoredToast),
),
new Padding(
padding: const EdgeInsets.all(10.0),
child: new ElevatedButton(
child: new Text('Show Web Colored Toast'),
onPressed: showWebColoredToast),
),
new Padding(
padding: const EdgeInsets.all(10.0),
child: new ElevatedButton(
child: new Text('Cancel Toasts'),
onPressed: cancelToast,
),
),
],
),
),
),
);
}
}
|
Create Toast with Context in flutter
class ToastContext extends StatefulWidget {
@override
_ToastContextState createState() => _ToastContextState();
}
class _ToastContextState extends State<ToastContext> {
late FToast fToast;
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.greenAccent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check),
SizedBox(
width: 12.0,
),
Text("This is a Custom Toast"),
],
),
);
_showToast() {
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2),
);
}
_showBuilderToast() {
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2),
positionedToastBuilder: (context, child) {
return Positioned(
child: child,
top: 16.0,
left: 16.0,
);
});
}
_showToastCancel() {
Widget toastWithButton = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.redAccent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
child: Text(
"This is a Custom Toast This is a Custom Toast This is a Custom Toast This is a Custom Toast This is a Custom Toast This is a Custom Toast",
softWrap: true,
style: TextStyle(
color: Colors.white,
),
),
),
IconButton(
icon: Icon(
Icons.close,
),
color: Colors.white,
onPressed: () {
fToast.removeCustomToast();
},
)
],
),
);
fToast.showToast(
child: toastWithButton,
gravity: ToastGravity.CENTER,
toastDuration: Duration(seconds: 50),
);
}
_queueToasts() {
fToast.showToast(
child: toast,
gravity: ToastGravity.CENTER,
toastDuration: Duration(seconds: 2),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.TOP,
toastDuration: Duration(seconds: 2),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.CENTER,
toastDuration: Duration(seconds: 2),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.TOP,
toastDuration: Duration(seconds: 2),
);
}
_removeToast() {
fToast.removeCustomToast();
}
_removeAllQueuedToasts() {
fToast.removeQueuedCustomToasts();
}
@override
void initState() {
super.initState();
fToast = FToast();
fToast.init(globalKey.currentState!.context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Custom Toasts"),
),
body: Center(
child: Column(
children: [
SizedBox(
height: 24.0,
),
ElevatedButton(
child: Text("Show Custom Toast"),
onPressed: () {
_showToast();
},
),
ElevatedButton(
child: Text("Show Custom Toast via PositionedToastBuilder"),
onPressed: () {
_showBuilderToast();
},
),
SizedBox(
height: 24.0,
),
ElevatedButton(
child: Text("Custom Toast With Close Button"),
onPressed: () {
_showToastCancel();
},
),
SizedBox(
height: 24.0,
),
ElevatedButton(
child: Text("Queue Toasts"),
onPressed: () {
_queueToasts();
},
),
SizedBox(
height: 24.0,
),
ElevatedButton(
child: Text("Cancel Toast"),
onPressed: () {
_removeToast();
},
),
SizedBox(
height: 24.0,
),
ElevatedButton(
child: Text("Remove Queued Toasts"),
onPressed: () {
_removeAllQueuedToasts();
},
),
],
),
),
);
}
}
|
Now update main. dart file with below code
void main() {
runApp( MaterialApp(home: MyApp()));
}
GlobalKey globalKey = GlobalKey();
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
key: globalKey,
appBar: AppBar(
title: Text("Toast"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ToastNoContext(),
));
},
child: Text("Flutter Toast No Context"),
),
SizedBox(
height: 24.0,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => ToastContext(),
));
},
child: Text("Flutter Toast Context"),
),
],
),
),
);
}
}
|
Let run application on device/emulator
 |
 |
 |
 |
Conclusion: In this flutter example we covered how to create custom toast in flutter and create Custom Toast with Icon and Toast with and without Context in flutter.
|
Article Contributed By :
|
|
|
|
|
3634 Views |
|