Flutter定義圓角的BottomSheet

顯示 BottomSheet

我們在一些日常開發的場景中，可能需要使用到BottomSheet來顯示菜單，就像這樣。

而在Flutter中，BottomSheet很好實現，只需要一行代碼調用Flutter包中自帶的BottomSheet顯示方法showModalBottomSheet即可。

使用方法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 實現效果如下：

而對於初學者來說，在設置圓角的路上，採用了一些網上比較坑的方法，或多或少都有雷區，其實showModalBottomSheet方法中的參數shape足以達到這個效果：

我們自定義一個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')),
            ],
          ),
        );
    }