How to create Toast in Flutter With Example

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.

How to create Toast in Flutter
  • First of all add this line to your dependencies.
dependencies:
  flutter:
    sdk: flutter
  toast: ^0.1.5
  • Now click on get dependencies to get that dependencies.
  • Then, add this line in your file.
import 'package:toast/toast.dart';
  • 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,
    );
  }
}
  • 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),
          ),
        ),
  • I am Giving You my full source code here for batter understanding.
import 'package:flutter/material.dart';
import 'package:toast/toast.dart';

class ShowToast extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Toast Example - FlutterCorner'),
          backgroundColor: Colors.black,
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Show Short Toast'),
            onPressed: () =>
                ShowToastComponent.showDialog("Your Toast Message", context),
          ),
        ),
      ),
    );
  }
}

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

So Guys That’s it For How to create Toast in Flutter?. Comment below Your thoghts and your quries.

Also Read How to Get Device Lat Long in Flutter.

Milan Dhameliya is an Information Technology Engineer. By profession, he is a Full Stack developer with knowledge of multiple back-end platforms (e.g., PHP, Node.js, Python) and frontend Flutter frameworks.

2 thoughts on “How to create Toast in Flutter With Example”

Leave a Comment