May 28, 2020

Toast notification in flutter

By Mohit Agrawal

An easy way of implementing toast notification in flutter

toast notification

Introduction

In this small tutorial, you will learn how to implement toast notification in your flutter app. A toast notification is a simple text wrapped up in a box that shows up at the bottom of the screen and disappears after one or two seconds.

Implementation

Create a new flutter project in android studio. Check how to set up flutter in the android studio if needed. Now open the pubspec.yaml file and add a new plugin for the toast notification. You can check the latest version of the plugin from here. Now you need to do Pub get to install the plugin.

.
.
.
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  fluttertoast: ^4.0.0
.
.
.

If you have installed the plugin without any error then you are good to go. Now I will show you how to display toast notification when user clicks on a particular button. To display the toast use this code.

Fluttertoast.showToast(
      msg: "Center toast",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0
  );

Let’s create a button action to trigger the toast. Open the main.dart and replace the scaffold body with MyColumn().

.
.
.
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MyColumn()
    );
  }
}
.
.
.

Here is the code for MyColumn().

class MyColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(140, 10, 140, 10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              showShortToast();
          },
            child: Text("Short duration"),
          ),
          RaisedButton(
            onPressed: () {
              showLongToast();
            },
            child: Text("Long duration"),
          ),
          RaisedButton(
            onPressed: () {
              showCenterToast();
            },
            child: Text("Center toast"),
          ),
        ],
      ),
    );
  }
}

As you can see in the above code block I have created three buttons to demonstrate three type of toast notifications. Code for notifications are.

void showLongToast() {
  Fluttertoast.showToast(
      msg: "Long duration toast",
      toastLength: Toast.LENGTH_LONG,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0
  );
}

void showShortToast() {
  Fluttertoast.showToast(
      msg: "Short duration toast",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0
  );
}

void showCenterToast() {
  Fluttertoast.showToast(
      msg: "Center toast",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0
  );
}

Your final output will be like this.

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!