Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Size Child of ShowDialog

Tags:

flutter

dart

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.

like image 209
creativecreatorormaybenot Avatar asked Jul 02 '18 20:07

creativecreatorormaybenot


People also ask

How do I use showDialog in flutter?

In its on the pressed property, we have to use the showDialog widget of flutter. It takes context and a builder. In builder, we provide the AlertDialog widget with title, content(Description of a title), and actions (Yes or no buttons), and our alert dialog box is ready to use.

How do you align dialog flutters?

You can Use Align widget and align your dialog widget as per your need. Here in example i am setting it to the bottomCenter that is Alignment(0, 1) . Example code: Align( alignment: Alignment(0, 1), child: Material( shape: RoundedRectangleBorder(borderRadius: BorderRadius.


2 Answers

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.

like image 57
Rémi Rousselet Avatar answered Jan 21 '23 15:01

Rémi Rousselet


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,
    ),
  ),
);
like image 32
dhaval_nakum Avatar answered Jan 21 '23 13:01

dhaval_nakum