How to Create Toast in Flutter ?

· 3 min read
Toast In Flutter
Toast In Flutter

What is Toast?

Toast can be used to display information for a short period of time. A toast contains a message to be displayed quickly and disappears after some time. In this article, we will go through How to Create Toast in Flutter.

Toasts are not clickable.

How to Use Toast in Flutter?

Snackbars are the official “Toast” from material design. See https://material.io/design/components/snackbars.html#

The following code snippet shows how to use snackbars in a Flutter. Create a custom function like below:

void _showToast(BuildContext context) {
  final scaffold = Scaffold.of(context);
  scaffold.showSnackBar(
    SnackBar(
      content: const Text('Added to favourite'),
      action: SnackBarAction(
          label: 'UNDO',
          onPressed:scaffold.hideCurrentSnackBar,
      ),
    ),
  );
}

 

Now call  it on a button press like below:

RaisedButton(
      child: const Text('Show toast'),
      onPressed: () => _showToast(context),
   ),

We will get output like below:

Toast in Flutter
Toast in Flutter

So you can access the parent ScaffoldState using Scaffold.of(context). Then users can code like below:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Sending Message"),
    ));

To Show toast message you can use the FlutterToast plugin and follow the steps like below:

  • Add this dependency to your pubspec.yaml file:- fluttertoast: ^7.1.1(get the latest version From pub.dev)
  • Run a command:- $ flutter packages get
  • import the package:- import ‘package:fluttertoast/fluttertoast.dart’;
Fluttertoast.showToast(
        msg: "This is Toast message",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM // also possible "TOP" and "CENTER"
        backgroundColor: "#e74c3c",
        textColor: '#ffffff'
);

Toast will look like below:

Toast In Flutter
Toast In Flutter

https://pub.dev/packages/toast use this for toast this library is pretty easy to use and perfect work for ios and android.

The syntax for show Toast:

Toast.show("Toast plugin app", 
duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM,
);

Conclusion:

So in this article, we have learned What is Toast in Flutter and How to Create Toast in Flutter.

Thanks for Reading!!!
Keep Fluttering!!! Keep Learning!!!

So if you still Need any Support for Flutter Development? Do let us know, we’d love to assist you

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply