📋글의 순서
- Route의 개념
- Navigator의 정의
- stack 자료 구조
- MaterialPageRoute위젯과 context
- 페이지 이동 기능 구현 실습
🙆♂️Route의 개념
Flutter의 Navigator에서 Route가 뜻하는 것은
" 스마트폰에서 보여지는 하나의 페이지나 화면 " 입니다.
🙋♂️Navigator의 정의
Navigator란 모든 페이지를 관리하고 스택구조로 Route들을 관리합니다.
Navigator 위젯으로 앱 내에 페이지 이동을 할 수 있습니다.
Push와 pop 메소드를 통해서 stack을 관리를 합니다.
🤷♂️stack 자료구조
Stack 자료 구조는 Last-in First-out 구조입니다.
Push 메소들르 통해서 데이터를 상주시킬 수 있고 Pop 메소드를 통해서 데이터를 제외할 수 있습니다.
Navigator에서도 이런 Stack 구조를 사용합니다.
💆♂️페이지 이동 실습
firtst page를 만들고 이동할 second page를 만들어줍니다.
이게 바로 route를 만드는 과정입니다. 사실 별거 없습니다.
그냥 FirstPage와 비슷하지만 Second로 바꿔서 만들었습니다.
이제 각각 버튼을 누르면 페이지가 이동하도록 설정해보겠습니다.
지금은 Second Page에 대해서 경로 정의가 안되어있기 때문에 따로 정의해줘야 합니다.
이때 Navigator위젯을 사용하는데 위에서 설명했듯 stack 구조로 작동을 합니다.
FirstPage를 제거하고 SecondPage만 상주하는 것이 아닌 FirstPage 위에 SecondPage를 올려서 보는 방식입니다.
🚀SecondPage로 이동
이렇게 Navigator.push를 사용하는데 인자값으로 context와 route를 받습니다.
route 부분에는 MaterialPageRoute 함수를 이용해서 builder를 정의해주고 갈 페이지를 위와 같이 작성할 수 있습니다.
조금 더 축약해서 작성을 해보면
builder 부분을 이렇게 작성해도 됩니다.
🚀FirstPage로 이동
FirstPage로의 이동은 쉽습니다. SecondPage의 context를 제거하는 것입니다.
이제 이동은 잘 됩니다!
'앱 개발 > Flutter 개념' 카테고리의 다른 글
| [Flutter] 04. BuildContext란 (0) | 2022.07.04 |
|---|---|
| [Flutter 개념] 03. main.dart 작성하는 법 (0) | 2022.06.30 |
| [Flutter] VS Code에서 모바일 에뮬레이터 사용해서 디버깅 (0) | 2022.06.30 |
| [Flutter 개념] 02. 폴더 파일 구조 (0) | 2022.06.30 |
| [Flutter 개념] 01. 위젯이란 - Flutter Widget (0) | 2022.06.30 |