어플리케이션을 사용하다보면 특정 버튼을 눌렀을 때 사용자의 입력 여부를 재차 확인하는 팝업 메세지를 띄어주는 것을 본 적이 있을 것이다.
당근마켓
을 예로 들면 중고거래 게시물에서 아무런 내용을 작성하지 않고 저장을 누르게 되면 아래와 같이 내용을 입력해달라는 팝업 메세지가 뜬다.
이런 팝업 메세지를
플러터
에서는 어떻게 구현할 수 있을까? 🤔
바로 ShowDialog와 AlertDialog를 활용해서 구현할 수 있다. 바로 알아보자.
우선 해당 기능을 이용하기 위해서 두 개의 위젯을 사용해야한다.
이런 식으로 사용한다. 간단하게 설명해보자면 textFormField
입력 값을 검증하고 제대로 입력 된 경우에 이를 저장하고 팝업 메세지를 띄우는 식으로 구현했다.
필수 속성으로 context와 builder를 갖는다.barrierDismissible
은 팝업 메세지가 띄어졌을 때 뒷배경의 touchEvent
가능 여부에 대한 값이다. false
로 넣어주면 뒷배경의 touchEvent
발생을 막는다. builder
에 AlertDialog
를 넣어준다.
AlertDialog
역시 다양한 속성을 갖는다. 나는 content
와 action
만 사용했다.
몇 가지 궁금증이 들어서 코드에 변형을 줘봤다.
뜨긴 뜬다. showDialog
가 기존 화면 위에 올라가는 것을 볼 수 있다.
된다. actions
에 Center
위젯과 FlatButton
을 넣어주면 된다.
서버와 연결하여 업로드 진행 중일 때는 사용자에게 CircularIndicator
를 출력하도록 구현했다.