颤动底板角半径

Question

我正在编写一个需要底角为半径的应用程序。您可以在Google Task应用中看到类似的内容。

这是我的代码

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Colors.transparent,
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

仍显示没有边框半径的工作表。

好的，我找到了一个理由。它确实显示圆角，但由于脚手架背景颜色，容器的背景保持白色。现在的问题是如何覆盖脚手架背景颜色。

Answer 1

对于仍在尝试解决此问题的人：

由于某些原因Colors.transparent不起作用，所以你需要做的就是改变颜色：Color(0xFF737373)

showModalBottomSheet(
        context: context,
        builder: (builder) {
          return new Container(
            height: 350.0,
            color: Color(0xFF737373),
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.white,
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(10.0), topRight: const Radius.circular(10.0))),
                child: new Center(
                  child: new Text("This is a modal sheet"),
                )),
          );
        });

Answer 2

好的，所以将我的应用程序主题中的canvasColor更改为Colors.transparent。

Answer 3

  _settingModalBottomSheet(context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext bc){
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(ScreenUtil().setWidth(16)),
              topRight: Radius.circular(ScreenUtil().setWidth(16))
            ),
          ),
        );
      }
    );
  }

它看起来像这样：result_1

在main.dart中添加以下代码后：

return MaterialApp(
  theme: ThemeData(
    canvasColor: Colors.transparent
  ),
);

它看起来像这样：result_2