[Flutter] ShowDialog와 AlertDialog을 활용한 팝업 메세지 구현

Dohyeon Ko·2021년 11월 18일
2

플러터

목록 보기
2/2
post-thumbnail

어플리케이션을 사용하다보면 특정 버튼을 눌렀을 때 사용자의 입력 여부를 재차 확인하는 팝업 메세지를 띄어주는 것을 본 적이 있을 것이다.

당근마켓 을 예로 들면 중고거래 게시물에서 아무런 내용을 작성하지 않고 저장을 누르게 되면 아래와 같이 내용을 입력해달라는 팝업 메세지가 뜬다.

이런 팝업 메세지를 플러터 에서는 어떻게 구현할 수 있을까? 🤔

바로 ShowDialog와 AlertDialog를 활용해서 구현할 수 있다. 바로 알아보자.

ShowDialog, AlertDialog

사용법

우선 해당 기능을 이용하기 위해서 두 개의 위젯을 사용해야한다.

이런 식으로 사용한다. 간단하게 설명해보자면 textFormField 입력 값을 검증하고 제대로 입력 된 경우에 이를 저장하고 팝업 메세지를 띄우는 식으로 구현했다.

필수 속성으로 context와 builder를 갖는다.barrierDismissible 은 팝업 메세지가 띄어졌을 때 뒷배경의 touchEvent 가능 여부에 대한 값이다. false 로 넣어주면 뒷배경의 touchEvent 발생을 막는다. builderAlertDialog 를 넣어준다.

AlertDialog 역시 다양한 속성을 갖는다. 나는 contentaction 만 사용했다.

몇 가지 궁금증이 들어서 코드에 변형을 줘봤다.

1. builder return에 AlertDialog가 아닌 다른 위젯을 넣으면?

뜨긴 뜬다. showDialog가 기존 화면 위에 올라가는 것을 볼 수 있다.

2. 당근마켓처럼 팝업 메세지의 중앙에 버튼 1개만 위치하도록 구현?

된다. actionsCenter 위젯과 FlatButton 을 넣어주면 된다.

실행

서버와 연결하여 업로드 진행 중일 때는 사용자에게 CircularIndicator 를 출력하도록 구현했다.

profile
티스토리로 옮겼어요! (https://codekodo.tistory.com)

0개의 댓글