🐥

Flutterで下からせりあがる角丸のいい感じのモーダルの実装

2021/04/24に公開1

下からせりあがる角丸のいい感じのモーダルを実装しました。
FlutterにはshowModalBottomSheetというのがもとから用意されています。

  showModalBottomSheet(
      //モーダルの背景の色、透過
      backgroundColor: Colors.transparent,
      //ドラッグ可能にする(高さもハーフサイズからフルサイズになる様子)
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return Container(
            margin: EdgeInsets.only(top: 64),
            decoration: BoxDecoration(
              //モーダル自体の色
              color: Colors.white,
              //角丸にする
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20),
                topRight: Radius.circular(20),
              ),
            ),
            child: child);
      });

イメージ図

Discussion