Multi tool use

How to Size Child of ShowDialog

Using showDialog(...builder: ...), I am unable to size the content of SomeWidget.

showDialog(...builder: ...)

SomeWidget

No matter what widgets I try to insert into the builder I cannot control sizing.

builder

showDialog(context: context, builder: (context) => Container(
color: Colors.white,
width: 10.0,
height: 10.0,
));


No matter which values I insert into width and height, the dialog always displays full screen. The Container in this case will take up all available space. The code I posted above will result in the following:

width

height

Container

Full size screenshot showing an Android screen, where everything except for the navigation bar, status bar and debug tag is filled out with white. (the SafeArea you can see comes from here)

SafeArea

Doing the same but surrounding it with a Padding and applying padding will work as sizing. Applying padding will remove parts from the side of the Container. This is the only successful way I have come up with. E.g. SizedBox or ConstrainedBox do not make a difference.

Padding

padding

Container

SizedBox

ConstrainedBox

Both CupertinoAlertDialog and Material AlertDialog can be inserted as a widget to the builder of showDialog and will not fill up the whole screen.

CupertinoAlertDialog

AlertDialog

builder

showDialog

I tried figuring out what those two widgets are doing differently than me, but to me it looks like they are also using Container sizing or ConstrainedBox as sizing, which both did not work for me.

Container

ConstrainedBox

1 Answer
1

The problem is: Size itself is not enough of an information to actually render it on screen.

Flutter needs some way to know how to align that 10x10 box inside the screen. A Center should do the trick :

Center

showDialog(
builder: (context) {
return Center(
child: Container(),
)
}
)


AlerDialog and similar do the same for you implicitly.

AlerDialog

MaterialApp

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.