Flutter Toast Notification
Flutter Toast is also known as Toast Notification. It is a message which mainly shows up on the bottom of the screen. It will disappear on its own after some time declared by the developers. We mostly used it to show the feedback on the operation performed.
Showing a toast is an essential feature. We can achieve it by adding some lines of code. In this section, we are going to learn about toast messages by implementing them in Flutter. To implement toast notification, we need to import the fluttertoast library pubspec.yaml.
Flutter provides these properties for showing the toast message:
| Property | Description |
|---|---|
| msg | String(Required) |
| toastlength | Toast.LENGTH_SHORT or Toast.LENGTH_LONG |
| gravity | ToastGravity.TOP or ToastGravity.CENTER or ToastGravity.BOTTOM |
| timeInSecForIos | It is used only for Ios ( 1 sec or more ) |
| backgroundColor | Using this we specify the background color. |
| textColor | Using this we specify the text color of the message. |
| fontSize | Using this we specify the font size of the message. |
FlutterToast.cancel(): This function is used when you want to cancel all the requests to show message to the user.
pubspec.yaml
- dependencies:
- flutter:
- sdk: flutter
- cupertino_icons: ^0.1.2
- fluttertoast: ^3.1.0
main.dart
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
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,
timeInSecForIos: 1,
backgroundColor: Colors.red,
textColor: Colors.yellow
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Toast Notification Example',
home: Scaffold(
appBar: AppBar(
title: Text('Toast Notification Example'),
),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: RaisedButton(
child: Text('click to show'),
onPressed: showToast,
),
),
)
),
);
}
}
void main() => runApp(ToastExample());
Output
