728x90
* 해당 글은 go_router 13.0.1 버전으로 설명되어 있습니다.
* 버전이 업데이트되면서 바뀌는 사항은 하단에 업데이트되어 있습니다.
Navigator.push(context, MaterialPageRoute(builder: (context) => APage()));
Navigator.pop(context);
일반적으로 페이지를 이동할 때 위와 같은 코드를 사용하여 페이지를 이동하고 뒤로 오는 작업을 수행할 것입니다.
go_router에서도 push와 pop을 똑같이 사용이 가능합니다.
final router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) {
return APage();
},
),
GoRoute(
path: '/b',
builder: (context, state) {
return BPage();
},
),
],
);
해당 라우터로 되어있다면 앱을 실행시키면 APage가 나올 것입니다. go_router에서 APage에서 BPage로 페이지를 이동하고 다시 돌아오는 push - pop을 알아보겠습니다.
1. push
context.push('/b');
go_router에서의 push 하는 코드입니다. 훨씬 단순해진 게 눈에 보이죠? ' /b ' 는 위에 router로 설정한 BPage에 path입니다.
해당 코드가 실행되면 APage에서 BPage로 기존의 push와 동일하게 스택이 쌓이면서 페이지가 이동되게 될 것입니다.
2. pop
기존처럼 push로 페이지로 이동하면 pop으로 돌아올 수 있듯이 go_router에 push도 똑같이 pop으로 돌아올 수 있습니다.
context.pop();
3. 예제코드
더보기
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: router,
title: 'go_router',
);
}
}
final router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) {
return APage();
},
),
GoRoute(
path: '/b',
builder: (context, state) {
return BPage();
},
),
],
);
class APage extends StatelessWidget {
const APage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text("APage"),
ElevatedButton(
onPressed: () {
context.push('/b');
},
child: Text("push"),
),
],
),
);
}
}
class BPage extends StatelessWidget {
const BPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text("BPage"),
ElevatedButton(
onPressed: () {
context.pop();
},
child: Text("pop"),
),
],
),
);
}
}
'Flutter > GoRouter' 카테고리의 다른 글
[Flutter] go_router - 4 : Parameters 설정 (0) | 2024.01.15 |
---|---|
[Flutter] go_router - 2 : 초기 페이지 설정 (0) | 2024.01.11 |
[Flutter] go_router - 1 : 프로젝트 적용 (0) | 2024.01.10 |