[Flutter] showDialogをいい感じのUIに工夫してみる

![スクリーンショット 2023-12-08 11.20.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/d428073a-1c5c-70da-93a5-8ca3b54119e2.png)

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

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


# 初めに

こんにちは。いせりゅーです。

ダイアログを実装したい場合は、とても簡単ですぐにできると思いますが、良いデザインかなと言われると「ちょっとな💦」と悩んでしまうことがよくあります。

実際にFlutterのドキュメントにあるダイアログをみてみると、とても簡素で個人的には避けたいなと思っていました。

![スクリーンショット 2023-12-08 16.21.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/0986ab89-2cf1-17f3-5bb2-2b36de795fbe.png)

https://api.flutter.dev/flutter/material/Dialog-class.html



今回は、いつでも使えそうなダイアログを作ってみることにしました。
あくまでも個人的にいい感じにしてみただけなので、参考程度に読んでくれると嬉しいです。

注意：
こちらの記事を参考にさせていただきました🙇

https://zenn.dev/ryota_iwamoto/articles/dialog_design

# いい感じに実装してみる


いい感じなUIにするために以下のようなことを考えました。
- 角は丸くしたい。
- タイトルとサブタイトルの位置をいい感じに調整したい。
- ボタンを可愛い感じにしてみたい

このような点で実装してみました。

```dart

 void openDialog({
    required BuildContext context
  }) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) {
        return Dialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 24),
                  child: Text(
                    '投稿の削除',
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  subTitle,
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 24),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.red,
                        elevation: 5,
                        shape: const StadiumBorder(),
                      ),
                      onPressed: () => context.pop(),
                      child: const Padding(
                        padding: EdgeInsets.symmetric(
                          vertical: 16,
                          horizontal: 18,
                        ),
                        child: Text(
                          'いいえ',
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                    ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.blue,
                        elevation: 5,
                        shape: const StadiumBorder(),
                      ),
                      onPressed: () {
                        context.pop();
                        onTap();
                      },
                      child: const Padding(
                        padding: EdgeInsets.symmetric(
                          vertical: 16,
                          horizontal: 18,
                        ),
                        child: Text(
                          'はい',
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 24),
              ],
            ),
          ),
        );
      },
    );
  }


```

実際にできたものがこちらです↓

<img width="70%" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/22902fc9-7e69-cc33-6671-197e025c32a7.png" alt="">


# 最後に
工夫するだけでもいいUIができるんだなと感じることができました。これからももっと研究していきたいです！

# ちょっとした宣伝

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


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



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