How to create Toast in Flutter?

Question

Can I create something similar to Toasts in Flutter? Just a tiny notification window that is not directly in the face of the user and does not lock or fade the view behind i

Answer 1

You can use library "fluttertoast". To do this, add it in pubspec.yaml file like:

dependencies:
  fluttertoast: ^3.1.0

Then import that library in the dart file you need the toast and write your code. For example, refer to the following code:

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



class ToastExample extends StatefulWidget {
    @override
    _ToastExampleState createState() {
      return _ToastExampleState();
    }
  }

  class _ToastExampleState extends State {
    void showToast() {
      Fluttertoast.showToast(
          msg: 'Some text',
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
          timeInSecForIos: 1,
          backgroundColor: Colors.red,
          textColor: Colors.white
      );
    }

    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Toast Tutorial',
        home: Scaffold(
            appBar: AppBar(
              title: Text('Toast Tutorial'),
            ),
            body: Padding(
              padding: EdgeInsets.all(15.0),
              child: Center(
                child: RaisedButton(
                  child: Text('Press to show'),
                  onPressed: showToast,
                ),
              ),
            )
        ),
      );
    }
  }

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

Answer 2

get flutter toast package here

Add this package to your project dependencies in pubspec.yaml

Then whenever you want the Toast to be shown like on a tap of a button

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

Answer 3

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

Syntax for show Toast:

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

Answer 4

There's no widget for toast in flutter, You can go to this plugin Usecase:

Fluttertoast.showToast(
msg: "My toast messge",
textColor: Colors.white,
toastLength: Toast.LENGTH_SHORT,
timeInSecForIos: 1,
gravity: ToastGravity.BOTTOM,
backgroundColor: Colors.indigo,);

Answer 5

It's quite simple,

We just have to install the flutter toast package. Refer the following documentation: https://pub.dev/packages/fluttertoast

In the installing tab you will get the dependency which you have to paste it in the pubspec.yaml andthen install.

After this just import the package:

import 'package:fluttertoast/fluttertoast.dart';

Similar to above line.

And then by using FlutterToast class you can use your fluttertoast.

You're Done!!!

Answer 6

The answer Scaffold.of(context).showSnackBar(...) has not worked in most cases.

I suggest the optimal method be declaring a scaffoldState key within the class and assigning it to Scaffold like below

GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

and then

Scaffold(
  key: _scaffoldKey,
  ...
)

when you want to show the Snackbar do this..

_scaffoldKey.currentState.showSnackBar(
  content: Text("This works!"),
);