How to Create a Toast in Flutter

CodeWithFlutter
4 Min Read

Hello Guys, In this post, you will learn how to create a toast message in a flutter. We can implement a toast message on android, ios, and the web by using the fluttertoast package. This package helps us to implement toast in an easy way. So, Let’s get started.

1. Create a Project

First, create a flutter project by using IDE. If you are using visual studio code, you can use the command. This command helps us to create a project. Make sure your pc connected to the internet. For example, flutter create appname .

2. Add the Package in Project

Now, open the pubspec.yaml in your project. Then add the fluttertoast package under the dependency section and then click on the pub get the link to import the library in your project. The fluttertoast package version may be changed in feature.

fluttertoast package
fluttertoast package

Before proceeding pub get, please ensure indentation is correct. The procced pub get.

3. Create Toast Widget (Android & iOS) 

Then navigate to go lib folder and open main.dart. Then create a toast widget, code given below,

Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
propertydescriptiondefault
msgString (Not Null)(required)required
toastLengthToast.LENGTH_SHORT or Toast.LENGTH_LONG (optional)Toast.LENGTH_SHORT
gravityToastGravity.TOP (or) ToastGravity.CENTER (or) ToastGravity.BOTTOM (Web Only supports top, bottom)ToastGravity.BOTTOM
timeInSecForIosWebint (for ios & web)1 (sec)
backgroundColorColors.rednull
textcolorColors.whitenull
fontSize16.0 (float)null
webShowClosefalse (bool)false
webBgColorString (hex Color)linear-gradient(to right, #00b09b, #96c93d)
webPositionString (leftcenter or right)right
Note:
Custom Toast will not work on android 11 and above, it will only use msg and toastLength remaining all properties are ignored. For more info, visit the package’s official documentation.

Here, the full source code,

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(ToastExample());

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,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.yellow
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toast Example',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Toast Example'),
          ),
          body: Padding(
            padding: EdgeInsets.all(15.0),
            child: Center(
              child: MaterialButton(
                color: Colors.blue[200],
                child: Text('Click to show'),
                onPressed: showToast,
              ),
            ),
          )
      ),
    );
  }
}

4. Run the App

To run the app on emulator, you will get output like this, here left side output is android 10 and right side output is android 11.

Flutter toast example
Flutter Toast Example for Android 10
Flutter toast example
Flutter toast example for Android 11

Related Post, How to create Splash Screen in Flutter.

Share this Article
1 Comment