Flutter定义圆角的BottomSheet

显示 BottomSheet

我们在少量日常开发的场景中，可能需要使用到BottomSheet来显示菜单，就像这样。

image.png

而在Flutter中，BottomSheet很好实现，只要要一行代码调用Flutter包中自带的BottomSheet显示方法showModalBottomSheet就可。

image.png

使用方法like this：

    void _showMenu(context, Menu menu) {      showModalBottomSheet(        context: context,        builder: (context) => Column(          mainAxisAlignment: MainAxisAlignment.spaceAround,          children: <Widget>[            Expanded(              child: Container(                child: _getMenuList(menu),              ),            ),          ],        ),      );    }

圆角 BottomSheet

但有时候，我们的视觉同学会会觉得这个BottomSheet的角不够圆润，我们想把BottomSheet上面左右两个角改为圆角，Android Native 实现效果如下：

1575008083736970.gif

而对于初学者来说，在设置圆角的路上，采用了少量网上比较坑的方法，或者多或者少都有雷区，其实showModalBottomSheet方法中的参数shape足以达到这个效果：

1575008323387025.gif

我们自己设置一个Shape，设置左上和右上圆角裁剪：

        shape: RoundedRectangleBorder(            borderRadius: BorderRadius.only(              topLeft: Radius.circular(20.0),              topRight: Radius.circular(20.0),            ),          ),

实现方法如下：

    void _showMenu(context, Menu menu) {        showModalBottomSheet(          shape: RoundedRectangleBorder(            borderRadius: BorderRadius.only(              topLeft: Radius.circular(20.0),              topRight: Radius.circular(20.0),            ),          ),          context: context,          builder: (context) => Column(            mainAxisAlignment: MainAxisAlignment.spaceAround,            mainAxisSize: MainAxisSize.max,            children: <Widget>[              Center(child: Text('Test')),            ],          ),        );    }