Flutter, How to remove white spaces around dialog box? - dialog

Question

I am calling this dialog while getting data from server. This dialog box is having white spaces around it. I can I remove this white space around my dialog box. Here is my code.
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
),
),
),
),
],
),
);
Here I am calling this dialog. I've tried with both AlertDialog() and SimpleDialog() having same issue with both.
showDialog(context: context, child: new AlertDialog(
content: bodyProgress,
));

Answer 1

Inside AlertDialog set contentPadding 0
contentPadding: EdgeInsets.zero,

Answer 2

make title to have Container, and add
width: MediaQuery.of(context).size.width,
Then give 0 (or what value you want to have for horizontal patting) to insetPadding like this:
insetPadding: EdgeInsets.symmetric(horizontal: 0),
Below is my example show dialog code, contains alertDialog with horizontal padding = 15 :
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();
},
),
],
);
},
);
}
This looks like:
display of alert dialog

Answer 3

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

Answer 4

Don't use AlertDialog at all. Just send bodyProgress to showDialog
showDialog(context: context, builder: (_) => bodyProgress,);

Answer 5

add the file to your project https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/dialog.dart, use the CustomAlertDialog and set the contentPadding to 0.0 by using EdgeInsets.all(0.0), finally adjust the border raidius to that of your bodyprogress

Answer 6

use like this ->
using 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>
),
),
));
using alert dialog:------>
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>
),
);
});