颤动,如何删除对话框周围的空白?

时间:2018-06-18 08:41:04

标签: dialog dart flutter flutter-layout

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

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,

));

enter image description here

6 个答案:

答案 0 :(得分:3)

Inside AlertDialog设置了contentPadding 0

contentPadding: EdgeInsets.all(0.0),

答案 1 :(得分:1)

根本不使用<!-- component.html --> *ngFor="let item of filterFunction(items)" // component.ts sortFunction(items) { return items.sort(); } 。只需将AlertDialog发送至bodyProgress

即可
showDialog

答案 2 :(得分:0)

将文件添加到项目https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dialog.dart中,使用CustomAlertDialog并通过EdgeInsets.all(0.0)将contentPadding设置为0.0,最后将边框raidius调整为您身体进度的边框

答案 3 :(得分:0)

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

答案 4 :(得分:0)

使标题具有容器,然后添加

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

答案 5 :(得分:-1)

像这样使用->

使用获取:------------->

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