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

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();
      // },
    );
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值