[Flutter] Cupertino風なshowModalBottomSheetを作る

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗

初めに

個人開発をしており、写真を投稿するアプリの作成において、カメラかアルバムの選択をいい感じのUIにできたらなと思い、Cupertinoを使えばいいと思っており、実装してみたところ、謎の不具合が発生してしました。そのため、今回は工夫してshowModalBottomSheetを使用して個人的にいいUIにしてみました😚

showModalBottomSheetを使用して実装する

今回はshowModalBottomSheetを使用して、UIの調整を色々としてみました。

  void openModalBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return Container(
          height: MediaQuery.sizeOf(context).height / 4,
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(30),
                topLeft: Radius.circular(30),
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(
                  child: TextButton(
                    onPressed: () {
                      Navigator.pop(context);
                      // カメラを開く処理を記載（今回は省略）
                    },
                    child: Text(
                      'カメラ',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                ),
                Divider(),
                TextButton(
                  onPressed: () {
                    Navigator.pop(context);
                    // アルバムを開く処理を記載（今回は省略）
                  },
                  child: Text(
                    'アルバム',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      color: Colors.blue,
                    ),
                  ),
                ),
                Divider(),
                TextButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text(
                    '閉じる',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      color: Colors.red,
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

showCupertinoModalPopupを使用した実装

ちなみに、こちらでshowCupertinoModalPopupを使った実装もあるので載せておきます。

  void openShowCupertinoModalPopup() {
    showCupertinoModalPopup(
      context: context,
      builder: (context) => CupertinoActionSheet(
        actions: [
          CupertinoActionSheetAction(
            isDefaultAction: true,
            onPressed: () {
              Navigator.pop(context);
              // カメラを開く処理を記載（今回は省略）
            },
            child: const Text(
              'カメラ',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
          ),
          CupertinoActionSheetAction(
            onPressed: () {
              Navigator.pop(context);
              // アルバムを開く処理を記載（今回は省略）
            },
            child: const Text(
              'アルバム',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.black,
              ),
            ),
          ),
          CupertinoActionSheetAction(
            isDestructiveAction: true,
            onPressed: () => Navigator.pop(context),
            child: const Text('閉じる'),
          ),
        ],
      ),
    );
  }

UIを比べてみよう

showCupertinoModalPopup	showModalBottomSheet

どうでしょうか・・？少しだけ違いはあるもののいい感じの再現度でできていると思います〜😚

最後に

Cupertinoをできるだけ使わずに実装できたらなと思っていて色々工夫していましたが、結局Cupertinoを使った方が便利だなと思ったりしました💦

ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！