[Flutter] 알림창, 팝업창 (showDialog, AlertDialog) [맥북💻]

 목차

1. 알림창
   1. showDialog
   2. AlertDialog() 위젯
   3. 예시

 

 

 

✅ 알림창

 

 

1️⃣ showDialog

• AlertDialog, SimpleDialog, Custom 위젯 등을 보여줄 수 있음
• 사용자가 닫기 전까지 뒤의 화면과 상호작용 불가 (Modal 특성)

// 기본형태

showDialog(
  context: context,
  builder: (BuildContext con){    // builder 함수는 항상 BuildContext를 매개변수로 받음
    return AlertDialog();
  }
);

 

 

2️⃣ AlertDialog() 위젯

• 화면 위에 모달 창(뒤에 있는 화면을 잠시 막는 창)을 띄워서 사용자에게 정보를 보여주거나, 확인/취소 같은 선택을 받는 용도
• 보통 showDialog 안에서 builder가 AlertDialog를 반환하도록 사용
• 주요 속성
  • title : 다이얼로그의 상단 제목
  • content : 다이얼로그 속 내용 (설명, 입력창, 이미지 등 활용 가능)
  • actions : 다이얼로그 하단에 배치되는 버튼, List<Widget> 형태
  • shape : 다이얼로그의 형태 커스텀

 

3️⃣ 예시

1. TextButton() 위젯 클릭
2. showDialog 작동

TextButton() 위젯 클릭

TextButton 하위의 showDialog 작동

 

 

 

 

 

 

 

 

 

 

✔️ 사용된 코드

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Test Title"),
    ),
    body: Center(
      child: TextButton(
          onPressed: (){
            showDialog(
              context: context,
              builder: (BuildContext con){    // builder 함수는 항상 BuildContext를 매개변수로 받음
                return AlertDialog(
                  title: Text("알림창"),
                  content: Text("Content 입니다"),
                  actions: [
                    TextButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: Text("Continue")
                    ),
                    TextButton(
                      onPressed: () => Navigator.of(context).pop(),
                      child: Text("Close")
                    ),
                  ],
                );
              }
            );
          },
          child: Text("벝은")
      ),
    ),
  );
}