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();
// },
);