Flutter Toast

Flutter Toast Messages

by

A Flutter Toast is used to display a flash message on the screen. It occupies a minimal amount of screen space and the existing content remains visible. After some time, the Toast message will disappear automatically. In This article, we are going to learn about flutter Toast.

To display Toast messages in our application, we have a nice package called fluttertoast available in the pub.dev.

Add Dependency:

To use this library, we must add the fluttertoast dependency to our project’s pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  fluttertoast: ^8.0.8

The message is displayed on the screen using the Fluttertoast.showToast(..) method. It has some parameters, as shown in the snippet below.

 static Future<bool?> showToast({
    required String msg,
    Toast? toastLength,
    int timeInSecForIosWeb = 1,
    double? fontSize,
    ToastGravity? gravity,
    Color? backgroundColor,
    Color? textColor,
    bool webShowClose = false,
    webBgColor: "linear-gradient(to right, #00b09b, #96c93d)",
    webPosition: "right",
  })

//flutter toast - FlutterAnt

As observed in the above snippet, msp is a required argument, while the rest are optional.

Flutter Toast Properties:

String msg: The string that will be displayed on the screen is stored in msg. It is as required property. 

Fluttertoast.showToast(msg: "This is Toast Message")

Let’s suppose we click the button that gets the Toast to show.

Flutter toast
Simple Toast

Toast toastLength: This property allows us to choose how long the message will be displayed on the screen. It uses to keep the constant values, LENGTH_LONG [Show Long toast for 5 sec] and LENGTH_SHORT [Show Short toast for 1 sec] which is the default value.

 Fluttertoast.showToast(msg: "This is sample Toast Message", 
                      toastLength: Toast.LENGTH_LONG);

int timeInSecForIosWeb: In iOS, how long will it stay visible on the Screen? (default is 1 second)

double fontSize: The font size for the toast message can be specified using this parameter. The Default value is 16.0. 

Fluttertoast.showToast(msg: "This is sample Toast Message", 
                      fontSize: 20);

ToastGravity gravity: This attribute allows us to specify where the Toast should display on the screen. These are the constant values as follows

  • TOP
  • BOTTOM
  • CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • BOTTOM_LEFT
  • BOTTOM_RIGHT
  • CENTER_LEFT
  • CENTER_RIGHT
  • SNACKBAR
Fluttertoast.showToast(msg: "This is sample Toast Message", 
                      gravity: ToastGravity.CENTER);
flutter toast
ToastGravity.CENTER

Color backgroundColor: This attribute allows us to modify the Toast message’s background colour.

  Fluttertoast.showToast(msg: "This is sample Toast Message",
                        backgroundColor: Colors.red);
flutter toast
backgroundColor

Color textColor: This property allows us to modify the Toast message’s colour.

 Fluttertoast.showToast(msg: "This is sample Toast Message",
                       textColor: Colors.red);
flutter toast
textColor

bool webShowClose: This attribute allows you to enable or disable the close option in the web.The default value is False.

webBgColor: This property allows you to change the toast’s background colour in the web. The default color is “linear-gradient(to right, #00b09b, #96c93d)”,

webPosition: This attribute allows you to specify the toast’s position in the web. The default position is right.

Fluttertoast.cancel()

Fluttertoast.cancel() method can be used to cancel all toasts.

For more information click here

Thanks for the Reading 🙂

Leave a Comment