내비게이션

한 페이지로도 앱을 만들 수 있지만 기능이 많으면 화면 구성이 어렵고 로딩이 느려지기도 한다.

내비게이션 기능은 앱이 제공하는 기능이나 메뉴별로 화면을 분리해서 개발하는 방법이다. 

내비게이션

---

FirstPage / SecondPage

FirstPage

- FirstPage 클래스에서 만든 플로팅 버튼을 눌렀을 때 호출되는 onPressed 이벤트 처리 함수

- Navigator는 스택(Stack)을 이용해 페이지를 관리할 때 사용하는 클래스이다.

Navigator 클래스의 of(context) 함수는 현재 페이지를 나타내고 push() 함수는 스택에 페이지를 쌓는 역할을 한다.

따라서 위 코드는 현재 페이지 위에 SecondPage를 쌓는 것으로 해석할 수 있다. 

- push() 함수에 전달한 MaterialPageRoute() 함수는 머티리얼 스타일로 페이지를 이동하게 해준다.

push() 함수 호출 시 스택 구조 변화

 

secondPage 클래스에 <돌아가기> 버튼을 눌렀을 때 첫화면으로 이동하기

secondPage

- Navigator.of() 함수에 이어서 호출한 pop() 함수는 스택 메모리에서 맨 위에 있는 페이지를 제거한다. 

두 번째 페이지가 보인다는 것은 현재 스택 메모리 맨 위에는 SecondPage가 있다는 의미이다. 

pop() 함수 호출 시 스택 구조의 변화

 

---

라우트로 페이지 이동하기

- 라우트(route)는 통신에서 이동 경로를 의미하는 용어이다.

네트워크 프로그래밍에서는 요청 URL을 해석해 정해진 경로로 이동하는 기능을 라우트라고 한다.

Route

- routes에는 <String : Widget> 형태로 경로를 선언한다.

String 경로로 사용할 문자열을 입력하고 Widget에는 해당 경로가 가리키는 위젯을 지정한다. 

- '/'와 '/second'에 각각 페이지를 지정하였다. initialRoute에는 처음 앱을 시작했을 때 보여 줄 경로를 지정한다. 

firstPage

- push() 대신에 pushNamed() 함수로 변경하였다. 이 함수는 페이지를 이동할 때 routes에 선언한 경로로 이용한다. 

- 기능은 이전과 동일하다.