DEV Community

Cover image for How to create Toast in Flutter With Example - fluttercorner.com
FlutterCorner
FlutterCorner

Posted on

How to create Toast in Flutter With Example - fluttercorner.com

How to create Toast in Flutter?

Hello Guys How are you all ? Hope You All Are Fine. Today We Are Going To Learn How to create Toast in Flutter?with This Tutorial. As Developer you need to show to users toast message.

In This tutorial we are going to learn show toast messages in very simple way as well create custom toasts. We will use toast Package. so without wasting your time lets start this article.

First of all add this line to your dependencies.

dependencies:
  flutter:
    sdk: flutter
  toast: ^0.1.5
Enter fullscreen mode Exit fullscreen mode

Now click on get dependencies to get that dependencies.
Then, add this line in your file.

import 'package:toast/toast.dart';
Enter fullscreen mode Exit fullscreen mode

Now, you can use this package in your file.
Now i am sharing my personal method here that will easy to use
You Have to make class and define your class name. [ You can Create saparate Dart file too. But I am using same file where i want to use toast. 🙂 ] Same like Below.

class ShowToastComponent {
  static showDialog(String msg, context) {
    Toast.show(
      msg,
      context,
      duration: Toast.LENGTH_SHORT,
      gravity: Toast.BOTTOM,
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, You can Use this class any where in your file. Let me Give You Quik Example here.
I am use toast on RaisedButton click same like below

        body: Center(
          child: RaisedButton(
            child: Text('Show Short Toast'),
            onPressed: () => ShowToastComponent.showDialog(
                "Your Toast Message", context),
          ),
        ),
Enter fullscreen mode Exit fullscreen mode

I am Giving You my full source code here for batter understanding.

Here Is my Source Code How to create Toast in Flutter With Example

Top comments (0)