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 it.

Answer 1

UPDATE: Scaffold.of(context).showSnackBar is deprecated in Flutter 2.0.0 (stable)

You can access the parent ScaffoldMessengerState using ScaffoldMessenger.of(context).

Then do something like

ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
     content: Text("Sending Message"),
));

Snackbars are the official "Toast" from material design. See Snackbars.

Here is a fully working example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Snack bar'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () => _showToast(context),
          child: const Text('Show toast'),
        ),
      ),
    );
  }

  void _showToast(BuildContext context) {
    final scaffold = ScaffoldMessenger.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: const Text('Added to favorite'),
        action: SnackBarAction(label: 'UNDO', onPressed: scaffold.hideCurrentSnackBar),
      ),
    );
  }
}

Answer 2

Use fluttertoast plugin

add this line to your dependencies

fluttertoast: ^8.1.1

Then you can use Toast with No Build Context (has limited features and no control over UI, please check the doc)

Fluttertoast.showToast(
        msg: "This is a Toast message",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        textColor: Colors.white,
        fontSize: 16.0
    );

Answer 3

SnackBar is definitely the right class to use, as pointed out by Darky.

One tricky thing about showSnackBar is getting to the ScaffoldState, if you're trying to call showSnackBar within the build method where you construct your Scaffold.

You might see an error like this, which includes some text explaining how to solve the problem.

══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
The following assertion was thrown while handling a gesture:
Scaffold.of() called with a context that does not contain a Scaffold.
No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of(). This
usually happens when the context provided is from the same StatefulWidget as that whose build
function actually creates the Scaffold widget being sought.
There are several ways to avoid this problem. The simplest is to use a Builder to get a context that
is "under" the Scaffold. For an example of this, please see the documentation for Scaffold.of():
  https://docs.flutter.io/flutter/material/Scaffold/of.html
A more efficient solution is to split your build function into several widgets. This introduces a
new context from which you can obtain the Scaffold. In this solution, you would have an outer widget
that creates the Scaffold populated by instances of your new inner widgets, and then in these inner
widgets you would use Scaffold.of().
A less elegant but more expedient solution is assign a GlobalKey to the Scaffold, then use the
key.currentState property to obtain the ScaffoldState rather than using the Scaffold.of() function.
The context used was:
  MyHomePage
When the exception was thrown, this was the stack:
#0      Scaffold.of (package:flutter/src/material/scaffold.dart:444:5)
#1      MyHomePage.build.<anonymous closure> (/Users/jackson/Library/Developer/CoreSimulator/Devices/7072C907-DBAD-44FE-8F40-0257442C51D9/data/Containers/Data/Application/77FEC1A4-1453-442C-8208-96E0323DEFB2/tmp/so_scratch2Tkq9Jb/so_scratch2/lib/main.dart:23:24)
#2      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:323:14)
#3      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:375:30)
#4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24)
#5      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:149:9)
#6      TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:119:7)
#7      GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)
#8      BindingBase&SchedulerBinding&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:147:20)
#9      BindingBase&SchedulerBinding&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:121:22)
#10     BindingBase&SchedulerBinding&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:101:7)
#11     BindingBase&SchedulerBinding&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:64:7)
#12     BindingBase&SchedulerBinding&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:48:7)
#13     _invoke1 (file:///b/build/slave/Mac_Engine/build/src/flutter/lib/ui/hooks.dart:100)
#14     _dispatchPointerDataPacket (file:///b/build/slave/Mac_Engine/build/src/flutter/lib/ui/hooks.dart:58)
Handler: onTap
Recognizer:
  TapGestureRecognizer#69dbc(debugOwner: GestureDetector, state: ready)
════════════════════════════════════════════════════════════════════════════════════════════════════

