[Flutter] Go Router

Go Router

플러터 앱 내에서 여러 screen 간의 이동을 처리할 수 있게 해주는 패키지

url 기반으로 다양한 케이스들을 처리할 수 있다.

 

path 와 query 처리 (예: "user/:id")

여러개의 screen 으로 이동할 수 있는 sub-routes 기능

Redirection 지원 (예: 인증되지 않은 사용자일 경우 로그인 화면으로 리다이렉트)

멀티 Navigator 지원 

 

설치는 아래와 같이

$ flutter pub add go_router

또는 

pubspec.yaml 에 추가하고 flutter pub get

dependencies:
	go_router: ^14.2.3

 

 

 

Code Template

// 라우팅 설정
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'TestApp',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlue),
        useMaterial3: true,
      ),
      routerConfig: GoRouter(initialLocation: '/', routes: [
        GoRoute(
          path: '/',
          builder: (context, state) => MyHomePage(title: 'TestApp'),
        ),
        GoRoute(
          path: '/statelesspage',
          builder: (context, state) => StatelessPage(),
        ),
        GoRoute(
          path: '/statefulpage',
          builder: (context, state) => StatefulPage(),
        ),
        
        // 객체를 넘기기
        GoRoute(
          path: '/personpage',
          builder: (context, state) =>
              PersonPage(person: state.extra as Person),
        )
      ]),
    );
  }
}


///////////////////////////////////////////////////////////////////////////////////


// 파라미터 사용
GoRoute(
  path: '/users/:userId',
  builder: (context, state) => const UserScreen(id: state.pathParameters['userId']),
),


// 쿼리 사용
GoRoute(
  path: '/users',
  builder: (context, state) => const UsersScreen(filter: state.uri.queryParameters['filter']),
),


// Child routes
GoRoute(
  path: '/',
  builder: (context, state) {
    return HomeScreen();
  },
  routes: [
    GoRoute(
      path: 'details',
      builder: (context, state) {
        return DetailsScreen();
      },
    ),
  ],
)


////////////////////////////////////////////////////////////////////////////////////

// 이동 (go, push, goNamed, pushNamed 등 가능)
build(BuildContext context) {
  return TextButton(
    onPressed: () => context.go('/users/123'),
  );
}


// Uri 생성해서 이동
context.go(Uri(path: '/users/123', queryParameters: {'filter': 'abc'}).toString());


// extra 에 객체로 넘기기
onPressed: () => context.push('/personpage',
	extra: Person(name: 'aaa', age: 10, friends: [])),


// 리다이렉트
redirect: (BuildContext context, GoRouterState state) {
  if (!AuthState.of(context).isSignedIn) {
    return '/signin';
  } else {
    return null;
  }   
},

 

 

참고

https://pub.dev/documentation/go_router/latest/topics/Get%20started-topic.html

https://velog.io/@tygerhwang/Flutter-Go-Router-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%B3%B4%EA%B8%B0