Flutter 강좌 - 로그아웃 하고 첫 화면(페이지)로 이동하는 법 | Navigator.pop | pushReplacementNamed

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱

---

Flutter 강좌 시즌2 목록 : https://here4you.tistory.com/149

 

이번 강좌는 화면을 push, pop, replace에 대한 간단한 팁을 다룬다. 이미 기존 강좌에서 다루긴 했다.

 

• Push (화면 적재)

앱에 화면을 적재할 때에는 Navigator.push 메서드를 이용한다. push 메서드를 호출할 때마다 기존 화면 위에 새로운 화면이 얹어지는 형태다.

 

• Pop (화면 제거)

현재의 화면을 제거하려면 Navigator.pop 메서드를 이용한다. pop 메서드가 호출될 때마다 현재 화면이 사라지고 그 하단의 화면이 다시 나타난다.

 

• Replace (화면 전환)

새로운 화면을 사용자에게 보이기 위해 push를 이용하게 되면 새 화면이 기존 화면 위에 적재되게 된다. 만약 여러 페이지를 push 한 상태에서 맨 처음의 화면으로 돌아가려면 push를 수행한 횟수만큼 back 버튼을 눌러서 적재되었던 화면들을 pop 해야 한다.

어찌 보면 당연하지만 어느 경우에는 불편할 수도 있다. 예를 들어 앱이 실행될 때 처음 한 번만 보이고 앱이 종료될 때까지 사용자에게 다시 보이고 싶지 않은 페이지가 있을 수도 있다. 이런 경우에 화면 전환을 이용한다. 이때에는 Navigator.replace 메서드를 이용한다.

 

다음과 같은 화면 구성을 가지는 앱이 있다고 가정해보자.

IndexPage(로그인 기능 포함) -> MainPage -> SettingPage(로그아웃 기능 포함)

 

• IndexPage -> MainPage 과정

앱이 실행되면 IndexPage가 처음으로 실행된 후 로그인 과정에 성공하면 MainPage가 출력된다. 일반적으로 IndexPage는 앱을 실행할 때 한 번만 사용자에게 보이면 되고 앱이 종료될 때 다시 보일 필요가 없다. 그러므로 IndexPage에서 MainPage로 이동할 때에는 화면 전환(replace)으로 처리하는 것이 일반적이다. 결과 적으로 IndexPage는 화면 스택에서 삭제되고, MainPage가 화면 스택의 root가 된다. 그래서 MainPage를 보고 있는 사용자가 back 버튼을 누르면 앱이 종료된다.

 

• MainPage <-> SettingPage 과정

MainPage를 이용하는 사용자가 앱의 설정을 위해 SettingPage로 이동해야 할 경우에는 화면 적재(push)로 처리하는 것이 일반적이다. 설정이 완료되면 back 버튼을 눌러 SettingPage를 삭제(pop)하고 MainPage로 이동한다.

 

• SettingPage -> IndexPage 과정

그런데 SettingPage의 기능 중 로그아웃 기능을 이용할 때에는 조금 특별한 처리가 필요하다. 이 경우에는 로그아웃을 하고 앱을 종료하는 것이 아닌 IndexPage로 이동하는 것이 일반적이다.

우선 IndexPage -> MainPage 과정에서 IndexPage를 MainPage로 전환하면서 IndexPage는 화면 스택에서 삭제되었으므로 IndexPage를 새롭게 생성해야 화면 스택에 적재해야 한다.

그럼 IndexPage를 push 해야 할까? push 하게 된다면 화면 스택에는 MainPage -> SettingPage -> IndexPage 형태로 화면이 얹어진다. IndexPage에서 back 버튼을 누르면 SettingPage와 MainPage로 전환되는 이상한 형태가 된다.

일단 push가 답이 아니므로 SettingPage를 IndexPage로 replace 해야 한다. 그런데 이경우에도 화면 스택에는 MainPage -> IndexPage형태로 화면이 구성된다.

로그아웃을 완료한 화면 스택에는 IndexPage 하나만 남아야 하는데 이 경우에는 pop과 replace를 연달아서 수행하면 된다.

pop 처리에서는 SettingPage가 제거되게 되고, replace 처리에서는 MainPage가 IndexPage로 전환되는 것이다.

 

만약 replace 과정 없이 push만을 통해 여러 페이지를 적재한 상태에서 첫 번째 화면만 남기고 남은 페이지들을 삭제하고자 할 때에는 다음과 같이 popUntil 메서드를 이용할 수도 있다고 한다(해보지는 않았다).

Navigator.popUntil(context, ModalRoute.withName(Navigator.defaultRouteName))

 

첫번째 화면까지는 아니지만 복수개의 페이지를 pop 하고자 할 때에는 다음과 같이 처리할 수도 있다고 한다(해보지는 않았다).

count = 0;
Navigator.popUntil(context, (route) {
    return count++ == 2;
});