[Flutter] go_router - 3 : push, pop 페이지 이동

 

 

* 해당 글은 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"),
          ),
        ],
      ),
    );
  }
}