Flutter底部弹出菜单showModalBottomShee

最近有几个小伙伴在使用到showModalBottomSheet时经常在群里问如何设置顶部圆角，于是乎激起了我的好奇心，我们先看下正常情况下用showModalBottomSheet设置圆角的话会怎么样 image.png

showModalBottomSheet(
          context: context,
          builder: (BuildContext context) {
              return Container(
                    height: 200,
                    width: double.infinity,
                    child: Center(child: Text("showModalBottomSheet")),
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(25),
                        topRight: Radius.circular(25),
                      ),
                    ),
              );
            },
          );

可以看到topLeft和topRight虽然设置了圆角但是会漏出底部的背景色，很尴尬，不是我们想要的效果

在查看showModalBottomSheet的源码时发现它使用了应用主题的默认亮度设置Brightness.light并且菜单弹出时的遮罩颜色为Colors.black54 image.png

知道了以上这些，那怎么实现顶部圆角呢，上图 image.png

代码很简单只需使用stack在顶部的底层加上container并将container的颜色设置成菜单弹出时遮罩的颜色Colors.black54即可

          showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              return Stack(
                children: <Widget>[
                  Container(
                    height: 25,
                    width: double.infinity,
                    color: Colors.black54,
                  ),
                  Container(
                    height: 200,
                    width: double.infinity,
                    child: Center(child: Text("showModalBottomSheet")),
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(25),
                        topRight: Radius.circular(25),
                      ),
                    ),
                  ),
                ],
              );
            },
          );

这样我们的顶部圆角就设置成功了

还有一种方法是直接修改MaterialApp中brightness为 Brightness.dark,但是实用这种方法主题就变成了全黑色，不太实用。

以上就是设置showModalBottomSheet圆角的方法，这个不是最优解，只是暂时的实现了功能，如果小伙伴们有更好的办法可以在评论告诉我 哈哈