You can either pass a GlobalKey to your Scaffold constructor:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final key = new GlobalKey<ScaffoldState>();
    return new Scaffold(
      key: key,
      floatingActionButton: new Builder(
        builder: (BuildContext context) {
          return new FloatingActionButton(
            onPressed: () {
              key.currentState.showSnackBar(new SnackBar(
                content: new Text("Sending Message"),
              ));
            },
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          );
        }
      ),
    );
  }
}

Or you can use a Builder to create a BuildContext that is a child of the Scaffold.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new Builder(
        builder: (BuildContext context) {
          return new FloatingActionButton(
            onPressed: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text("Sending Message"),
              ));
            },
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          );
        }
      ),
    );
  }
}

Finally, you could split your widget into multiple classes, which is the best long-term approach.

Answer 4

To show a Toast message you can use the FlutterToast plugin. To use this plugin, you have to:

1. Add this dependency to your pubspec.yaml file: fluttertoast: ^8.0.8
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 information, check documentation.

Answer 5

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 6

Snack Bar

When I tried to use a solution with using the ScaffoldState object (suggested by others), I got a warning that it is deprecated:

'showSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.showSnackBar. This feature was deprecated after v1.23.0-14.0.pre..

Using ScaffoldMessenger works as expected:

ScaffoldMessenger.of(context)
    .showSnackBar(SnackBar(content: Text("My amazing message! O.o")));

Example:

Answer 7

For the toast message in Flutter, use the bot_toast library. This library provides a feature-rich, support for displaying notifications, text, loading, attachments, etc. Toast

Answer 8

In case the Fluttertoast package given so far doesn’t work, then I will suggest you to try toast.

It has no frills and no ceremony.

It just works.

I noticed a bug within the example given within its README file though:

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

While the method requires a context. So do well to add 'context' like this:

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

There is a chance that this would have been fixed by the time you checked though. I already submitted a PR.

Answer 9

I would like to provide an alternative solution to use package 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 is How can I show a 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 10

There is a three-way to show toast in a Flutter app.

I will tell you about all three ways that I know and choose which one you want to use. I would recommend the second one.

1: Using the external package.

This is the first method which is the easiest way to show toast in a Flutter app.

First of all, you have to add this package to file pubspec.YAML:

flutter_just_toast:^version_here

Then import the package in the file where you want to show a toast.

'package:flutter_just_toast/flutter_just_toast.dart';

And the last step shows the toast.

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

2: Using the official way.

This method is also simple, but you have to deal with it. I am not saying that it is hard it is simple and clean I would recommend this method.

For this method, all you have to do show toast is using the below code.

Scaffold.of(context).showSnackBar(SnackBar(
          content: Text("Sending Message"),
        ));

But remember that you have to use the scaffold context.

3: Using the native API.

Now, this method does not make sense any more when you already have the two methods above. Using this method, you have to write native code for Android and iOS and then convert it to plugin and you are ready to go.

This method will consume your time and you have to reinvent the wheel. Which has already been invented.

Answer 11

Import the library fluttertoast: 3.1.3

Use it like below:

Fluttertoast.showToast(
    msg: "Hello, World!",
    textColor: Colors.white,
    toastLength: Toast.LENGTH_SHORT,
    timeInSecForIos: 1,
    gravity: ToastGravity.BOTTOM,
    backgroundColor: Colors.indigo,
);

Answer 12

For the ones that are looking for a Toast what can survive the route changes, the SnackBar might not be the best option.

Have a look at Overlay instead.

Answer 13

Add flutter_just_toast to your dependencies in your Pubspecs.yaml file.

Dependencies:

flutter_just_toast: ^1.0.1

Next import the package into your class:

import 'package:flutter_just_toast/flutter_just_toast.dart';

Implement Toast with a message:

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

Answer 14

Just use SnackBar(content: Text("hello"),) inside any event like onTap and onPress.

You can read more about Snackbar on Display a snackbar.

Answer 15

