Flutter中带有圆角的alert对话框

设置BoxDecory的容器位于警告对话框下的小部件树中.这意味着您只在对话框的填充中设置了一个框.您需要创建一个自定义AlertDialog/showDialog并在那里设置半径.在自定义小部件中，您还可以添加按钮以及除了填充之外需要工作的所有内容.

当您在项目(gist.github.com)中包含customShowDialog.dart文件时，您可以在此处编辑半径borderRadius: BorderRadius.all(Radius.circular(20.0))，并按如下方式调用它:

return new CustomAlertDialog(
    content: new Container(
        width: 260.0,
        height: 230.0,
        decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        color: const Color(0xFFFFFF),
        borderRadius:
            new BorderRadius.all(new Radius.circular(32.0)),
        ),
        child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
            // dialog top
            new Expanded(
            child: new Row(
                children: <Widget>[
                new Container(
                    // padding: new EdgeInsets.all(10.0),
                    decoration: new BoxDecoration(
                    color: Colors.white,
                    ),
                    child: new Text(
                    'Rate',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18.0,
                        fontFamily: 'helvetica_neue_light',
                    ),
                    textAlign: TextAlign.center,
                    ),
                ),
                ],
            ),
            ),

            // dialog centre
            new Expanded(
            child: new Container(
                child: new TextField(
                decoration: new InputDecoration(
                border: InputBorder.none,
                filled: false,
                contentPadding: new EdgeInsets.only(
                    left: 10.0,
                    top: 10.0,
                    bottom: 10.0,
                    right: 10.0),
                hintText: ' add review',
                hintStyle: new TextStyle(
                    color: Colors.grey.shade500,
                    fontSize: 12.0,
                    fontFamily: 'helvetica_neue_light',
                ),
                ),
            )),
            flex: 2,
            ),

            // dialog bottom
            new Expanded(
            child: new Container(
                padding: new EdgeInsets.all(16.0),
                decoration: new BoxDecoration(
                color: const Color(0xFF33b17c),
                ),
                child: new Text(
                'Rate product',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontFamily: 'helvetica_neue_light',
                ),
                textAlign: TextAlign.center,
                ),
            ),
            ),
        ],
        ),
    ),
    );
});

你会得到这样的结果:

个

EDIT:个

虽然Ffltter最近推出了shape property，这将通过设置ShapeBorder来帮助您处理圆角，例如

shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(20.0))
),

如上所述，您仍然需要为某些自定义(如自定义填充)快速添加自定义小部件.