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