OKToast 是一款 在 flutter 上 使用的 toast 插件,使用简单, 可定制性强, 纯 flutter, 调用不用 context.
插件文档:pub.dev/packages/ok…
一:基本使用
1,添加依赖
dependencies:
oktoast: ^2.2.0
2,获取依赖包
flutter pub get
3,导入到需要使用的文件中
import 'package:oktoast/oktoast.dart';
4,main.dart中,在MaterialApp外面套一层OKToast组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OKToast(
dismissOtherOnShow: true,
child: MaterialApp(
title: 'FlutterUI学习',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.red,
),
home: DemoApp(),
),
);
}
}
5,在界面中添加按钮,点击按钮测试,如下图所示
二:自定义Toast
1,弹出自定义消息框,在界面创建一个自定义按钮,用来触发自定义消息框
class MyOkToast extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
RaisedButton(onPressed: (){showToast("hello");},child: Text("showToast")),
RaisedButton(onPressed: (){showToastWidget(CorrectToast());},child: Text("自定义Toast")),
],
),
);
}
}
2,新建自定义消息框组件 CorrectToast
class CorrectToast extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
width: 140,
height: 140,
color: Colors.green,
child: Image.asset("images/right.png"),
);
}
}
3,点击按钮测试
三,其他
a,手动隐藏Toast
dismissAllToast();
b,在显示 toast 时隐藏之前显示的所有 toast
showToast("hello", dismissOtherToast: true);
c,全局设置弹出toast之前隐藏已经显示的toast
OKToast(
dismissOtherOnShow: true,
...
)
d,隐藏单独的toast
var future = showToast("hello");
future.dismiss(); // 隐藏指定的toast
e,属性注释
backgroundColor: 背景颜色
duration: 延迟隐藏时间
onDismiss: 隐藏时的回调
position: toast 的位置
radius: 圆角的尺寸
textAlign: 文字在内部的对齐方式
textDirection: ltr 或 rtl
textPadding: 文本距离边框的 padding
textStyle: 文本的样式