Flutter Dialog模态框使用及自定义Dialog

自定义dialog插件

用来弹出确认取消提示框，或者自定义模态框

1. 自定义类：

    import 'package:flutter/material.dart';
    class dialogUtil {
      /**
      * 通用显示确定按钮框
      */
      static showConfirmDialog(context, options) {
        showDialog(
            context: context,
            // 点击背景区域是否可以关闭
            barrierDismissible: options["barrierDismissible"] ?? true,
            builder: (BuildContext context) {
              return _ConfirmDialog(
                  title: options["title"],
                  okCallback: options["confirm"],
                  cancelCallBack: options["cancel"]);
            });
      }
      static showCustomerChargeCoinQrcodeDialog(
          BuildContext context, String qrcodeData, options) {
        showDialog(
            context: context,
            // 点击背景区域是否可以关闭
            barrierDismissible: options["barrierDismissible"] ?? true,
            builder: (BuildContext context) {
              return _ConfirmDialog(
                  data: data, closeCallback: options["close"]);
            });
      }
    }
   
    /**
    *  确认弹框类
    */
    class _ConfirmDialog extends Dialog {
      _ConfirmDialog(
          {Key key,
          this.title,
          // 取消事件回调
          this.cancelCallBack,
          // 确定事件回调
          this.okCallback})
          : super(key: key);
      final String title;
      final cancelCallBack;
      final okCallback;
   
      @override
      Widget build(BuildContext context) {
        return WillPopScope(
          //  屏蔽安卓的手机返回键
          onWillPop: () async {
            return Future.value(false);
          },
          child: AlertDialog(
            title: Text(title ?? '确定****?'),
            actions: [
              FlatButton(
                child: Text('取消'),
                onPressed: () {
                  Navigator.pop(context, false);
                  if (cancelCallBack != null) {
                    cancelCallBack();
                  }
                },
              ),
              FlatButton(
                child: Text('确定'),
                onPressed: () {
                  Navigator.pop(context, true);
                  if (okCallback != null) {
                    okCallback();
                  }
                },
              ),
            ],
          ),
        );
      }
    }
   
    /**
    * 自定义弹框
    */
    class _CustomerDialog extends Dialog {
      _CustomerDialog(
          {Key key,
          this.data,
          // 关闭事件回调
          this.closeCallback})
          : super(key: key);
      final closeCallback;
   
      @override
      Widget build(BuildContext context) {
        return Center(
            child: Container(
          height: Constants().h865,
          width: Constants().w590,
          child: GestureDetector(
            onTap: () {
              // 点击关闭事件
              if (closeCallback != null) {
                closeCallback();
              }
              Navigator.pop(context, true);
            },
            child: Image.asset(
              "assets/images/popup_shut.png",
              width: Constants().w62,
              height: Constants().h92,
            ),
          )
        ));
      }
    }
   Copy

2. 使用方式：

    import 'package:demo_app/utils/dialog_util.dart';
   
    dialogUtil.showConfirmDialog(context, {
      "title": "弹框内容",
      "confirm": () {
        // 确定按钮事件
      },
      "cancel":(){
        // 取消按钮事件
      }
    });

欢迎加群讨论更多flutter相关问题(7天有效）如果失效，可加个人微信拉群