Flutter - Navigator Route 화면이동

출처: medium.com

 

Flutter를 이용해서 앱을 만들다 보면 결국 여러 개의 화면들을 잘 조합하고 처리를 해야 한다.

이전의 Application 개발 경험이 Android이다보니 자꾸 Android 구조를 비교 혹은 이해하는 용도로 활용하게 되는데...

Android에서는 Application 하위에 Acrivity들을 StartActivity를 이용해서 띄우고 이동하는 방식이었다면...

Flutter에서는 Stack, Route이라는 개념을 사용하고 있었다. Stack은 말 그대로 쌓는다는 의미이고, Route는 뭔가 이동을 위한 것 같다.

그리고 Navigator라는 클래스가 Route 이동을 컨트롤 해주는 역할을 담당한다.

 

이런 개념이 꽤 잘 정리된 글이 있어서 이해하는데 도움이 많이 됐다ㅎㅎ

https://medium.com/flutter-community/flutter-push-pop-push-1bb718b13c31

Flutter: Push, Pop, Push

 

Flutter 기본 화면처리

Flutter에서의 화면 처리/이동은 Android이랑 매우 유사한 것 같으면서도 조금 더(?) 쉬운 것 같다.

맨 처음 앱이 실행될때 보이는 Route(화면)에서 시작해 다음 화면으로 이동할 때는 Push로 그 화면을 위에 쌓아 올렸다가,

  void onPressed(BuildContext context) {
    Navigator.pushNamed(context,
        AppRoutes.taskSelectScreen);        
  }

 

백을 누르면 지금 화면을 Pop으로 제거해 줘서 아래에 있던 화면이 최상단에 표시되도록 해주는 방식이다.

  void onPressed(BuildContext context) {
    Navigator.pop(context);        
  }

 

Stack 구조는 워낙에 유명한 구조이기 때문에 상당히 직관적이다.

그리고 이런 구조는 Flutter inspector를 통해 확인해 보면 바로 이해가 가능하다.

 

Stack 구조로 쌓고 빼고 하면서 관리되는 것들은 일반적인 Route(화면)도 있지만,

Drawer(햄버거메뉴, 사이드메뉴 등) 혹은 AlertPopup 등도 동일한 방식으로 취급한다.

따라서 Drawer 메뉴나 Popup을 띄웠다가 사라지게 하려면 Pop을 해줘야한다.

 

이런 Stack 구조의 Route(화면) 관리 방식에 대해서는

위에 링크한 medium.com에 너무나도 이해가 잘 되는 그림이 있어서 기록으로 남겨둔다.

 

Flutter 특정 화면(Route)으로 이동하기

그런데 일반적인 화면처리는 개념이 간단하기에 어렵지 않게 접근했고 실제로 구현도 금방 됐지만,

사실 앱을 만들다 보면 지금 화면을 다음 화면으로 넘어갈 때는 제거하고 넘어가야 하거나,

Home 버튼을 누르면 아예 홈으로 이동하면서 기존에 떠있던 다른 화면들은 다 제거해줘야 할 일들이 많다.

이런 경우에는 Navigator 함수들 중에서 일반적인 Push, Pop으로는 해결이 안 되기 때문에 별도의 함수를 사용해 줘야 한다.

 

Navigator.pushNamedAndRemoveUntil Function

함수명처럼 새로운 Route를 Push 해주고, 특정 위치까지 지우는 함수다ㅎㅎ

(다소 길어 보일 수 있지만 최대한 바로 이해가 가능한 함수명은 매우 중요한 것 같다.)

 

통상적으로 사용되는 Push 함수랑 비슷하게 생겼지만, 두 번째 parameter로 어디까지(until) 남기고 지울건지를 함께 지정해 준다.

여기서 두번째 parameter에 들어간 Route 정보가 남겨둘 Route(화면)이다.(Stack에서 지정한 Route까지 남기라는 의미)

 

예를 들어, 화면들을 Push를 통해서 층층이 쌓아가다가 다시 TaskScreen으로 점프하고 싶은 경우

Aisle Input Screen 까지 이동된 화면을 Task Screen으로 이동하려고 한다.

 

## 1

점프를 하면서 기존 Stack구조에서 Login Screen까지는 살리고 싶다면 두 번째 Parameter에 지정해 준다.

그러면 처음 Stack에 쌓인 화면들 중 Login 까지는 그대로 있고 Task Screen을 Stack의 맨 마지막에 올려준다.

  void onPressed(BuildContext context) {
    Navigator.pushNamedAndRemoveUntil(context,
        AppRoutes.taskSelectScreen,
        ModalRoute.withName(AppRoutes.loginScreen)
    );        
  }

 

## 2

당연하게도, Home route까지만 남기라고 하면 Push 한 TaskScreen남 남고 기존 Stack에 쌓여있던 화면들은 모두 삭제된다ㅎㅎ

  void onPressed(BuildContext context) {
    Navigator.pushNamedAndRemoveUntil(context,
        AppRoutes.taskSelectScreen,
        ModalRoute.withName('/')
    );        
  }