[Flutter] 플러터 Navigator 페이지 이동 정리

 

 

플러터에서 페이지를 이동하는 방법은 Navigator를 활용하며, Navigator는 스택 형태로 구성이 되어 있었다. 사실 개인적으로 이 페이지라는 개념이 좀 헷갈렸는데, 알고보면 페이지는 그냥 Stateless 또는 Stateful 위젯이다.

 

Navigator 스택에 새 페이지를 push하면 해당 페이지로 이동이 되고, pop하면 이전 페이지로 이동하는 형태이다. Pop하다가 더이상 뺄 페이지가 없으면 앱이 종료된다.

 

페이지마다 네임 태그가 달려있어 스택 내의 원하는 페이지로 이동도 가능한데... (응? 그러면 큐 아닌가?) 아무튼 직관적인 형태로 되어있다. 페이지 이동 방법을 초간단하게 정리해 본다.

 

 

1. 이전 페이지 이동

 

현재  페이지를 스택에서 제거하여 이전 페이지로 이동한다. 스택에 페이지가 남아있다면 해당 페이지가 표시되고, 없다면 앱이 종료된다.

 

Navigator.pop(context);

 

 

2. 다음 페이지 이동

 

현재 페이지를 스택에 남겨놓고 NextPage라는 이름을 가진 페이지로 이동한다. 이 경우 다음 페이지에서 Pop을 하면 현재 페이지로 돌아올 수 있다. 

 

Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()),);

 

 

현재 페이지를 스택에 삭제하고 NextPage라는 이름을 가진 페이지로 이동한다. 이 경우 다음 페이지에서 Pop을 하면 현재 페이지의 이전 페이지로 돌아간다. (없으면 앱 종료)

 

Navigator.pop(context);
Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()),);

 

 

3. 새로운 페이지로 시작

 

지금까지 모든 페이지를 스택에서 삭제하고 NewPage라는 이름을 가진 페이지로 이동한다. 이 경우 NewPage가 가장 첫 페이지가 된다.

 

Navigator.pushNamedAndRemoveUntil(context, '/', (_) => false);
Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()),);

 

 

Fin.