You can just straight away to use snack bar element

 ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("Successfully!"),
        behavior: SnackBarBehavior.floating,
        margin: EdgeInsets.all(20),
          shape: StadiumBorder(),
        action: SnackBarAction(
          label: 'Dismiss',
          disabledTextColor: Colors.white,
          textColor: Colors.blue,
          onPressed: () {
            //Do whatever you want
          },
        ),
      ),
    );

Answer 16

You can easily achieve this effect using Overlay.

Code:

OverlayEntry entry = OverlayEntry(builder: (context) {
              return Positioned(
                  top: MediaQuery.of(context).size.height * 0.8,
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    alignment: Alignment.center,
                    child: const Card(
                      color: Colors.redAccent,
                      child: Padding(
                        padding: EdgeInsets.all(8),
                        child: Text("This is a message."),
                      ),
                    ),
                  ));
            });

            //show overlay
            Overlay.of(context)!.insert(entry);
            //auto remove this overlay after 3 seconds
            Future.delayed(const Duration(seconds: 3)).then((value) => entry.remove());

Screenshot:

Answer 17

Use https://pub.dev/packages/toast for toast. This library is pretty easy to use and perfectly works for iOS and Android.

Syntax for showing Toast:

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

Answer 18

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 19

Get the Flutter toast package here

Add this package to your project dependencies in file 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 20

For this, there are different versions.

1. First of all, you can use SnackBar which is a widget in Flutter.

2. You can use libraries like toast - flutter_toast from pub.dev.

3. The third version is creating your custom widget. It can be created using Overlay widget and Animation in Flutter.

You can this this tutorial to learn more about it. Here is a link.

Answer 21

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(SnackBar(
  content: Text("This works!"),
));

Answer 22

Use this:

Fluttertoast.showToast(
    msg: "This is a Toast message",
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.CENTER,
    timeInSecForIos: 1
);

Answer 23

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

dependencies:
  fluttertoast: ^8.0.8

Then import that package in the .dart file you need the toast in 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: 'This is flutterToast example', // Message
          toastLength: Toast.LENGTH_SHORT,    // toast length
          gravity: ToastGravity.CENTER,      // position
          timeInSecForIos: 1,               // duaration
          backgroundColor: Colors.red,     // background color
          textColor: Colors.white         // text color
      );
    }

    @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('Show Toast'),
                  onPressed: showToast,
                ),
              ),
            )
        ),
      );
    }
  }

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

Answer 24

For the Android original graphics toast, you can use this:

It works fine on Android and iOS.

Answer 25

My trick without any extra package, just SnackBar

  final snackBar = SnackBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
    dismissDirection: DismissDirection.none,
    padding: EdgeInsets.zero,
    margin: const EdgeInsets.only(bottom: 15),
    behavior: SnackBarBehavior.floating,
    duration: const Duration(seconds: 2),
    content: Center(
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 14),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color: Color(0xff656565),
        ),
        child: const Text('Click exit again to close app!'),
      ),
    ),
  );

  ScaffoldMessenger.of(context).showSnackBar(snackBar);

Answer 26

Step 1:

Dependencies:

flutter_just_toast: ^1.0.1

---

Step 2:

import 'package:flutter_just_toast/flutter_just_toast.dart';

---

Step 3:

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

---

Answer 27

Use this dependency:

toast: ^0.1.3

Then import the dependency of toast in the page:

import 'package:toast/toast.dart';

Then on onTap() of the widget:

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

Answer 28

There isn't any widget for toast in Flutter. You can go to this plugin.

Use case:

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

Answer 29

It's quite simple:

We just have to install the Flutter toast package. Refer to 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 file and then install.

After this, just import the package:

import 'package:fluttertoast/fluttertoast.dart';

Similar to the above line.

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

You're done!!!

Answer 30

You can use this link to show Toast in Flutter.

Use this as:

void method1(){

    Fluttertoast.showToast(
        msg: "This is Add Button",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.blueGrey,
        textColor: Colors.white,
        fontSize: 14.0
    );
}