Flutter Toast的使用(1)

最新推荐文章于 2024-08-13 08:32:23 发布

2401_84121603

最新推荐文章于 2024-08-13 08:32:23 发布

阅读量643

点赞数 10

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84121603/article/details/137533413

版权

程序员专栏收录该内容

198 篇文章 0 订阅

订阅专栏

);

显示一个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	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(
child: child,
top: 16.0,
left: 16.0,
);
});
}