Flutter——OKToast的使用

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

複製代碼