flutter - 如何更改 ModalBottomSheet 的边框和高度？

Question

我想创建一个允许我设置高度和边框的自定义模式，我已经有了这个。

home.dart

body: Center(
    child: RaisedButton(child: Text('Open'), onPressed: () {
      showModalBottomSheet(context: context, builder: (BuildContext context) {
        return HomeModal();
      });
    }),
  ),

home_modal.dart

Widget build(BuildContext context) {
return Container(
  color: Colors.transparent,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(40.0),
    child: Container(
      height: 800.0,
      width: double.infinity,
      color: Colors.blue,
      child: Center(
        child: new Text("Hi modal sheet"),
      ),
    ),
  ),
);

我已经尝试过用容器来

  Widget build(BuildContext context) {
    return Container(
      height: 300.0,
      color: Colors.transparent,
      child: new Container(
          decoration: new BoxDecoration(
              color: Colors.green,
              borderRadius: new BorderRadius.only(
                  topLeft: const Radius.circular(40.0),
                  topRight: const Radius.circular(40.0))),
          child: new Center(
            child: new Text("Hi modal sheet"),
          )),
    );
  }

当前行为

Answer 1

要使 ModalBottomSheet 的角变圆，您需要将 MaterialApp 小部件的 canvasColor 设置为透明。

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

要设置 ModalBottomSheet 的高度，您需要将 Container 小部件的高度设置为您想要的值。

Widget build(BuildContext context) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(40.0),
    child: Container(
      height: ####, // your desired height here
      width: double.infinity,
      color: Colors.blue,
      child: Center(
        child: new Text("Hi modal sheet"),
      ),
    ),
 );