.png&blockId=3d0c1493-0d67-43b6-9a76-7274b150c47f)
Flutter 에서 화면을 이동하는 방법은 아래와 같다.
•
Navigator - Flutter 내장 방식
•
Get - 서드파티 라이브러리
•
go_router - 서드파티 라이브러리
푸시, 공유 등의 기능을 사용할 때 딥링크를 전달받아 라우팅을 결정할 때, Navigator 방식은 코드 작성도 길어지고 조금 불편하다. 참고하자
Navigator
1. Push - 라우터 객체로 화면 이동
Navigator.push(context, route);
Dart
복사
push 함수는 두개의 인자가 필요하다.
•
context
•
route
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(
title: title,
thumb: thumb,
id: id,
),
),
);
Dart
복사
데이터를 전달하고자 한다면,
1.
오픈하는 페이지 위젯의 생성자로 받고자 하는 변수를 등록해주고,
2.
전달할 위젯에 파라미터로 넘겨준다.
2. PushNamed - 라우터 이름으로 화면 이동
MaterialApp 위젯에 routes 부분에 key-value 형태로 사용하고자 하는 라우터 네임과 위젯을 등록해준다.
routes: {
"/first": (context) => const FirstPage(),
},
Dart
복사
등록한 이름으로 화면 이동이 가능해진다.
Navigator.of(context).pushNamed("/first");
Dart
복사
데이터를 전달해주고 싶다면?
Widget build(BuildContext context) {
Map<String, dynamic> _argument =
ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>;
print(_argument["title"]);
...
}
Dart
복사
오픈하는 페이지에서 ModalRoute를 통해 얻을 수 있다.
Navigator.of(context).pushNamed("/first", arguments: {"title": "Test"});
Dart
복사
전달할 때에는 전달하고자 하는 데이터를 arguments 파라미터에 key-value 형태로 넣어 준다.
3. pushAndRemoveUntil - 스택으로 쌓여있는 페이지를 제거하고 이동
MaterialPageRoute에 이동하고자 하는 페이지를 넣어주고 어느 페이지까지 스택을 제거할지를 넣어주면 되는데, false인 경우 모든 페이지를 제거하고 이동한다는 의미이다.
Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(
builder: (context) => const HomePage()), (route) => false);
Dart
복사
4. pushNamedAndRemoveUntil - 3번의 named 방식
Navigator.of(context).pushNamedAndRemoveUntil("/home", (route) => false);
Dart
복사
기타
1. popAndPushNamed
2. pushReplacement
Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) => const ThirdPage()));
Dart
복사
3. pushReplacementNamed
뒤로가기
1. pop - 위젯 스택의 맨 위 제거
Navigator.of(context).pop();
Dart
복사
2. canPop - 페이지를 닫을 수 있는지 확인 → Bool
더이상 닫을 수 있는 페이지가 있다면? → true
더이상 닫을 수 있는 페이지가 없다면? → false
Navigator.of(context).pop();
Dart
복사
3. maybePop - 위젯 스택의 맨 위 제거
maybePop은 페이지를 닫을 수 있으면 닫고, 닫을 수 없으면 더 이상 닫지 않는 기능을 제공해주는데, Flutter에서는 더 이상 페이지를 닫을 수 없을 때 pop을 하게 되면 블랙스크린이 노출되게 된다.
이럴 경우에 대비해서 사용할 수 있지만, maybePop 기능은 페이지 스택 구조 상에 페이지 뎁스 구조를 잘 설계해야 지만 정상적으로 작동이 된다.
Navigator.of(context).pop();
Dart
복사
4. popUntil
popUntil은 모든 페이지를 닫는 방법으로 위에서 살펴본 until 기능과 동일하다. 다만 popUntil은 페이지를 열고 닫는게 아닌 바로 페이지를 닫는 기능으로 isFirst를 사용하게 되면, 최하단 스택 라우터를 제외하고 닫아주게 된다.
Navigator.of(context).popUntil((route) => route.isFirst);
Dart
복사
