Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't increase the width of an dialog box in flutter

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"),
                        ),
                    ]
                ),
            ),  
        ),
    ),
);
},
like image 532
Juthi Sarker Aka Avatar asked Mar 21 '19 09:03

Juthi Sarker Aka


People also ask

How do I resize dialog box in flutter?

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.

How do you customize dialog in flutter?

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.


1 Answers

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.

like image 179
Chetan Pawar Avatar answered Oct 18 '22 19:10

Chetan Pawar