Overview.
Navigator 위젯에 대해 알아봅니다.
- Navigator 위젯이란?
0. 문서
https://api.flutter.dev/flutter/widgets/Navigator-class.html
1. Navigator 위젯
스택(Stack) 방식을 이용하여 여러 위젯을 관리하는 위젯입니다. 스택이란 책상 위에 책을 쌓아 올 리게 되면 가장 먼저 쌓은 책을 꺼내기 위해서는 가장 위에 있는 책부터 다시 꺼내야 됩니다. 첫 번째 책은 LoginPage입니다. 여기서 HomePage로 이동하기 위해서는 첫 번째 책 위에 두 번째 책을 올리기만 하면 새로운 화면이 나타납니다. 이때 다시 첫 번째 화면을 보기 위해서는 두 번째 책 을 책상에서 치우기만 하면 됩니다. 책을 쌓아 올리는 키워드를 보통 프로그래밍에서 push 라고 하 고 책을 꺼내는 키워드를 pop 이라고 부릅니다.
1. push
먼저 push 입니다. push 는 말 그대로 스택에 쌓이는 방식이겠죠? 이동할 페이지 함수를 지정해 페이지를 이동시킬 수 있습니다.
ElevatedButton(
child: Text("서브로 이동"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SubPage(),
),
);
},
)
2. pop
그리고 pop 입니다. 이 또한 스택에서 제거하는 거라 현재 context 를 제거해 이전 화면으로 이동(?)할 수 있습니다.
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Get Started')
),
3. pushNamed
https://tinylittlelife.tistory.com/453
만약. MaterialApp 의 routes 를 사용했다면 pushNamed 를 사용하여 해당 페이지로 이동이 가능합니다.
ElevatedButton(
child: Text("서브로 이동"),
onPressed: () {
// pushNamed
Navigator.pushNamed(context, "/sub");
},
)
4. pushNamedAndRemoveUntil
한번에 스택에 쌓았던 모든 페이지들을 삭제할 수 있습니다.
그리고 하나의 페이지를 열 수 있도록 합니다.
false : Navigator 에 쌓인 모든 정보들을 삭제
true : 안날라갑니다.
ElevatedButton(
child: Text("홈로 이동"),
onPressed: () {
Navigator.pushNamedAndRemoveUntil(context, "/home", (route) => false);
},
)
5. pushNamed 만약 데이터를 넘기고 싶다면? arguments 를 사용하자!
@optionalTypeArgs
static Future<T?> pushNamed<T extends Object?>(
BuildContext context,
String routeName, {
Object? arguments,
}) {
return Navigator.of(context).pushNamed<T>(routeName, arguments: arguments);
}
위와 같이 보시면 arguments 가 Object 형식으로 데이터를 넘기는 작업이 가능합니다.
해당 페이지에서는 다음 과 같이 데이터를 받을 수 있습니다.
ModalRoute.of(context)?.settings.arguments as [오브젝트]
따라서 두개를 써본다면
Navigator.pushNamed(context, "/sub" , arguments: User(username: "이름" , password: "패스워드"));
User user = ModalRoute.of(context)?.settings.arguments as User;
이런식으로 다음과 같이 데이터를 전달할 수 있습니다.
'flutter & dart' 카테고리의 다른 글
flutter & dart - Stack 위젯과 Positioned 위젯 (0) | 2024.02.28 |
---|---|
flutter & dart - StatefulWidget 과 StatelessWidget (2) | 2024.02.27 |
flutter & dart - TextFormField 위젯 (1) | 2024.02.26 |
flutter & dart - 화면 이동을 위한 Routes (1) | 2024.02.26 |
flutter & dart - [Design] 중요한 디자인 구성요소에는 중요한 컬러를 적용 (0) | 2024.02.20 |