无法增加颤动对话框的宽度

Question

我需要在我的应用程序中构建一个弹出对话框。我正在使用Dialog类并用SizedBox类包装它以增加对话框的宽度。但是，对话框的宽度不会增加。我怎样才能增加它的宽度？

   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"),
                                              ),
                                            ],
                                          ),
                                        ),  
                                    ),
                                   ),
                                    );
                                },

Answer 1

flazter的size小部件的Dialog在源代码中以符合Material准则的方式预设。您可以通过修改flutter安装目录中Dialog的源代码来更改dialog.dart小部件的大小：

      \flutter\packages\flutter\lib\src\material

并修改这些行（104和115）：

      padding: MediaQuery.of(context).viewInsets + const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),

而且：

     constraints: const BoxConstraints(minWidth: 280.0),

但这将适用于您当前和未来所有Dialog的变化。另一种方法是通过复制原始dialog.dart内容（或者您可以从flutter repository获取）并修改上述参数并在需要自定义时使用它来创建自定义对话框类。但是你冒着违反Material guidlines的风险，这将对你的应用用户体验产生负面影响。

Answer 2

试试这个

            `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"),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              );`

这里我已经用生成器替换了showDialog的子参数，因为它已被弃用并且使用了dailogs，它是从屏幕边界边缘化的。因此，如果你想让dailog适合整个屏幕它不能但是如果widder屏幕或在横向，所以宽度可以更改为一个限制