flutter dialog对话框支持自定义大小

Flutter dialog对话框支持自定义大小欢迎使用Markdown编辑器欢迎使用Markdown编辑器在平时的需求开发中不可避免要弹出一些对话框提示用户，但默认的showDialog中的SimpleDialog和AlertDialog默认都是宽度全屏的，所以需要满足自定义大小的dialog非常有必要。这里记录下我的实现方式，当然有更好的方式也希望大家分享在评论里ex_dialog.darti

lhj_android

1933人浏览 · 2021-02-23 10:34:20

lhj_android · 2021-02-23 10:34:20 发布

Flutter dialog对话框支持自定义大小

在平时的需求开发中不可避免要弹出一些对话框提示用户，但默认的showDialog中的SimpleDialog和AlertDialog默认都是宽度全屏的，所以需要满足自定义大小的dialog非常有必要。这里记录下我的实现方式，当然有更好的方式也希望大家分享在评论里
ex_dialog.dart

import 'package:flutter/material.dart';

/// 显示指定大小dialog onClickOutSide点击弹窗以外的透明区域 onClickContent点击child区域
Future<T> showCustomSizeDialog<T>(BuildContext context,
    {Widget child, Function onClickOutSide, Function onClickContent}) {
  return showDialog<T>(
    context: context,
    builder: (context) {
      return Material(
        type: MaterialType.transparency,
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: onClickOutSide,
          child: GestureDetector(
            child: Center(
              child: child,
            ),
            onTap: onClickContent ?? () {}, // 默认点击内容区域不透传事件
          ),
        ),
      );
    },
  );
}

例子

showCustomSizeDialog(
      context,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.white,
        child: Text('test'),
      ),
      onClickOutSide: () { // 点击蒙层区域
        //Navigator.of(context).pop();
      },
      // onClickContent: () { // 点击内容区域 这里对应的child
      //   Navigator.of(context).pop();
      // },
    );