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

Add flutter_just_toast to your dependencies in your Pubspecs.yaml

dependencies:

flutter_just_toast: ^1.0.1

Next import package into your class:

import 'package:flutter_just_toast/flutter_just_toast.dart';

Implement Toast with message

Toast.show( message: "Your toast message", 
    duration: Delay.SHORT, 
    textColor: Colors.black);

Answer 2

fluttertoast: ^3.1.3

import 'package:fluttertoast/fluttertoast.dart';

Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIos: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

Answer 3

to show toast message you can use flutterToast plugin to use this plugin you have to

1. Add this dependency to your pubspec.yaml file :- fluttertoast: ^3.1.0
2. to get the package you have to run this command :- $ flutter packages get
3. import the package :- import 'package:fluttertoast/fluttertoast.dart';

use it like this

Fluttertoast.showToast(
        msg: "your message",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.BOTTOM // also possible "TOP" and "CENTER"
        backgroundColor: "#e74c3c",
        textColor: '#ffffff');

For more info check this

Answer 4

I would like to provide alternative solution to use package flushbar. https://github.com/AndreHaueisen/flushbar
As the package said: Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackbars.
Another suggestion to use flushbar How to show snackbar after navigator.pop(context) in Flutter?
You can also set flushbarPosition to TOP or BOTTOM

    Flushbar(
      title: "Hey Ninja",
      message: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      flushbarPosition: FlushbarPosition.TOP,
      flushbarStyle: FlushbarStyle.FLOATING,
      reverseAnimationCurve: Curves.decelerate,
      forwardAnimationCurve: Curves.elasticOut,
      backgroundColor: Colors.red,
      boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)],
      backgroundGradient: LinearGradient(colors: [Colors.blueGrey, Colors.black]),
      isDismissible: false,
      duration: Duration(seconds: 4),
      icon: Icon(
        Icons.check,
        color: Colors.greenAccent,
      ),
      mainButton: FlatButton(
        onPressed: () {},
        child: Text(
          "CLAP",
          style: TextStyle(color: Colors.amber),
        ),
      ),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: "ShadowsIntoLightTwo"),
      ),
      messageText: Text(
        "You killed that giant monster in the city. Congratulations!",
        style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: "ShadowsIntoLightTwo"),
      ),
    )..show(context);

Answer 5

you can use this package : toast

add this line to your dependencies

toast: ^0.1.5

then use it like this :

import 'package:toast/toast.dart';
Toast.show("Toast plugin app", context, duration: Toast.LENGTH_SHORT, gravity:  Toast.BOTTOM);

Answer 6

It's quite Easy to show a Toast Message in Flutter.Scaffold.of(context).showSnackBar(SnackBar( content: Text("Toast Text Here"), ));