最近有幾個小伙伴在使用到showModalBottomSheet時經(jīng)常在群里問如何設(shè)置頂部圓角，于是乎激起了我的好奇心成福，我們先看下正常情況下用showModalBottomSheet設(shè)置圓角的話會怎么樣
![]()
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雖然設(shè)置了圓角但是會漏出底部的背景色嚼酝，很尷尬房铭，不是我們想要的效果
在查看showModalBottomSheet的源碼時發(fā)現(xiàn)它使用了應(yīng)用主題的默認(rèn)亮度設(shè)置Brightness.light并且菜單彈出時的遮罩顏色為Colors.black54
![]()
image.png
image.png
知道了以上這些，那怎么實現(xiàn)頂部圓角呢耍贾，上圖
![]()
image.png
image.png
代碼很簡單只需使用stack在頂部的底層加上container并將container的顏色設(shè)置成菜單彈出時遮罩的顏色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),
),
),
),
],
);
},
);
