GoRouter

go_router 패키지는 선언적 Navigation을 지원하여 더 간결하고 직관적인 라우팅 방식을 제공합니다.

앱 내에서 페이지 간의 이동을 더 쉽게 관리할 수 있을 뿐더러,
고유한 URL 패턴과 딥 링크가 화면 간 탐색을 Handling 해줍니다.

기본 셋팅

var goRouter = GoRouter(routes: [
  GoRoute(
    path: '/',
    builder: (context, state) => const MainPage(),
  ),
   GoRoute(
    path: '/goRouterPage',
    builder: (context, state) => const GoRouterPage(),
  ),
]);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: goRouter,
    );
  }
}

parameters을 전달하는 경우.

기존의 웹 기반 라우팅 라이브러리와 같은 방식으로 제공하고 있어서 사용방법이 유사합니다.

• state.params
  URL 경로의 일부로 동적으로 전달되는 값 입니다.

• state.queryParams
  URL의 쿼리문인 물음표(?)를 기점으로 이후에 위치하며,
  URL의 쿼리 문자열 부분에서 사용되는 키-값 입니다.
  만일 ?filter=hodu 에서 filter는 key이고 hodu는 value에 해당하는 값 입니다.
  페이지 혹은 데이터를 필터링하는 것에 자주 사용됩니다.

GoRoute(
	path: '/home/:userId?filter=hodu',
    builder: (context, state) =>
    	MainHomePage(
        	userId: state.params['userId'],
            filter: state.queryParams[filter]
        )
)

어디로든 페이지 이동하고 싶은 경우.

GoRouter.of(context).go('경로') 혹은 context.go('경로') 로 이동이 가능합니다.

ElevatedButton(
	child: const Text(''),
    onPressed: () => GoRouter.of(context).go('/'), // 혹은 context.go('/')
)

bottomNavigation이 필요한 경우.

ShellRoute로 UI Shell을 Rendering 하기 때문에 UI Shell(bottomNavigation)이 탐색 시에도 그대로 유지됩니다.

var goRouter = GoRouter(routes: [
  ShellRoute(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomePage(),
      ),
      GoRoute(
        name: RouterName.flutterHooks.name,
        path: '/flutterHooks',
        builder: (context, state) => const FlutterHooksExPage(),
      ),
    ],
    builder: (context, state, child) {
      return Scaffold(
        body: child,
        bottomNavigationBar: BottomNavigationBar(currentIndex: 0, items: const [
          BottomNavigationBarItem(label: 'home', icon: Icon(Icons.heart_broken)),
          BottomNavigationBarItem(label: 'home2', icon: Icon(Icons.ac_unit_outlined)),
        ]),
      );
    },
  ),