Flutter，如何删除对话框周围的空格？答案

【问题标题】：Flutter, How to remove white spaces around dialog box?Flutter，如何删除对话框周围的空格？
【发布时间】：2018-11-27 01:42:02
【问题描述】：

我在从服务器获取数据时调用此对话框。此对话框周围有空格。我可以删除对话框周围的这个空白区域。这是我的代码。

var bodyProgress = new Container(
 decoration: new BoxDecoration(
  color: Colors.blue[200],
  borderRadius: new BorderRadius.circular(10.0)
 ),
width: 300.0,
height: 200.0,
//color: Colors.blue,
alignment: AlignmentDirectional.center,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
  new Center(
    child: new SizedBox(
      height: 50.0,
      width: 50.0,
      child: new CircularProgressIndicator(
        value: null,
        strokeWidth: 7.0,
      ),
    ),
  ),
  new Container(
    margin: const EdgeInsets.only(top: 25.0),
    child: new Center(
      child: new Text(
        "Signing up...",
        style: new TextStyle(
            color: Colors.white
           ),
         ),
       ),
     ),
   ],
  ),
);

我在这里调用这个对话框。我已经尝试过 AlertDialog() 和 SimpleDialog() 两者都有相同的问题。

showDialog(context: context, child: new AlertDialog(
  content: bodyProgress,

));

【问题讨论】：

标签： dialog dart flutter flutter-layout

【解决方案1】：

根本不要使用AlertDialog。只需将bodyProgress 发送至showDialog

showDialog(context: context, builder: (_) => bodyProgress,);

【讨论】：

那是因为这是你的bodyProgress 所做的。

【解决方案2】：

在AlertDialog里面设置contentPadding 0

contentPadding: EdgeInsets.zero,

【讨论】：

感谢 Diraj，这工作正常，但正如您所见，我使用的是圆形半径框，圆角处仍有空白。
这是因为你的 bodyProgress 容器有边界半径。将边框半径减小到 2.0。
我们不能让这种白色透明吗？这样我们就可以使用边框半径的盒子装饰
好方法，但我认为EdgeInsets.zero 更干净
@KaremMohamed 感谢您的建议。

【解决方案3】：

将文件添加到你的项目https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dialog.dart，使用CustomAlertDialog并使用EdgeInsets.all(0.0)将contentPadding设置为0.0，最后将边框raidius调整为你的bodyprogress

【讨论】：

【解决方案4】：

titlePadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,

【讨论】：

【解决方案5】：

使标题有容器，并添加

width: MediaQuery.of(context).size.width,

然后像这样给 insetPadding 0（或者你想要水平拍打的值）：

insetPadding: EdgeInsets.symmetric(horizontal: 0),

下面是我的示例显示对话框代码，包含水平填充 = 15 的 alertDialog：

Future<void> _showLogoutDialog(BuildContext context) async {
    return showDialog<void>(
      context: context,
      barrierDismissible: true,
      builder: (BuildContext context) {
        return AlertDialog(
          titlePadding: EdgeInsets.only(top: 12, left: 24, right: 12),
          contentPadding: EdgeInsets.only(top: 12, left: 24, bottom: 20),
          insetPadding: EdgeInsets.symmetric(horizontal: 15),
          titleTextStyle: TextStyle(
            color: ColorStyles.primary_blue500,
            fontFamily: 'Muli',
            fontWeight: FontWeight.w500,
            fontStyle: FontStyle.normal,
            fontSize: 16.0,
          ),
          contentTextStyle: TextStyle(
            color: ColorStyles.grey2,
            fontFamily: 'Muli',
            fontWeight: FontWeight.w400,
            fontStyle: FontStyle.normal,
            fontSize: 14.0,
          ),
          title: Container(
            width: screenUsableHeight(context),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('Log out'),
                IconButton(
                  icon: Icon(
                    Icons.close,
                    color: ColorStyles.grey2,
                    size: 28,
                  ),
                  onPressed: () => Navigator.of(context).pop(),
                  splashColor: Colors.transparent,
                  highlightColor: Colors.transparent,
                  tooltip: "close",
                )
              ],
            ),
          ),
          //EN: Logging out
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('Do you want to leave?'),
              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text(
                'Yes',
                style: TextStyle(
                  color: ColorStyles.primary_blue500,
                  fontFamily: 'Muli',
                  fontWeight: FontWeight.w500,
                  fontStyle: FontStyle.normal,
                  fontSize: 16.0,
                ),
              ), //EN: Yes
              onPressed: () {
                _logOut(context);
              },
            ),
            FlatButton(
              child: Text(
                'No',
                style: TextStyle(
                  color: ColorStyles.grey2,
                  fontFamily: 'Muli',
                  fontWeight: FontWeight.w500,
                  fontStyle: FontStyle.normal,
                  fontSize: 16.0,
                ),
              ), //EN: No
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

这看起来像：

display of alert dialog

【讨论】：

【解决方案6】：

这样使用 ->

使用get: ------------->

Get.generalDialog(
        pageBuilder: (BuildContext buildContext, Animation animation,
                Animation secondaryAnimation) =>
            AlertDialog(
              contentPadding: EdgeInsets.zero,
               // this padding user for outside of alert padding
              insetPadding: EdgeInsets.symmetric(horizontal: 10),
              content: Container(
                height: Get.height - 300, // Change as per your requirement
                width: Get.width, // Change as per your requirement
                
                child: <Your Widget>
                ),
              ),
            ));

使用警告对话框：------>

CustomAlertDialog(
    content: new Container(
        width: 260.0,
        height: 230.0,
        decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        color: const Color(0xFFFFFF),
        borderRadius:
            new BorderRadius.all(new Radius.circular(32.0)),
        ),
        child: <Your widget>
    ),
    );
});

【讨论】：