Overview.
Navigator 위젯에 대해 알아봅니다.
- Navigator 위젯이란?
0. 문서
https://api.flutter.dev/flutter/widgets/Navigator-class.html
Navigator class - widgets library - Dart API
A widget that manages a set of child widgets with a stack discipline. Many apps have a navigator near the top of their widget hierarchy in order to display their logical history using an Overlay with the most recently visited pages visually on top of the o
api.flutter.dev
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
flutter & dart - 화면 이동을 위한 Routes
Overview. 이번에는 화면 이동을 위한 Routes 한마디로 네비게이터 경로 사용법을 알아봅시다. 화명 이동을 위한 Routes 이란? 명명된 네비게이터 이동 방식 1. 화면 이동을 위한 Routes 이란 모바일 앱은
tinylittlelife.tistory.com
만약. 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 |