[Flutter] Progress Dialog 라이브러리

지난번 progress dialog 관련해서 글을 쓰면서 Progress Dialog 를 사용하면 싱글 스레드 문제를 지적한 적이 있었다. showDialog()함수를 부르고 난 뒤에 바로 Navigator.pop()을 하면 progress 는 닫히지 않고 기존 View가 닫혀버리는 문제가 있다. 이러한 문제가 있어 build 함수 내에서 Visibility Widget을 활용하거나 조건문을 사용하는 방식이 flutter에서 더 좋은 방법이라고 설명했었다. 그런데 이런 방식은 기존 View 위에 나타나는 View를 만들기 위해서 전체 화면 위에 구조를 짜야하기 때문에 Widget의 계층 구조가 한단계 더 만들어 져야 하고 구조가 좀더 복잡해 진다. 

 기본 구조가 하나의 Scaffold 안에 AppBar와 Body로 이루어진 구조이라면 여기서 Progress를 추가하게 되면다음과 같은 구조의 변화가 생긴다. 이러한 구조 변화는 사실 이렇게 보면 크지 않은 변화라고 생각이 들겠지만 실제로 복잡한 화면을 구현하면 이 계층구조가 10개씩 생기기도 한다. 이러한 계층 구조 방식으로 개발함으로써 편리한점도 있지만 반면에 가독성 문제, 복잡도 증가, 등 불편한 점도 많다. 

 

Progress 추가로 인한 build 구조 변화

 

 

다이얼로그를 활용해서 Progress를 보여주는 방식을 없을까 생각을 하게되었다. 그래서 생각해낸 방식이 Future 객체를 Dialog 객체 내에 추가하여 Future 가 끝나는 시점에 Dialog를 닫는 방법을 생각하게 되었고, 간단하게 package를 만들어서 사용하게 되었다. 이 Package pub.dev에 등록해두었다. (처음 등록해보는 거라 좀 부끄럽다. 완성형도 아니라서 더 부끄럽긴하다. ㅎㅎ)

https://pub.dev/packages/future_progress_dialog

future_progress_dialog | Flutter Package

사용 방법과 예제는 위 페이지를 참조하거나 GitHub에 등록해두었으니 참고하면된다. 사실 기능이 많지 않아 ㅎ 예제도 짧다 ㅎ Repository 주소는 다음과 같다. 

https://github.com/donguseo/future_progress_dialog

donguseo/future_progress_dialog

 

이제 FutureProgressDialog 클래스를 어떻게 구성했는 지 설명하겠다.

변수로는 future(Future)와 message(String)가 있으며, 이는 모두 생성자를 통해서 받는다. message는 없어도 되지만 future는 꼭 하나를 넣어야 한다. (지금 생각해보니 @required를 넣어야 할 것 같다 좀이따 수정해야겠다.)

여기서 message는 나중에 dialog에 나타나는 텍스트로 그리 중요한 역할을 하지 않는다. 여기서 중요한 역할을 하는 것은 바로 future이다. 11번 줄을 보면 future가 모든 동작을 수행하고 결과를 return 하게되면 Navigator.pop()을 부르고 future의 결과 값을 전달한다. 그러면 이 값은 showDialog() 함수의 결과값으로 나오게 된다. 물론 Future 객체로 묶여져 있음으로 await를 하거나 then 함수를 불러서 결과값을 받을 수 있다. 

여기서 하나의 추가 장치가 필요하다 dialog가 나타났을 때 back키를 누르거나 배경을 눌러 dialog가 닫히는 경우가 발생할 수 있다. 이를 방지하기위해서 WillPopScope를 사용했다. onWillPop 함수에 19번 라인과 같이 false를 return 하는 Future 클래스를 반환하면 절대 닫히지 않는다. 

오늘은 여기서 마치겠다. 위에 공개된 라이브러리에 대한 기능추가를 요청은 언제나 환영이니 주저말고 연락주세요!