如何创建吐司颤振

我可以在Flutter中创建类似祝酒的东西吗?

enter image description here

只是一个很小的通知窗口，不直接面对用户，也不锁定或淡出它后面的视图。

253633 次浏览
小开
最佳答案

更新: Scaffold.of(context).showSnackBar在Flutter 2.0.0中已弃用(稳定)

你可以使用ScaffoldMessenger.of(context)访问父类ScaffoldMessengerState。

然后做一些类似的事情

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

零食条是官方的“吐司”;从材料设计。看到Snackbars。

下面是一个完整的例子:

Enter image description here

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),
),
);
}
}
小开

正如Darky指出的那样，SnackBar绝对是可以使用的正确类。

Snackbar

关于showSnackBar的一个棘手的事情是到达ScaffoldState，如果你试图在构建Scaffold的构建方法中调用showSnackBar。

您可能会看到这样的错误，其中包括一些解释如何解决问题的文本。

══╡ 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)
════════════════════════════════════════════════════════════════════════════════════════════════════

你可以将GlobalKey传递给你的Scaffold构造函数:

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),
);
}
),
);
}
}

或者你可以使用Builder来创建一个BuildContext，它是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),
);
}
),
);
}
}

最后，您可以将小部件分成多个类，这是最佳的长期方法。

小开

使用fluttertoast插件

将这一行添加到依赖项中

fluttertoast: ^8.1.1

然后你可以使用没有构建上下文的吐司(功能有限，无法控制UI，请检查文档)

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

enter image description here

小开

要显示Toast消息，您可以使用FlutterToast插件。要使用这个插件，你必须:

  1. 将这个依赖项添加到你的pubspec.yaml文件
  2. 要得到这个包，你必须运行这个命令:$ flutter packages get
  3. 导入包:import 'package:fluttertoast/fluttertoast.dart';

像这样使用它:

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

有关更多信息，请查看这。

小开

如果到目前为止给出的Fluttertoast包不工作，那么我会建议你尝试烤面包。

它没有装饰，也没有仪式。

Enter image description here < p >

它就是有用。

我注意到在它的README文件中给出的例子中有一个错误:

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

而该方法需要一个上下文。所以要像这样添加“上下文”:

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

有一个机会，这将在你检查的时候被修复。我已经提交了PR。

小开

对于Android原始图形吐司，你可以使用这:

它在Android和iOS上运行良好。

enter image description here

小开

为吐司使用https://pub.dev/packages/toast。这个库非常容易使用，适用于iOS和Android。

显示Toast的语法:

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

步骤1:

依赖关系:

flutter_just_toast: ^1.0.1

步骤2:

import 'package:flutter_just_toast/flutter_just_toast.dart';

步骤3:

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

我想提供一个使用包flushbar的替代解决方案。

正如包中所说:如果在通知用户时需要更多自定义，请使用此包。对于Android开发人员来说，它可以替代吐司和零食条。

另一个使用flushbar的建议是如何在Flutter导航器.pop(上下文)后显示小吃条?< / >

你也可以设置flushbarPosition为TOP或BOTTOM:

Enter image description here

    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);
小开

你可以使用FlutterToast之类的软件。

导入库:

fluttertoast: ^2.1.4

像下面这样使用它:

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

就是这样……

小开

使用这个依赖:

toast: ^0.1.3

然后在页面中导入toast的依赖关系:

import 'package:toast/toast.dart';

然后在小部件的onTap ()上:

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

对于那些正在寻找能够在路由变化中幸存的Toast的人来说，SnackBar可能不是最好的选择。

让我们来看看Overlay。

小开

你可以使用这个包:烤面包

将这一行添加到依赖项中

toast: ^0.1.5

然后这样使用它:

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

将flutter_just_toast添加到Pubspecs.yaml文件中的依赖项中。

依赖关系:

flutter_just_toast: ^1.0.1

接下来将包导入到你的类中:

import 'package:flutter_just_toast/flutter_just_toast.dart';

