Flutter - AlertDialog 팝업창 띄우기

AlertDialog 위젯은 팝업창을 띄울때 많이 사용되는 위젯이다.

AlertDialog를 나타내기 위해서는 showDialog 호출이 필요하며 context, builder 등의 속성을 명시해줘야 한다.
barrierDismissible 속성을 false로 설정하면 dialog 밖에 탭을 하더라도 그것을 무시하는 역할을 한다.
따라서 오로지 Dialog 내부 터치만 인식해야 할 경우에만 사용해줘야 합니다.

builder 속성을 명시하여 AlertDialog 위젯을 return 해주고 AlertDialog는 크게 title(제목), content(내용), actions(작동) 부분으로 나뉘며 
action 부분에 "예","아니요"등의 버튼들이 배치된다.

Navigator.of(context).pop()의 의미는 뒤로 가기라고 생각하면 된다.

플러터는 push와 pop으로 화면을 표시한다. 화면 표시와 진행이 Stack으로 이루어지기 때문에 push와 pop 개념을 꼭 알아야 하며, Dialog도 동일하게 pop()을 이용하여 원래 화면으로 돌아간다 생각하면 된다.

 

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test Title"),
      ),
      body: Container(
        child: Center(
          child: TextButton(
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (BuildContext con) {
                    return AlertDialog(
                      title: const Text("Dialog Title"),
                      content: Container(
                        child: const Text("Dialog Content"),
                      ),
                      actions: [
                        TextButton(
                          onPressed: () => Navigator.of(context).pop(),
                          child: const Text("Close"),
                        )
                      ],
                    );
                  });
            },
            child: Text("Button"),
          ),
        ),
      ),
    );
  }

 

 

해당 글의 전체 코드 : https://github.com/land-waters/flutter-study/blob/chap11/flutter_application_1/lib/main.dart

flutter-study/flutter_application_1/lib/main.dart at chap11 · land-waters/flutter-study