来自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
- 添加下列代码到你的依赖配置
fluttertoast: ^8.0.6
- 在使用的地方导入相应的dart库文件
import package:fluttertoast/fluttertoast.dart;
- 弹出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
);
- 取消Toast
Fluttertoast.cancel()
- Toast显示的配置
属性 | 描述 | 默认 |
---|---|---|
msg | String类型 | 必须 |
toastLength | Toast.TENGTH_SHORT 或者 Toast.LENGTH_LONG | Toast.TENGTH_SHORT |
gravity | ToastGravity.TOP 或者 ToastGravity.CENTER 或者 ToastGravity.BOTTOM web只支持top and bottom | ToastGravity.BOTTOM |
timeInSecForIosWeb | int (ios 和 web)的配置 | 1(sec) |
backgroundColor | Colors.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所有平台都通用。
- 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学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》]( )收录