[Flutter] Cupertino風なshowModalBottomSheetを作る

![スクリーンショット 2023-12-06 14.26.53（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/d53878be-a811-fedd-eb93-3a770a17b253.png)


<a href="https://qiita.com/advent-calendar/2023/yumemi-23-graduation">
  <img alt="YUMEMI New Grad Advent Calendar 2023" width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png">
</a>

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

https://qiita.com/advent-calendar/2023/yumemi-23-graduation

# 初めに

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



# showModalBottomSheetを使用して実装する

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

```dart
  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`を使った実装もあるので載せておきます。


```dart

  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 |
| ---- | ---- |
| ![showCupertinoModalPopup](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/22847491-175a-636c-f178-68264d7a0243.png) | ![showModalBottomSheet](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/8a63bd16-4f0b-b02e-7c31-9792349726f6.png) |


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



# 最後に

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

# ちょっとした宣伝

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


https://qiita.com/advent-calendar/2023/yumemi-23-graduation



<a href="https://qiita.com/advent-calendar/2023/yumemi-23-graduation">
  <img alt="YUMEMI New Grad Advent Calendar 2023" width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png">
</a>