スマホでよく見る「警告通知」flutterで作れます

こんにちは:woman_tone1:
この記事は、スマホでよく見る警告通知のアラートダイアログをflutterで実装する方法を記載しています。
今年の7月からflutterを勉強し始めて、
アラートダイアログの実装に少々手こずったので復習として実装してみました。



# 実行例
```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MainApp()));
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.pink,
              title: const Text("Flutter!!!!"),
            ),
            body: Center(
              child: ElevatedButton(
                  //アラートダイアログを出現させるためのトリガー
                  style: ElevatedButton.styleFrom(
                    elevation: 0,
                    backgroundColor: const Color(0xffF76969),
                    fixedSize: const Size(280, 57),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5.0)),
                  ),
                  child: const Text(
                    "Push",
                    style: TextStyle(
                        color: Color(0xffFFFFFF),
                        fontWeight: FontWeight.bold,
                        fontSize: 18),
                  ),
                  onPressed: () {
                    showDialog(
                        context: context,
                        builder: (context) {
                          return AlertDialog(
                              //アラートダイアログを表示
                              content: SizedBox(
                            height: 100,
                            width: 339,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                const Text(
                                  'データを削除してよろしいですか？',
                                  style: TextStyle(
                                      fontSize: 15,
                                      color: Color(0xff40536A),
                                      fontWeight: FontWeight.bold),
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(top: 20),
                                  child: ElevatedButton(
                                    style: ElevatedButton.styleFrom(
                                      elevation: 0,
                                      backgroundColor: const Color(0xffF76969),
                                      fixedSize: const Size(100, 40),
                                      shape: RoundedRectangleBorder(
                                          borderRadius:
                                              BorderRadius.circular(5.0)),
                                    ),
                                    child: const Text(
                                      "はい",
                                      style: TextStyle(
                                          color: Color(0xffFFFFFF),
                                          fontWeight: FontWeight.bold,
                                          fontSize: 18),
                                    ),
                                    onPressed: () {
                                      //元の画面に戻る
                                      Navigator.pop(
                                        context,
                                      );
                                    },
                                  ),
                                )
                              ],
                            ),
                          ));
                        });
                  }),
            )));
  }
}

```

# 解説

1\.アラートダイアログを出現させるためのトリガーを用意。今回はElevatedButtonを使用しています。
2\.ボタンを押す(onPressed)と、showDialogを使ってダイアログに移動する処理を書きます。
3\.アラートダイアログにもElevatedButtonを用意し、ボタンを押す(onPressed)と元の画面に戻る処理にします。

# 最後に
一度コードをそのまま貼り付けて、動かしてみるとわかりやすいと思います🎵
最後まで読んでいただきありがとうございます！