CODEWITHSUNDEEP
dialogdartflutterflutter-layout
Ammy Kang
Ammy Kang

Reputation: 12612

Flutter, How to remove white spaces around dialog box?

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,

));

enter image description here

Upvotes: 39

Views: 39504

Answers (7)

Ali Babayev
Ali Babayev

Reputation: 101

Wrap the content or title with Container or SizedBox, 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),

You'll see:

AlertDialog(
    titlePadding: EdgeInsets.zero,
    contentPadding: EdgeInsets.zero,
    insetPadding: EdgeInsets.zero,
    content: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: ...,
    ),
    ...
);

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

Upvotes: 10

samad shukr
samad shukr

Reputation: 1069

  contentPadding: EdgeInsets.zero

And

 insetPadding: EdgeInsets.zero,

Upvotes: 0

Rasel Khan
Rasel Khan

Reputation: 4299

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

Upvotes: 2

Dhiraj Sharma
Dhiraj Sharma

Reputation: 4879

Inside AlertDialog set contentPadding 0

contentPadding: EdgeInsets.zero,

Upvotes: 90

Joel jones
Joel jones

Reputation: 729

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

Upvotes: 2

chisom onwuegbuzie
chisom onwuegbuzie

Reputation: 457

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

Upvotes: 0

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 277697

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

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

Upvotes: 1

Related Questions