来自Material Design的官方Toast，Snackbars

在执行某些操作的时候，给用户一些简短的通知可能会很有用。例如当用户从列表中删掉一条消息时，您可能想通知他该消息已经删除了，甚至我们的程序可以提供给用户一个撤销的操作。

在Material Design中，SnackBar可以给我们提供此项功能。要在flutter中使用Snackbar我们可以按照下面步骤。

创建一个Scaffold

创建遵循Material Design准则的应用程序时，请为您的应用程序提供一致的外观结构。在此例子中，Snackbar在屏幕底部显示，并且不与其他重要小部件(FloatingActionButton)重叠

Scaffold来自Material Design的小部件创建了这种视觉结构，病确保重要的窗口小组件不会重叠。

Scaffold(
appBar: AppBar(
title: Text(SnackBar Demo),
),
body: SnackBarPage(), // Complete this code in the next step.
);

显示一个SnackBar

创建好了Scaffold，显示SnackBar时首先我们要创建一个SnackBar，然后使用ScaffoldMessenger显示它。

final snackBar = SnackBar(content: Text(Yay! A SnackBar!));
// 从组件树种找到ScaffoldMessager，并用它去show一个snackBar
ScaffoldMessenger.of(context).showSnackBar(snackBar);

给SnackBar提供一个可选操作

当显示SnackBar时，我们可能想要向用户提供一个操作。例如，如果用户不小心删除了一条消息，则他们可以在SnackBar中使用可选的动作来恢复该消息。

下面展示如何在SnackBar给用户提供可选操作。

final snackBar = SnackBar(
content: Text(Yay! A SnackBar!),
action: SnackBarAction(
label: Undo,
onPressed: () {
// 我们只需要在此处处理用户需要撤销的操作就行了。
},
),
);

来自第三方库的依赖，fluttertoast

fluttertoast是一个来自第三方库的给用户弹出toast提示的实现，它覆盖了安卓，IOS，及web等平台。它内部提供了两种方显示toast的方式，让我们可以在flutter中轻松的弹出toast。

fluttertoast的使用

1.利用channel显示各个原生平台toast

  1. 添加下列代码到你的依赖配置

fluttertoast: ^8.0.6

  1. 在使用的地方导入相应的dart库文件

import package:fluttertoast/fluttertoast.dart;

  1. 弹出Toast

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

  1. 取消Toast

Fluttertoast.cancel()

  1. Toast显示的配置
属性描述默认
msgString类型必须
toastLengthToast.TENGTH_SHORT 或者 Toast.LENGTH_LONGToast.TENGTH_SHORT
gravityToastGravity.TOP 或者 ToastGravity.CENTER 或者 ToastGravity.BOTTOM web只支持top and bottomToastGravity.BOTTOM
timeInSecForIosWebint (ios 和 web)的配置1(sec)
backgroundColorColors.red

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

| null |
| textcolor | Colors.white | null |
| fontSize | 16.0(float) | null |
| webShowClose | false(bool) | false |
| webBgColor | String(hex Color) | linear-gradient(to right, #00b09b, #96c93d) |
| webPosition | String(left,center,right) | right |

flutter平台实现的toast

FToast 是作者在flutter平台实现的toast，他不依赖原生操作系统直接在flutterview层面显示toast，所以用此方式实现的toast所有平台都通用。

  1. FToast使用

由于FToast使用起来比较简单，我们这里直接上demo

FToast fToast;

@override
void initState() {
super.initState();
fToast = FToast();
fToast.init(context);
}

_showToast() {
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.greenAccent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check),
SizedBox(
width: 12.0,
),
Text("This is a Custom Toast"),
],
),
);

fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2),
);

// Custom Toast Position
fToast.showToast(
child: toast,
toastDuration: Duration(seconds: 2),
positionedToastBuilder: (context, child) {
return Positioned(

自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中...

本文已被[CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》]( )收录