CODEWITHSUNDEEP
dartflutter
creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126694

How to Size Child of ShowDialog

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

What is happening

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

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:

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)

Padding

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.

What I would like to see

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

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.

Upvotes: 18

Views: 20279

Answers (3)

Hassaan
Hassaan

Reputation: 120

Use Column

showDialog(
            context: context,
            builder: (context) {
              return FadeInDownBig(
              child: Column(
                children: [
                  Container(
                      height: 0.5.sh,
                      width: 1.sw,
                      decoration: BoxDecoration(
                          color: MyTheme.yellowLight,
                          borderRadius: const BorderRadius.only(
                              bottomLeft: Radius.circular(40),
                              bottomRight: Radius.circular(40)),
                          boxShadow: const [
                            BoxShadow(color: Colors.black, offset: Offset(0, 10))
                          ]),
                    ),
                ],
              ),
            );
            },
          );

Upvotes: 0

dhaval_nakum
dhaval_nakum

Reputation: 330

You need to wrap the Container Widget with Center Widget.

Updated Code :

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

Upvotes: 3

Rémi Rousselet
Rémi Rousselet

Reputation: 277037

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

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

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

AlertDialog and similar do the same for you implicitly.

Upvotes: 52

Related Questions