[Flutter] 웹 라우팅을 Go Router 적용

Flutter에서 라우터를 관리하는 방법은 여러 가지가 있으며, 프로젝트의 복잡도와 요구사항에 따라 적합한 방식을 선택한다.

 

주요 라우팅 관리 방법은 아래와 같다.

 

 

1. 기본 Navigator 사용

📌 주요 메서드

• Navigator.push() : 새 화면으로 이동
• Navigator.pop() : 현재 화면 닫기
• Navigator.pushReplacement() : 현재 화면을 새로운 화면으로 교체
• Navigator.pushAndRemoveUntil() : 특정 조건까지 화면을 모두 제거하고 새 화면으로 이동

2. onGenerateRoute 사용

📌 예제

@override
Widget build(BuildContext context) {
  return MaterialApp(
    initialRoute: '/',
    onGenerateRoute: (settings) {
      switch (settings.name) {
        case '/':
          return MaterialPageRoute(builder: (_) => const HomePage());
        case '/second':
          return MaterialPageRoute(builder: (_) => const SecondPage());
        default:
          return MaterialPageRoute(builder: (_) => const NotFoundPage());
      }
    },
  );
}

Navigator.pushNamed(context, '/second');

 

3. go_router 패키지 사용

이번 포스팅의 목적은 go_router 패키지를 사용한 라우터 관리이다.

 

$ flutter pub add go_router

go_router에는 패키지 설치가 필요하다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

final GoRouter _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/second',
      builder: (context, state) => const SecondPage(),
    ),
  ],
);

 

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('두 번째 페이지')),
    body: Center(
      child: ElevatedButton(
        onPressed: () => context.go('/'),
        child: const Text('홈으로 이동'),
      ),
    ),
  );
};

 

 

사용법은 onGenerateRoute와 비슷해보이기도하다.

 

url의 Parameter를 추가할 수 있다.

 

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/detail/:id',
      builder: (context, state) {
        var id = state.pathParameters['id'];
        return DetailPage(id: id ?? '');
      },
    ),
  ],
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('홈')),
    body: Center(
      child: ElevatedButton(
        onPressed: () => context.go('/detail/123'),
        child: const Text('상세 페이지로 이동 (ID: 123)'),
      ),
    ),
  );
}

 

uri의 path, queryParameters로 사용하여 페이지 라우터 처리가 가능하다.

 

만들고자하는 앱이 모바일웹페이지도 존재하며 webView/flutterView를 오가며 자유자재로 호환하기 위해서는 go_Router가 적합해보인다.

여기서 조금 더 업그레이드 한다면, webView의 shouldOverrideUrlLoading 메소드나 firebase_dynimicLink, deepLink, Universal Link 수신하는 코드에서도 해당 라우터를 적용하면 좋을 것같다.

 

ex) dart로 구현된 flutterView 페이지가 있는데, 웹뷰에서 해당 웹페이지로 접근할 경우에 처리를 할때 더욱 간단해질 것같다.

 

프로젝트에 요구사항에 따라서 적절한 라우터 관리를 적용!