[Flutter] 02. 화면 전환, 이동

1. Route와 Navigator

플러터에서는 화면을 이동할 때 스택 구조로 쌓이면서 이동이 됨.

 

기본적으로

Navigator.of(context)

뒤에 여러 메소드를 통해 다양한 화면 이동을 구현할 수 있음.

 

사용가능한 메소드는 다음과 같음.

 

- push : 어느 페이지로 이동

- pushNamed : 어떤 이름을 가진 페이지로 이동

- pushAndRemoveUntil : 이동하고 스택 아래 어디까지 제거

- pushNamedAndRemoveUntil : 위 메소드의 named 버전

- pop : 뒤로가기 (스택 맨 위 페이지 제거)

 

등등등..이 외에도 많으니 필요에 따라 찾아보시길.

 

여기서 Named가 들어간 메소드를 사용하려면,

 

MaterialApp의 routes 특성에 미리 이름과 페이지를 등록해두어야 함.

routes: {
	"/first": (context) => const FirstPage(),
},

이런식으로 등록해두면

Navigator.of(context).pushNamed("/first", arguments: {"title": "Test"});
// title이라는 매개변수에 Test라는 값 전달하는 경우임

이렇게 사용이 가능함.

 

사실 Navigator 방식 말고도 go_router와 get이라는 플러터 패키지가 있긴한데 안써봐서 생략함.

 

공식 문서 : https://docs.flutter.dev/ui/navigation

Navigation and routing

친절하신 분1 : https://velog.io/@tygerhwang/Flutter-%ED%99%94%EB%A9%B4-%EC%9D%B4%EB%8F%99%EC%9D%84-%EC%9C%84%ED%95%9C-%EB%B0%A9%EB%B2%95-%EC%A0%95%EB%A6%AC-Router

[Flutter] 화면 이동을 위한 방법 정리 (Router)

친절하신 분2: https://luke-kong.oopy.io/flutter/route

[Flutter] 화면 이동 방법 정리

2. BottomNavigationBar (네비게이션 바)

하단에 저렇게 몇가지 카테고리가 있고 사용자가 눌러서 화면 전환하는 위젯을 의미함.

 

Scaffold의 bottomNavigationBar 속성에서 NavigationBar() 위젯을 만들어줌으로써 사용이 가능함.

 

단점으로는 애니메이션이 없어서 눌렀을때 팍팍 바뀜.

 

공식 문서 : https://api.flutter.dev/flutter/material/NavigationBar-class.html

NavigationBar class - material library - Dart API

3. PageView (페이지 뷰)

여러 페이지를 한 화면에서 구현하게 해주는 위젯으로, 구현된 여러 화면은 가로나 세로 방향으로 슬라이드해 볼 수 있음.

 

공식 문서 : https://api.flutter.dev/flutter/widgets/PageView-class.html

PageView class - widgets library - Dart API

친절하신 분 : https://blog.spiralmoon.dev/entry/Flutter-%EC%97%AC%EB%9F%AC-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%ED%95%9C-%ED%99%94%EB%A9%B4%EC%97%90%EC%84%9C-PageView

[Flutter] 여러 페이지를 한 화면에서, PageView