Flutter 简易 dialog 封装

这么大个程序员摸鱼社区,竟然完全没有Flutter相关的技术内容,那么我就先随便发点东西打破0发帖吧!

这是个简易的dialog封装,使用方便,代码挺基础的。

使用方式
IWPZDialog.show(
      context,
      title: '提示',
      height: 300,
      cancelToDismiss: true,
      onCancelTap: () {
        print('点击了取消');
      },
      onOKTap: () async {
        print('点击了确定');
      },
      contentWidget: Container(
        child: Text('我是正文内容'),
      ),
    );
iwpz_dialog.dart
import './navigator_util.dart';
import 'package:flutter/material.dart';

class IWPZDialog {
  static void show(
    BuildContext context, {
    String title = '', //标题
    String content = '', //正文,如果有contentWidget,则无视
    Widget? contentWidget, //正文widget
    bool showCancel = true, //是否显示取消
    bool tapToDismiss = true, //点击空白处关闭
    bool cancelToDismiss = true, //点击取消是否关闭
    double height = 220, //宽度
    double width = 400, //高度
    Function? onOKTap, //onOK
    Function? onCancelTap, //onCancel
  }) {
    showDialog(
        context: context,
        barrierDismissible: tapToDismiss,
        builder: (context) {
          return GestureDetector(
            onTap: () {
              if (tapToDismiss) {
                NavigatorUtil.pop(context);
              }
            },
            child: Material(
              color: Colors.transparent,
              child: GestureDetector(
                onTap: () {},
                child: Center(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Color(0xB3242A37),
                    ),
                    padding: EdgeInsets.only(top: 32, left: 30, right: 30),
                    height: height,
                    width: width,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        title.isEmpty
                            ? Container()
                            : Container(
                                margin: EdgeInsets.only(bottom: 20),
                                child: Text(
                                  title,
                                  style: TextStyle(
                                    fontSize: 22,
                                    fontWeight: FontWeight.w400,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                        contentWidget != null
                            ? Container(
                                child: contentWidget,
                              )
                            : content.isEmpty
                                ? Container()
                                : Container(
                                    child: Text(
                                      content,
                                      style: TextStyle(
                                        fontSize: 19,
                                        color: Colors.white,
                                      ),
                                    ),
                                  ),
                        Expanded(
                          child: Container(),
                        ),
                        Container(
                          height: 72,
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              showCancel
                                  ? Expanded(
                                      flex: 1,
                                      child: GestureDetector(
                                        onTap: () {
                                          if (onCancelTap != null) {
                                            onCancelTap();
                                          }
                                          if (cancelToDismiss) {
                                            NavigatorUtil.pop(context);
                                          }
                                        },
                                        child: Container(
                                          alignment: Alignment.center,
                                          child: Text(
                                            '取消',
                                            style: TextStyle(
                                              fontSize: 19,
                                              color: Colors.white,
                                            ),
                                          ),
                                        ),
                                      ),
                                    )
                                  : Container(),
                              showCancel
                                  ? Container(
                                      width: 1,
                                      height: 30,
                                      color: Color(0x4DFFFFFF),
                                    )
                                  : Container(),
                              Expanded(
                                flex: 1,
                                child: GestureDetector(
                                  onTap: () {
                                    if (onOKTap != null) {
                                      onOKTap();
                                      NavigatorUtil.pop(context);
                                    }
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    child: Text(
                                      '确定',
                                      style: TextStyle(
                                        fontSize: 19,
                                        color: Color(0xFF0C66FF),
                                      ),
                                    ),
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          );
        });
  }
}

navigator_util.dart
import 'package:flutter/material.dart';

class NavigatorUtil {
  static pop(BuildContext context) {
    Navigator.pop(context);
  }

  static popUntil(BuildContext context, String routeName) {
    Navigator.popUntil(context, (route) {
      if (route.settings.name == routeName) {
        return true;
      }
      return false;
    });
  }

  static push(
    BuildContext context, {
    required Widget page,
    String routeName = '',
    bool isModal = false,
    Function(dynamic)? then,
  }) {
    Navigator.of(context)
        .push(MaterialPageRoute(
            fullscreenDialog: isModal,
            settings: RouteSettings(
              name: routeName.isEmpty ? page.toString().toLowerCase() : routeName, // 如无指定routeName,则使用类名作为routeName,便于popUntil。
            ),
            builder: (context) {
              return page;
            }))
        .then((value) {
      if (then != null) {
        then(value);
      }
    });
  }

  static pushAndRemove(
    BuildContext context, {
    required Widget page,
    String routeName = '',
    String until = '',
  }) {
    Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(
          settings: RouteSettings(name: routeName.isEmpty ? page.toString().toLowerCase() : routeName),
          builder: (context) {
            return page;
          },
        ), (route) {
      if (until.isEmpty) { // 如果pop无until限定,则无条件pop到结束。
        return false;
      } else {// 如果pop存在until限定,则pop到until就停止。
        if (until == route.settings.name) {
          return true;
        } else {
          return false;
        }
      }
    });
  }
}