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

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


当前回答

你可以很容易地实现这种效果使用叠加。

代码:

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

截图:

其他回答

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

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

对此,有不同的版本。

首先,您可以使用SnackBar,这是Flutter中的一个小部件。 您可以使用pub.dev中的toast - flutter_toast等库。 第三个版本是创建自定义小部件。它可以在Flutter中使用Overlay小部件和动画创建。

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

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

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

在这里买颤振吐司包

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

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

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

这很简单:

我们只需要安装颤动吐司包。 请参考以下文档: https://pub.dev/packages/fluttertoast

在安装选项卡,你会得到依赖,你必须把它粘贴到pubspec。Yaml文件然后安装。

在此之后,只需导入包:

import 'package:fluttertoast/fluttertoast.dart';

类似于上面的一行。

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

你做完了! !