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
  1. dependencies:
  2. flutter:
  3. sdk: flutter
  4. cupertino_icons: ^0.1.2
  5. 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
flutter-notification-example-1
flutter-notification-example-2
Subscribe Now