I need to build a pop up dialog box in my app. I am using Dialog class and wrapped it with SizedBox class to increase the width of the dialog box. But, the width of the dialog box is not increasing. How can I increase the width of it?
onTap: () {
showDialog(
context: context,
child:SizedBox(
width: 900,
child: Dialog(
backgroundColor :Colors.white,
insetAnimationDuration: const Duration(milliseconds: 10),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: Container(
child: Column(
children: <Widget>[
Text('hello'),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text("OK"),
),
]
),
),
),
),
);
},
We cannot change the size of the Dialog screens directly. There is no width, height or size attribute in AlertDialog or SimpleDialog classes. The only way we can increase the size of the dialog is by adding a “Container” with a “Column” widget that in turn holds the “SimpleDialogOption” widgets.
Flutter custom Alert Dialog If you want to implement more advanced custom Dialog, you can use Dialog widget for that. Instead of the AlertDialog , in here we return Dialog widget. The showDialog method will remain the same. You can use a Container widget to set relevant height for the Dialog.
Try this
showDialog(
context: context,
builder: (context) {
return Dialog(
backgroundColor: Colors.white,
insetAnimationDuration: const Duration(milliseconds: 100),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: Container( // use container to change width and height
height: 200,
width: 400,
child: Column(
children: <Widget>[
Text('hello'),
FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text("OK"),
),
],
),
),
);
},
);
I replaced child
parameter of with builder
, since child
is deprecated.
It is margined from screen boundaries, so it can't cover the whole screen, but can cover up to a limit.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With