Flutter Dialog (다이얼로그) 정리 + 간단 예제

📌 1. Dialog란?

✅ 개념

• 화면 위에 뜨는 팝업 창(UI)
• 사용자에게 확인 / 선택 / 입력 등을 받을 때 사용

👉 쉽게 말하면
“사용자에게 물어보는 창”

---

📌 2. 기본 사용 방법

👉 핵심 함수:

showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(...);
  },
);

---

📌 3. 가장 기본 예제

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("알림"),
          content: const Text("정말 삭제하시겠습니까?"),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context); // 닫기
              },
              child: const Text("취소"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text("확인"),
            ),
          ],
        );
      },
    );
  },
  child: const Text("다이얼로그 열기"),
)

---

📌 4. 구성 요소

항목	설명
title	제목
content	내용
actions	버튼 영역

---

📌 5. 닫기 (중요)

Navigator.pop(context);

👉 다이얼로그 닫기

---

📌 6. 결과 값 반환

ElevatedButton(
  onPressed: () async { // 👈 async 필수
    final result = await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("선택"),
          content: const Text("어떤 걸 선택할까요?"),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context, "A"),
              child: const Text("A"),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context, "B"),
              child: const Text("B"),
            ),
          ],
        );
      },
    );

    print("결과: $result");

    if (result == "A") {
      print("A 선택됨");
    } else if (result == "B") {
      print("B 선택됨");
    }
  },
  child: const Text("다이얼로그 열기"),
)

👉 선택 결과 받기 가능

---

📌 7. SimpleDialog (간단 선택용)

showDialog(
  context: context,
  builder: (context) {
    return SimpleDialog(
      title: const Text("옵션 선택"),
      children: [
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context, "A"),
          child: const Text("옵션 A"),
        ),
        SimpleDialogOption(
          onPressed: () => Navigator.pop(context, "B"),
          child: const Text("옵션 B"),
        ),
      ],
    );
  },
);

---

📌 8. 커스텀 Dialog

showDialog(
  context: context,
  builder: (context) {
    return Dialog(
      child: Container(
        padding: const EdgeInsets.all(20),
        child: const Text("커스텀 다이얼로그"),
      ),
    );
  },
);

---

📌 9. 핵심 정리

종류	설명
AlertDialog	일반 알림
SimpleDialog	선택 목록
Dialog	완전 커스텀

---

🚨 자주 하는 실수

❌ context 잘못 사용

👉 build context 사용해야 함

---

❌ Navigator.pop 안함

👉 다이얼로그 안 닫힘

---

🚀 한 줄 핵심

👉 showDialog + AlertDialog = 기본 다이얼로그

---

🔥 실무 팁

• 확인/취소 → AlertDialog
• 선택 리스트 → SimpleDialog
• 디자인 커스텀 → Dialog

---