Flutter,如何删除对话框周围的空格?
Flutter, How to remove white spaces around dialog box?
我在从服务器获取数据时调用此对话框。这个对话框周围有白色的 spaces。我可以删除对话框周围的白色 space 吗?这是我的代码。
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,
));
根本不要使用 AlertDialog
。只需发送 bodyProgress
至 showDialog
showDialog(context: context, builder: (_) => bodyProgress,);
在 AlertDialog 内部设置 contentPadding 0
contentPadding: EdgeInsets.zero,
将文件添加到您的项目https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dialog.dart
,使用CustomAlertDialog
并使用EdgeInsets.all(0.0)将contentPadding设置为0.0,最后将边框radius调整为您的身体进步
titlePadding: EdgeInsets.zero,
contentPadding: EdgeInsets.zero,
让title有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
这样使用 ->
使用获取:------------>
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>
),
);
});
我在从服务器获取数据时调用此对话框。这个对话框周围有白色的 spaces。我可以删除对话框周围的白色 space 吗?这是我的代码。
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,
));
根本不要使用 AlertDialog
。只需发送 bodyProgress
至 showDialog
showDialog(context: context, builder: (_) => bodyProgress,);
在 AlertDialog 内部设置 contentPadding 0
contentPadding: EdgeInsets.zero,
将文件添加到您的项目https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dialog.dart
,使用CustomAlertDialog
并使用EdgeInsets.all(0.0)将contentPadding设置为0.0,最后将边框radius调整为您的身体进步
titlePadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
让title有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
这样使用 ->
使用获取:------------>
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>
),
);
});