最近有几个小伙伴在使用到showModalBottomSheet时经常在群里问如何设置顶部圆角，于是乎激起了我的好奇心，我们先看下正常情况下用showModalBottomSheet设置圆角的话会怎么样
![]()
image.png
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
知道了以上这些，那怎么实现顶部圆角呢，上图
![]()
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),
),
),
),
],
);
},
);
