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.
228
votes
30 Answers
295
votes
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(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),
),
);
}
}
118
votes
Use this plugin
Fluttertoast.showToast(
msg: "This is Toast messaget",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIos: 1
);
79
votes
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.
17
votes
To show a Toast message you can use the FlutterToast plugin. To use this plugin, you have to:
- Add this dependency to your pubspec.yaml file:
fluttertoast: ^3.1.0 - To get the package, you have to run this command:
$ flutter packages get - 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 this.
13
votes
7
votes
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.
7
votes
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);
6
votes
5
votes
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
5
votes
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.
4
votes
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:
3
votes
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);
3
votes
Just use SnackBar(content: Text("hello"),) inside any event like onTap and onPress.
You can read more about Snackbar on Display a snackbar.
3
votes
For this, there are different versions.
First of all, you can use SnackBar which is a widget in Flutter.
You can use libraries like toast - flutter_toast from pub.dev.
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.
2
votes
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.
2
votes
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);
2
votes
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);
2
votes
You can use library "fluttertoast". To do this, add it in the pubspec.yaml file like:
dependencies:
fluttertoast: ^3.1.0
Then import that library 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: '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());
2
votes
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!"),
));
2
votes
1
votes
For the Android original graphics toast, you can use this: https://pub.dartlang.org/packages/fluttertoast
It Works fine on Android and iOS.
1
votes
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);
1
votes
1
votes
1
votes
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,);
1
votes
Importcupertino_icons: ^0.1.2 and write the below code:
showToast(BuildContext context, String message) {
showDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text("Name of App",
content: Text(message,
actions: <Widget>[
FlatButton(
child: Text("OK"),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
});
1
votes
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!!!
1
votes
You can use Flutter commons package to display different types of toasts like success, error, warning and information in flutter applications.
successToast("Success Message");
1
votes
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
);
}
