[flutter] 플러터 Riverpod에서의 라우팅 처리 방법

30 Nov 2023

flutter

플러터(Flutter)는 UI 개발을 위한 강력한 프레임워크입니다. Riverpod는 플러터 앱에서 상태 관리를 위한 라이브러리인데, 이번 포스트에서는 플러터 Riverpod에서의 라우팅 처리 방법에 대해 알아보겠습니다.

1. Riverpod 라우팅 라이브러리 추가하기

프로젝트의 pubspec.yaml 파일에서 다음 라우팅 라이브러리를 추가해야 합니다.

dependencies:
  riverpod: ^1.0.3
  riverpod_route_helper: ^0.1.0

이 라이브러리들을 추가하면 플러터 Riverpod에서 라우팅을 간편하게 처리할 수 있습니다.

2. 라우팅 설정하기

먼저, 라우팅을 설정하기 위해 routes.dart 파일을 생성하고 아래와 같이 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:riverpod_route_helper/riverpod_route_helper.dart';

import 'screens/home_screen.dart';
import 'screens/profile_screen.dart';

class Routes {
  static final router = GlobalKey<NavigatorState>();
  static final routeGenerator = RiverpodRouteHelper.generator(
    routes: {
      "/": (context) => HomeScreen(),
      "/profile": (context) => ProfileScreen(),
    },
    initialRoute: '/',
    navigatorKey: router,
  );
}

위 코드에서는 RiverpodRouteHelper 클래스를 사용하여 라우팅을 설정하고, routes 맵에 경로와 해당 경로로 이동할 화면을 등록합니다. initialRoute은 앱이 시작될 때 초기 경로를 의미합니다. navigatorKey는 네비게이터 상태를 관리하기 위한 키입니다.

3. 라우터 위젯 추가하기

이제 플러터 앱의 루트 위젯에 Router 위젯을 추가해야 합니다. main.dart 파일에 아래와 같이 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:riverpod/all.dart';

import 'routes.dart';

void main() {
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: Routes.routeGenerator.routerDelegate,
      routeInformationParser: Routes.routeGenerator.routeInformationParser,
      title: 'Riverpod Routing Example',
    );
  }
}

위 코드에서는 routerDelegate와 routeInformationParser에 Routes.routeGenerator를 설정하여 라우팅을 처리합니다.

4. 라우트 이동하기

이제 앱 내에서 화면 전환이나 라우팅 이동을 위한 메서드를 작성해보겠습니다.

void navigateToProfile(BuildContext context) {
  Routes.router.currentState?.pushNamed("/profile");
}

void navigateToHome(BuildContext context) {
  Routes.router.currentState?.pushReplacementNamed("/");
}

위 코드에서는 Routes.router.currentState?.pushNamed 메서드를 사용하여 해당 경로로 화면을 전환합니다.

5. 라우트 파라미터 전달하기

라우트로 전달해야 할 파라미터가 있는 경우 uri 맵에 추가하여 넘길 수 있습니다. 예를 들어, /profile 경로에 id 파라미터를 전달하려면 아래와 같이 코드를 작성합니다.

class Routes {
  //...

  static final routeGenerator = RiverpodRouteHelper.generator(
    //...
    namedRouterBuilders: [
      RouteBuilder(
        route: "/profile/:id",
        builder: (context, uri, params) => ProfileScreen(id: params["id"]),
      ),
    ],
  );
}

위 코드에서는 namedRouterBuilders를 사용하여 경로에 따른 파라미터를 받아 ProfileScreen에 전달할 수 있습니다.

이제 플러터 Riverpod에서의 라우팅 처리 방법에 대해 알아봤습니다. Riverpod와 라우팅을 함께 사용하면 플러터 앱의 상태 관리와 화면 전환을 효율적으로 처리할 수 있습니다.

더 자세한 내용은 Riverpod 공식 문서를 참고하세요.