flutter go_router vs auto_route

Flutter 에서 화면 전환 관련해서 go_router 라이브러리를 많이 사용하고 있다. 
그래서 go_router를 사용하였는데, 생각보다 매개변수를 화면에 전달하는 과정이 불편하고 문제가 많이 보였다. 

내가 개선하고 싶은 부분

🤔 화면에 매개변수 전달 시, 자동으로 관련 파라미터 전달 인터페이스를 생성해주는 라이브러리는 없을까? 

‼ auto_route 라는 라이브러리 발견!

AS-IS (go_router)

context.push(ExerciseCheckScreen.routePath, extra: {
  ExerciseCheckScreen.extraKeyScreenType: ExerciseScreenType.DISCOMFORT,
  ExerciseCheckScreen.extraKeyDailyPlanId: planId,
});

TO-BE (auto_route) 

router.push(ExerciseCheckRoute(
  dailyPlanId: planId,
  screenType: ExerciseScreenType.DISCOMFORT,
));

 

단순히 결과만 봐서는 별로 간결해졌다고 보이지 않는다. 하지만, go_router를 사용할 경우 아래의 코드가 추가로 필요하다. 

@RoutePage()
class ExerciseCheckScreen extends HookWidget {
  const ExerciseCheckScreen({super.key, required this.dailyPlanId, required this.screenType, this.onExerciseStart,});

  static const routePath = '/main/exerciseCheckScreen';
  static const routeName = 'ExerciseCheckScreen';
  static const extraKeyScreenType = "extraKeyScreenType";
  static const extraKeyDailyPlanId = "extraKeyDailyPlanId";

// 운동 만족도/불편함 체크 화면
GoRoute(
  path: ExerciseCheckScreen.routePath,
  name: ExerciseCheckScreen.routeName,
  pageBuilder: (context, state) {
    final extraMap = state.extra as Map<String, dynamic>;
    final screenType = extraMap[ExerciseCheckScreen.extraKeyScreenType] as ExerciseScreenType;
    final dailyPlanId = extraMap[ExerciseCheckScreen.extraKeyDailyPlanId] as String;

    return CustomTransitionPage(
        key: state.pageKey,
        child: ExerciseCheckScreen(dailyPlanId: dailyPlanId, screenType: screenType),
        transitionsBuilder: popupTransitionBuilder);
  },
)

주고 받을 파라미터 키값 정의를 해야하고, router 설정페이지에서 Map 형식을 원하는 타입으로 캐스팅 해야 하는 번거로운 과정이 필요하다. 

auto_route는 아래처럼 단순해진다. 

CustomRoute(
  page: ExerciseCheckRoute.page,
  transitionsBuilder: popupTransitionBuilder,
)

 

go_router 에서 정의해야 하는 복잡한 코드들을 build_runner가 내부적으로 알아서 만들어준다.