FlutterOKToast的使用

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: 文本的样式

文章永久链接：https://tech.souyunku.com/43177