Need help on using GoRouter + Riverpod here!

[famasf1]

Hi. I'm having a problem with using Riverpod and GoRouter.

My app need to have dynamic pages based on value i retrieved from the API. That mean if the API result page length is 16, my app will have only 16 pages. So that mean i cannot configured static route.

So i decided to go with this way. First i created a route state that will hold all the GoRoute as a list.

@Riverpod(keepAlive: true)
class RouteState extends _$RouteState {
  @override
  List<GoRoute> build() {
    return [];
  }

  Future<bool> updateGoRoutePath() async {
    final deviceModelService = ref.read(deviceModelServiceProvider);
    final result = await deviceModelService.createRoutesList();
    state = result;
    return result.isNotEmpty;
  }
}

Which will inject the route back into the main GoRoute pages that need the routes list.

@Riverpod(keepAlive: true)
class AppRouter extends _$AppRouter {
  @override
  GoRouter build() {
    final appStartupState = ref.watch(appStartupProvider);
    final routePathState = ref.watch(routeStateProvider);

    return GoRouter(
      debugLogDiagnostics: true,
      initialLocation: '/${AppRoutes.mainPage.path}',
      redirect: (context, state) {
        if (appStartupState.isLoading || appStartupState.hasError) {
          return '/${AppRoutes.mainPage.path}';
        }
        return null;
      },
      routes: [
GoRoute(
          name: AppRoutes.mainPage.name,
          path: "/${AppRoutes.mainPage.path}",
          pageBuilder: (context, state) {
            
            return buildPagewithDefaultTransition(
              context: context,
              state: state,
              child: AppStartupWidget(onLoaded: (_) => const MainPageLayout()),
            );
          },
          routes: [
GoRoute(
              name: AppRoutes.preparingPage.name,
              path: AppRoutes.preparingPage.path,
              pageBuilder: (context, state) => buildPagewithDefaultTransition(
                context: context,
                state: state,
                child: const PreparingPage(),
              ),
              routes:
                  routePathState, //isiOS ? iOSRoute : androidRoute,
            ),
]
);
  }
}

The routes list will be created by my button widget.

MainMenuButton(
                              text: translation.homePageStartTradeButton,
                              isFilled: true,
                              function: () async {
                                final canTest =
                                    await routeState.updateGoRoutePath();
                                if (context.mounted && canTest) {
                                  context
                                      .goNamed(AppRoutes.preparingPage.name);
                                } else if (context.mounted && !canTest) {
                                  await showDialog(
                                    context: context,
                                    builder: (context) => AlertDialog(
                                      title: Text(
                                        translation.homePageNoDevice,
                                        textAlign: TextAlign.center,
                                        style: theme.textTheme.bodyLarge,
                                      ),
                                      actions: [
                                        TextButton(
                                          onPressed: () => context.pop(),
                                          child: Text(
                                            translation.okTxt,
                                            style: theme.textTheme.bodyLarge,
                                          ),
                                        ),
                                      ],
                                    ),
                                  );
                                }
                              },
                            ),

if canTest is true. Then proceed to the next page, is my desired behavior. But apparently whenever RouteState changes. it rebuilt AppRouter state as well. Which mean as soon as await routeState.updateGoRoutePath(); finished. My MainApp routerConfig rebuild itself.

final router = ref.watch(appRouterProvider);
return MaterialApp.router(
            debugShowCheckedModeBanner: false,
            locale: Locale(languageState),
            builder: DevicePreview.appBuilder,
            theme: MaterialTechbizTheme().themeData,
            routerConfig: router,
            localizationsDelegates: AppLocalizations.localizationsDelegates,
            supportedLocales: AppLocalizations.supportedLocales,
          ),

And thus it will stay in the first page. Basically nothing happen. So now i'm completely stuck. How should i approach this issue differently. Can anyone guide me?