Alert Dialog

flutter에서 alert dialog를 띄우는 법에 대해 알아보자.

우리 주변에서 alert dialog는 흔히 볼 수 있다. (확인여부, 오류 알림 등등...)

필자의 dart 버전은 다음과 같다. (null safety가 적용된 버전)

 

null safety가 적용된 버전이다. 구글에서 flutter 구글링을 할때 아직 null safety가 적용된 예시를 많이 보지 못했다...ㅜ

먼저 StatefulWidget의 Dialog라는 클래스를 만들고, Scaffold형식으로 리턴하도록 했다.

그 후 body에 Column 형식, 가운데 정렬로 위젯들이 들어가도록 했다. 그리고 버튼을 하나 만들고, 버튼을 누를 때 다이어로그가 띄워지도록 함수를 넣어줬다.

 

Dialog 클래스

 

버튼을 누르면 실행될 함수 flutterDialog()는 다음과 같다.

 

버튼을 누르면 다이어로그를 띄우는 함수

 

이 함수에서 AlertDialog 클래스를 반환하는데 AlertDialog 클래스는 title, content, actions 3개의 영역을 정의한다.

• title: 제목 영역
• content: 내용 영역
• action: 버튼 영역

여기서 다이어로그가 사라지는 것은 Navigator.of(context).pop()으로 실행되고,

다이어로그 바깥 부분을 터치해도 사라지지 않는 것은 barrierDismissible: false로 설정해주면 된다!

 

 

그러면 다음과 같은 결과가 된다!

다이어로그가 띄워진다!