如何在 Flutter 中创建 Toast

Question

我可以在 Flutter 中创建类似于 Toasts 的东西吗？

只是一个很小的通知 window，它不直接面向用户，也不会锁定或淡化后面的视图。

Answer 1

更新： Scaffold.of(context).showSnackBar 在 Flutter 2.0.0（稳定版）中已弃用

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

然后做类似的事情

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

小吃店是 material 设计的官方“Toast”。参见 Snackbars。

这是一个完整的示例：

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

正如 Darky 所指出的，

SnackBar 绝对是正确的 class 使用。

如果您尝试在构建 Scaffold 的构建方法中调用 showSnackBar，那么关于 showSnackBar 的一个棘手问题是到达 ScaffoldState。

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

══╡ 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 作为脚手架的子项。

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

最后，您可以将小部件拆分为多个 class，这是最好的长期方法。

Answer 3

使用fluttertoast插件

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

Answer 4

要显示 Toast 消息，您可以使用 FlutterToast 插件。要使用此插件，您必须：

将此依赖项添加到您的 pubspec.yaml 文件：fluttertoast: ^8.0.8
要获取包，您必须运行此命令：$ flutter packages get
导入包：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');

有关详细信息，请查看 this。

Answer 5

万一目前给出的Fluttertoast包还不行，那我建议你试试toast.

它没有多余的装饰，也没有仪式感。

它很管用。

虽然我注意到其 README 文件中给出的示例中存在错误：

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

虽然该方法需要上下文。所以最好像这样添加 'context'：

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

有可能在您查看时已修复此问题。我已经提交了 PR。

Answer 6

对于Android原图toast，可以使用this:

它在 Android 和 iOS 上运行良好。

Answer 7

使用 https://pub.dev/packages/toast 敬酒。这个库非常易于使用，并且非常适合 iOS 和 Android.

显示 Toast 的语法：

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

Answer 8

第 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);

Answer 9

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

如包所述：如果您在通知用户时需要更多自定义，请使用此包。对于 Android 开发人员，它是用来替代吐司和小吃店的。

另一个使用flushbar的建议是

您还可以将 flushbarPosition 设置为 TOP 或 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

你可以使用类似 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,
);

就是这样...

Answer 11

使用此依赖项：

toast: ^0.1.3

然后在页面引入toast的依赖：

import 'package:toast/toast.dart';

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

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

Answer 12

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

改为查看 Overlay。

Answer 13

您可以使用这个包：toast

将此行添加到您的依赖项

toast: ^0.1.5

然后像这样使用它：

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

Answer 14

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

依赖关系：

flutter_just_toast: ^1.0.1

下一步将包导入您的 class:

import 'package:flutter_just_toast/flutter_just_toast.dart';

使用消息实现 Toast：

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

Answer 15

Get the Flutter toast package here

将此包添加到文件 pubspec.yaml.

中的项目依赖项

然后每当您想要显示 Toast 时，就像点击按钮一样：

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

Answer 16

Flutter 中没有toast 的widget。你可以去this plugin.

用例：

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

Answer 17

只需在 onTap 和 onPress 等任何事件中使用 SnackBar(content: Text("hello"),)。

您可以在 Display a snackbar 上阅读更多关于 Snackbar 的信息。

Answer 18

您可以使用 fluttertoast 包。为此，将其添加到 pubspec.yaml 文件中，例如：

dependencies:
  fluttertoast: ^8.0.8

然后将该包导入到您需要 toast 的 .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());

Answer 19

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

    );
});

Answer 20

导入库fluttertoast：3.1.3

像下面这样使用它：

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

Answer 21

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 22

为此，有不同的版本。

首先，你可以使用SnackBar，它是Flutter中的一个widget
您可以使用 toast 之类的库 - flutter_toast 来自 pub.dev.
第三个版本正在创建您的自定义小部件。可以使用 Flutter 中的 Overlay widget 和 Animation 创建。

您可以阅读本教程以了解更多信息。这里是 a link.

Answer 23

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

Answer 24

在Flutter 应用中有三种显示toast 的方式

我会告诉你我所知道的所有三种方式，然后选择你想使用的一种。我会推荐第二个。

1：使用外包。

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

首先，您必须将此包添加到文件 pubspec.YAML:

flutter_just_toast:^version_here

然后在你要展示的文件中导入包。

'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 编写本机代码，然后将其转换为插件，然后就可以开始了。

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

Answer 25

很简单：

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

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

之后，只需导入包：

import 'package:fluttertoast/fluttertoast.dart';

类似于上面的行。

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

你完成了！！！

Answer 26

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

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

Answer 27

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

我建议最佳方法是在 class 中声明一个 scaffoldState 键并将其分配给 Scaffold，如下所示：

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

然后

Scaffold(
  key: _scaffoldKey,
  ...
)

当你想显示 Snackbar 时，这样做：

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

Answer 28

您可以使用Flutter commons package在flutter应用程序中显示不同类型的toast，如成功、错误、警告和信息。

successToast("Success Message");

Answer 29

您可以使用 this link 在 Flutter 中显示 Toast。

用作：

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

Answer 30

小吃店

当我尝试使用 ScaffoldState 对象的解决方案（由其他人建议）时，我收到一条警告，指出它 已弃用 :

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

使用 ScaffoldMessenger 按预期工作：

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

示例：

Answer 31

使用这个：

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

如何在 Flutter 中创建 Toast

How to create Toast in Flutter

toast

dart

android-toast

flutter

第 1 步：

第 2 步：

第 3 步：

将此行添加到您的依赖项

然后像这样使用它：