Flutter, How to remove white spaces around dialog box?

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,

));

Manzoni

Answer 1

Inside AlertDialog set contentPadding 0

contentPadding: EdgeInsets.zero,

Brickey

Thanks Diraj, this is working fine, but as you can see I am using circular radius box, there is still white space where the corners are round. – Manzoni

Its because your bodyProgress container has border radius. Decrease border radius to 2.0. – Brickey

can't we make this white color transparent? so that we can use box decoration with border radius – Manzoni

Good approach, but I think EdgeInsets.zero is more cleaner – Uam

UPDATE 2022: contentPadding: const EdgeInsets.all(0) – Footwear

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

Dissonant

Answer 3

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

Encomiast

Answer 4

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

Biquadrate

Answer 5

Don't use AlertDialog at all. Just send bodyProgress to showDialog

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

Armistead

That's because it's what your bodyProgress do. – Elinoreeliot

Answer 6

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

Cenogenesis

Answer 7

  contentPadding: EdgeInsets.zero

And

 insetPadding: EdgeInsets.zero,
                        

Sapphera

The top-voted answer already suggests the first one. Why is the second one also necessary or useful here? Are you suggesting either will work? Or that both are necessary? Can you edit your answer to provide an explanation? – Bedrabble