[flutter] Navigator

Route

스마트폰 상에서 보여지는 하나의 페이지.

네이게이터란 모든 앱페이지를 관리하며 stack이라는 자료구조 형식으로 route 객체들을 관리한다.

즉, 앱페이지를 관리하기 위해서 네이게이터라는 위젯이 관리하고, 네이게이터는 앱페이지라는 데이터를 관리하기 위해서 데이터를 쌓는 방식의 stack이라는 자료구조를 사용한다.

 

Route는 반드시 MaterialApp Widget 아래에 child로 생성되어야함.

---

stack

stack은 쌓는다는 의미.

stack에 push라는 method가 제공된다는 것은 데이터가 들어오면 push method를 통해서만 데이터를 쌓아 올릴 수 있다.

쌓아둔 제일 위의 데이터를 없애기 위해서는 pop method를 사용해야한다.

---

MyApp위젯 내에서 MaterialApp이 빌드됐고,  MaterialApp 위젯 내에서 Child 위젯으로 FirstPage 위젯을 호출하고 있다.

FirstPage 위젯은 정상적으로 위젯트리에 위치하고있다. 화면에 하나의 Route로써 출력되고 있다.

그러나 SecondPage 위젯은 아직 MaterialApp 위젯 내부에서 호출되어있지 않고있다.  MaterialApp 위젯의 child가 아닌것이다.

그래서 지금은 위젯 트리에 위치하고 있지 않다.

Route는 무조건 MaterialApp 아래에 Child로 생성되어야 한다.

 

FirstPage에 있는 버튼을 누를시 SecondPage로 이동하기 위해서는 Route가 담당하고 있는 Navigator 위젯을 생성한다.

Navigator 위젯이 관리하고있는 Stack 자료구조 제일 위에 위젯트리에 위치하고 있지 않은 SecondPage가 올라가야한다.

이때 push method를 사용하게 된다. 

중요한것은 SecondPage는 FirstPage를 제거하고 들어가는것이 아닌 자료구조상 FirstPage 위로 쌓여지는것이다.

SecondPage는 화면에 보이는 FirstPage 위에 올라가서 FirstPage를 가리고 SecondPage가 보이는것 뿐이다.

---

push

push함수에 context가 필요한 이유는 context가 가지고 있는 위젯트리의 위치정보에 근거하여 현재 화면상에 보여지는 페이지가 어떤 페이지인지 확인하고 이 페이지 위에 push함수가 이동하길 원하는 새로운 route를 쌓아올려야하기 때문이다.

즉, FirstPage 위로 SecondPage를 쌓아올리려면 FirstPage의 정확한 위치를 알아야하기 때문이다.

 

좌) 하드코딩으로 만든 Navigator.push    우) 자동완성으로 만든 Navigator.push

 

MaterialPageRoute를 사용하게되면 기본적으로 안드로이드에서 제공하는 페이지 이동 애니메이션을 사용하게 된다.

---

MaterialPageRoute

생성자에는 여러 인자가 올수있지만 MaterialPageRoute에는 Buillder를 필수 인자로 가지고 있다.

MaterialPageRoute에는 Builder는 필수로 있어야한다.

Builder는 어떠한 위젯이 MaterialPageRoute의 도움을 받아서 생성되어야할지를 정의하는 것이다.

(위의 경우 SecondPage가 도움을 받아야함)

 

push 함수를 불러올때마다 MaterialPageRoute를 사용하고 Builder를 통해서 context를 flutter를 의해서 할당받는 이유는

route는 push 함수를 통해서 다양한 곳에서 호출되며, 그때마다 생성되고 필요에 의해서 재생성된다.

하지만 언제 route의 호출이 일어나는가에 따라서 route가 build하는 과정중에 다른 context를 사용할수도있고, 잘못된 context를 전달하여 route의 호출에서 에러를 발생시킬수있다.

Builder를 사용하면 이러한 에러를 방지할수있고, Builder에서 제공하는 context를 사용할 필요가 없으면 사용 안해도된다.

그리하여 MaterialPageRoute에서 Builder의 사용은 일종의 안전장치이다.

 

좌) 하드코딩으로 만든 Navigator.push  우) 자동완성으로 만든 Navigator.push

 

MaterialPageRoute를 사용하게되면 기본적으로 안드로이드에서 제공하는 페이지 이동 애니메이션을 사용하게 된다.

 

---

pop

push 함수와 달리 pop 함수는 단순하다.

Navigator.pop뒤에 SecondPage 위젯의 BuildContext를 넣어주면 된다.

즉, SecondPage 자신이 사라져야함으로 자신의 정보를 가지고 있는 ctx만 전달해주면 된다.

---

FistPage 위젯. 위젯트리에서 SecondPage 위젯은 보이지 않는다.

 

FistPage 위젯에서 버튼을 누르면 위젯트리에서 기존 FirstPage에 있던 자리에 SecondPage 위젯이 들어온다.

그리고 FirstPage 위젯은 MaterialApp 위젯의 child로 존재하지만 SecondPage 위젯 밑으로 내려온다.

즉, push 함수가 FirstPage 위젯 자리에 SecondPage 위젯을 쌓아두었기 때문이다.

다시 FirstPage로 이동후 Inspector를 새로고침하면 pop 함수로 인해 위젯페이지에서 SecondPage 위젯은 사라지게 된다.

 

 

 

 

---

builder에서 제공되는 context는 자동으로 할당되기 때문에 꼭 사용하지 않아도 된다.

사용하지 않을때에는 언더스코어를 넣어주면 된다.(꼭, 언더스코어를 사용할 필요는 없다. flutter 공식문서 참조)

 

 

 

---

참고

좌측 이미지 밑줄에 값을 전달받는것을 매개변수라 하고 우측 이미지 밑줄, 함수에 직접 전달되는 값을 인자값이라 한다.

 

---

SecondPage 상단 좌측에 있는 화살표 버튼은,

Scaffold를 사용해서 AppBar를 생성하면 flutter가 자동으로 페이지 이동시 뒤로가기 버튼을 만들어준다.

그래서 pop 함수를 사용할 필요는 없다.

하지만 AppBar를 생성하지 않으면 뒤로가기 기능이 없으니 pop 함수를 구현해야한다.