[013] 플러터 (Flutter) 배우기 - AlertDialog (팝업창 띄우기)

안녕하세요~ totally 개발자입니다.

AlertDialog

 

오늘 다뤄볼 위젯은 AlertDialog이며 플러터에서 팝업창을 띄울 때 많이 사용되는 위젯으로 바로 예제 실습으로 들어가 보겠습니다.

 

GestureDetector 준비

먼저 GestureDetector의 onTap 같이 탭을 인식하는 속성을 가진 위젯을 사용해서 AlertDialog를 띄워보도록 하겠습니다. GestureDetector 위젯을 만들어주고 onTap으로 탭을 했을 때, 그 탭의 기준은 child의 Container 위젯입니다.

 

onTap 내부를 채운 모습

34번째 onTap의 내부를 작성한 모습입니다. AlertDialog를 나타내기 위해서는 showDialog 호출이 필요하며 context, builder 등의 속성을 명시해주어야 합니다. 37번째의 barrierDismissible: false은 사용자가 dialog 밖에 탭을 하더라도 그것을 무시하는 역할을 합니다. 따라서 오로지 Dialog 내부 터치만 인식해야 할 경우에 사용해주어야 합니다. builder 속성을 명시하여 AlertDialog 위젯을 return 해주고 AlertDialog는 크게 title(제목), content(내용), actions(작동) 부분로 나뉘며 action 부분에 보통 "예", "아니오", "확인", "닫기" 등의 버튼들이 여기에 배치되어 사용됩니다. 51번째의 Navigator.of(context).pop()의 의미는 뒤로 가기라고 생각하시면 됩니다. 플러터에서는 push, pop으로 화면을 표시합니다. 즉 Stack 알고리즘을 활용하여 스크린을 표시하는 것이며 쉬운 예로 메인 페이지 -> 페이지1 -> 페이지2 이렇게 사용자가 진행했다고 가정했을 때, 뒤로 가기 버튼을 누르면 페이지2 -> 페이지1 -> 메인 페이지 -> 어플 종료가 되는 순서입니다. 플러터에서는 화면 표시와 진행이 Stack으로 이루어지기 때문에 push, pop 개념을 반드시 알고 계셔야 하며 Dialog도 동일하게 pop()을 해줌으로써 원래 화면으로 되돌아간다고 생각하시면 됩니다. 이 스크린 Navigator는 추후 더 자세히 알아보도록 하겠습니다.

 

AlertDialog 테스트 모습

결론적으로 위의 모습처럼 네모 박스를 탭했을 때 위처럼 나타나고 Close 버튼을 눌렀을 때 창이 닫히면 성공입니다. 다음 시간에는 이미지 위젯들에 관해 살펴보도록 하겠습니다. 감사합니다.

 

[전체 소스 코드]

 

 

[유튜브 강좌 영상]

 

https://youtu.be/moSATVVPe-Q