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

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

初めに

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

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

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

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

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

いい感じに実装してみる

いい感じなUIにするために以下のようなことを考えました。

• 角は丸くしたい。
• タイトルとサブタイトルの位置をいい感じに調整したい。
• ボタンを可愛い感じにしてみたい

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

 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),
              ],
            ),
          ),
        );
      },
    );
  }

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

最後に

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

ちょっとした宣伝

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