showModalBottomSheet组件是从底部弹出的UI组件。其高度默认为屏幕高度的一半。

如果需要自定义高度，要设置isScrollControlled属性为true可滚动（默认是false，不可滚动）

1
2
3
4
5
6
7
8
9
10
11
12
showModalBottomSheet(
  backgroundColor: const Color.fromRGBO(244, 244, 244, 1),
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
  ),
  clipBehavior: Clip.hardEdge,
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return const SheetTemplate();
  },
);

在SheetTemplate组件中设置高度

1
2
3
4
5
6
double screenHeight = MediaQuery.of(context).size.height;

Container(
  height: screenHeight * 0.8,
  color: Colors.black,
);