用一条消息实现Toast:

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

在这里获得Flutter toast包

将此包添加到文件pubspec.yaml中的项目依赖项中。

然后当你想要吐司显示时，就像点击一个按钮:

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

颤振里没有任何烤面包的小部件。你可以去这个插件。

用例:

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

只需在任何事件中使用间小吃店(内容:文本(“hello"))，如onTap和onPress。

你可以在显示一个零食条上阅读更多关于Snackbar的信息。

小开

你可以使用fluttertoast包。为此，将其添加到pubspec.yaml文件中，如下所示:

dependencies:
fluttertoast: ^8.0.8

然后在你需要吐司的.dart文件中导入这个包并编写代码。

例如，参考以下代码:

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());
小开

进口cupertino_icons: ^0.1.2和编写以下代码:

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();
},
)
],


);
});
小开

导入库fluttertoast: 3.1.3

像下面这样使用它:

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

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
);
小开

对此，有不同的版本。

  1. 首先，您可以使用SnackBar，这是Flutter中的一个小部件。

  2. 你可以从pub.dev中使用toast - flutter_toast这样的库。

  3. 第三个版本是创建自定义小部件。它可以在Flutter中使用Overlay小部件和动画创建。

您可以通过本教程了解更多相关知识。这里是一个链接。

小开

对于Flutter中的toast消息，使用bot_toast库。这个库提供了丰富的功能，支持显示通知、文本、加载、附件等。烤面包

Enter image description here

小开

在Flutter应用程序中有一个三种方式来显示吐司。

我会告诉你我所知道的三种方法，并选择你想要使用的一种。我推荐第二种。

1:使用外挂包。

这是第一个方法，这是最简单的方法显示吐司在Flutter应用程序。

首先，你必须将这个包添加到文件pubspec。YAML中:

flutter_just_toast:^version_here

然后在您想要显示toast的文件中导入该包。

'package:flutter_just_toast/flutter_just_toast.dart';

最后一步是祝酒词。

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

2:使用官方的方式。

这种方法也很简单，但你必须处理它。我并不是说它很难，而是简单干净，我会推荐这种方法。

对于这个方法，你所要做的就是使用下面的代码。

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

但是请记住，您必须使用脚手架上下文。

3:使用本地API。

现在，当你已经有了上面的两个方法时，这个方法就没有意义了。使用这种方法，你必须为Android和iOS编写本地代码，然后将其转换为插件，你就可以开始了。

这种方法会消耗你的时间，你必须重新发明轮子。这已经被发明出来了。

小开

这很简单:

我们只需要安装Flutter toast包。 请参考以下文档: https://pub.dev/packages/fluttertoast < / p >

在安装选项卡中，你将获得依赖项，你必须将其粘贴到pubspec.yaml文件中，然后安装。

在此之后，只需导入包:

import 'package:fluttertoast/fluttertoast.dart';

类似于上面的一行。

然后通过使用FlutterToast类你可以使用你的FlutterToast。

你完成 ! !

小开

在Flutter中显示Toast消息非常简单:

Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Toast Text Here"),
));
小开

答案Scaffold.of(context).showSnackBar(...)在大多数情况下都不起作用。

我建议最佳的方法是在类中声明一个Scaffold state键，并将其分配给Scaffold，如下所示:

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

然后

Scaffold(
key: _scaffoldKey,
...
)

当你想要显示零食栏时，这样做:

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

你可以使用这个链接在Flutter中显示烤面包。

可以这样使用:

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
);
}
小开

< >强小吃店< / >强

当我尝试使用ScaffoldState对象的解决方案(由其他人建议)时，我得到了一个警告，它是弃用:

'showSnackBar'已弃用，不应该使用。使用ScaffoldMessenger.showSnackBar。此特性在v1.23.0-14.0.pre..之后已弃用。

使用ScaffoldMessenger可以正常工作:

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

例子:

小吃店消息

小开

用这个:

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

你可以直接使用小吃店的元素

 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
},
),
),
);

提交答案