Flutter 經常使用的提示框showToast、showLoading、showConfirmDialog

這是幾個經常使用的全局共用的提示框方法,在我以後的文章裏可能會屢次用到,這裏統一記錄一下。
如下方法所有寫在lib/common/toast.dart中。html

showToast

fluttertoast 適用於Flutter的Android和iOS的Toast庫。
pubspec.yaml文件裏添加:git

fluttertoast: ^3.1.3
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void showToast(
  String text, {
  gravity: ToastGravity.CENTER,
  toastLength: Toast.LENGTH_SHORT,
}) {
  Fluttertoast.showToast(
    msg: text,
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    timeInSecForIos: 1,
    backgroundColor: Colors.grey[600], // 灰色背景
    fontSize: 16.0,
  );
}

使用:github

showToast("刪除成功!");

showLoading

一個加載中的動畫,不傳text時,默認顯示文字Loading...api

void showLoading(context, [String text]) {
  text = text ?? "Loading...";
  showDialog(
      barrierDismissible: false,
      context: context,
      builder: (context) {
        return Center(
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(3.0),
                boxShadow: [
                  //陰影
                  BoxShadow(
                    color: Colors.black12,
                    //offset: Offset(2.0,2.0),
                    blurRadius: 10.0,
                  )
                ]),
            padding: EdgeInsets.all(16),
            margin: EdgeInsets.all(16),
            constraints: BoxConstraints(minHeight: 120, minWidth: 180),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 30,
                  width: 30,
                  child: CircularProgressIndicator(
                    strokeWidth: 3,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: Text(
                    text,
                    style: Theme.of(context).textTheme.body2,
                  ),
                ),
              ],
            ),
          ),
        );
      });
}

使用:動畫

showLoading(context, '刪除中,請等待......');

showConfirmDialog

帶有肯定取消按鈕的提示框,content是提示框的內容文字,confirmCallback是點擊肯定按鈕的回調ui

void showConfirmDialog(BuildContext context,String content, Function confirmCallback) {
  showDialog(
      context: context,
      builder: (context) {
        return new AlertDialog(
          title: new Text("提示"),
          content: new Text(content),
          actions: <Widget>[
            new FlatButton(
              onPressed: () {
                confirmCallback();
                Navigator.of(context).pop();
              },
              child: new Text("確認"),
            ),
            new FlatButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: new Text("取消"),
            ),
          ],
        );
      });
}

使用:code

showConfirmDialog(context, '確認刪除該數據嗎?', () {
          // print('點擊了肯定刪除......');
          // 執行肯定操做後的邏輯
 });

參考資料

fluttertoast
showDialog<T> function
AlertDialog class: A material design alert dialog.
【Flutter】ActionSheet, Alert, Dialoghtm

相關文章
相關標籤/搜索