Flutter,如何去除对话框周围的空白?

问题描述 投票:0回答:7

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

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
7个回答
79
投票

AlertDialog 内部设置 contentPadding 0

contentPadding: EdgeInsets.zero,

4
投票

使标题具有Container,并添加

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


1
投票

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


1
投票

像这样使用->

使用 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>
    ),
    );
});

0
投票

根本不要使用

AlertDialog
。只需将
bodyProgress
发送至
showDialog

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

0
投票

将文件添加到您的项目中

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dialog.dart
,使用
CustomAlertDialog
并使用EdgeInsets.all(0.0)将contentPadding设置为0.0,最后将边框raidius调整为您的bodyprogress的


0
投票
  contentPadding: EdgeInsets.zero

还有

 insetPadding: EdgeInsets.zero,
                        
© www.soinside.com 2019 - 2024. All rights reserved.