Nested navigation with AutoTabScaffold

[urvashi-k-7span]

Hello there, I am using AutoTabsScaffold with BottomNavigationBar and I have five routes in the bottom navigation bar. Let's say I have one route called "Events" and another one called "Profile".

I have defined it as

AutoRoute(path: "/", page: HomeRoute.page, children: [
      AutoRoute(
        page: HomeTabRoute.page,
        path: 'home',
        children: [
          AutoRoute(path: '', page: HomeScreenRouter.page),

          // AutoRoute(path: 'productCart', page: ProductCartRouter.page),
          // AutoRoute(path: 'products/:id', page: CategoryWiseProductsRouter.page),
          RedirectRoute(path: '*', redirectTo: ''),
          AutoRoute(
            page: NotificationRoute.page,
            path: 'notification-screen',
          ),
        ],
      ),
      AutoRoute(page: MyProfileTabRoute.page, path: 'profile', children: [
        AutoRoute(
          page: MyProfileRouter.page,
          path: 'my-profile',
        ),
        AutoRoute(
          page: EditProfileRouter.page,
          path: 'edit-profile',
        ),
        AutoRoute(
          page: EducationFormRouter.page,
          path: 'edit-education',
        ),
        AutoRoute(
          page: ExperienceFormRouter.page,
          path: 'experience-form',
        ),
        AutoRoute(
          page: PortfolioFormRouter.page,
          path: 'portfolio-form',
        ),
        AutoRoute(
          page: FollowFriendsSeeAllRouter.page,
          path: 'follow-friends-seeall',
        ),
        AutoRoute(
          page: MyClubsAndCommunitiesRouter.page,
          path: 'my-clubs-and-community-screen',
        ),
        AutoRoute(
          page: CommunityDetailRouter.page,
          path: 'community-detail',
        )
      ]),
      AutoRoute(
        page: EventsTabRoute.page,
        path: 'events',
        children: [
          AutoRoute(path: '', page: EventsHomeScreenRouter.page),
          RedirectRoute(path: '*', redirectTo: ''),
          AutoRoute(
            page: CommunityDetailRouter.page,
            path: 'community-detail',
          ),
          AutoRoute(
            page: UpdateCommunityRoute.page,
            path: 'community-update',
          ),
          AutoRoute(
            page: NotificationRoute.page,
            path: 'notification-screen',
          ),
        ],
      ),
    ]),

I have a notification route in the events screen and home screen both, now from the notification screen I want to navigate in CommunityDetailRouter from events and home both, so How can I achieve it?

Do I need to pass children to NotificationRoute wherever needed? Or any other solution please let me know.

Thanks in advance!!

[Milad-Akarie]

@urvashik-7span to navigate to notification page inside the home route

context.navigateTo(HomeTabRoute(children: [NotificationRoute()]));

[HenrikH96]

@Milad-Akarie

I have a similar problem. I have also setup AutoTabScaffold with Nested Routes like Above. I have a settings Tab with different Children

          children: [
            AutoRoute(
                path: "userSelections",
                page: UserSelectionRoute.page,
                children: [
                  AutoRoute(
                    path: "user",
                    page: UserSettingsRoute.page,
                  ),
                ]),
            AutoRoute(
              path: "account",
              page: AccountSettingsRoute.page,
            ),
            AutoRoute(
              path: "timeline",
              page: TimeLineSettingsRoute.page,
            ),
          ]),
        ]),

My settings Screen has buttons to navigate to the child Pages. But whatever i try it won't navigate.

I tried: context.navigateTo(AccountSettingsRoute()); context.navigateTo( SettingsRoute(children: [AccountSettingsRoute()])); context.navigateTo(HomeRoute(children: [ SettingsRoute(children: [AccountSettingsRoute()]) ]));

But nothing happens.

[vaspadi]

@HenrikH96 In my app, there is also a TabsRouter with four tabs. However, all the pages within a tab are on the same level for me - I have no reason to make deep nesting; one level is enough. Maybe I'm doing something wrong - please correct me if needed.

For navigating between screens on the same level:

context.router.push(const TransactionDetailsRoute())

AppRouter:

AutoRoute(
      path: '/main',
      page: MainRoute.page,
      guards: [AuthGuard(), PushNotificationsGuard()],
      children: [
        RedirectRoute(
          path: '',
          redirectTo: 'home',
        ),
        AutoRoute(
          path: 'home',
          page: HomeRouter.page,
          children: [
            AutoRoute(
              page: HomeRoute.page,
              path: '',
            ),
            AutoRoute(
              path: 'verification',
              page: VerificationRoute.page,
            ),
          ],
        ),
        AutoRoute(
          path: 'history',
          page: HistoryRouter.page,
          children: [
            AutoRoute(
              path: '',
              page: HistoryRoute.page,
            ),
            AutoRoute(
              path: 'transaction-details',
              page: TransactionDetailsRoute.page,
            ),
          ],
        ),
        AutoRoute(
          path: 'transfers',
          page: TransfersRouter.page,
          children: [
            AutoRoute(path: '', page: TransfersRoute.page),
            AutoRoute(path: 'favorites', page: FavoritesRoute.page),
          ],
        ),
        ...

[HenrikH96]

@vaspadi

I tried setting it up the same way as you did. But when i call context.router.push(const TransactionDetailsRoute(AccountSettingsRoute())) It repushes the complete stack and shows the SettingsRoute.Page.

The Widget tree after calling the function multiple times looks something like this

my router setup:

List<AutoRoute> get routes => [
        AutoRoute(
          path: "/home",
          page: HomeRoute.page,
          initial: true,
          guards: [AuthGuard(authcubit)],
          children: [
            RedirectRoute(path: '', redirectTo: 'bucketlist'),
            AutoRoute(
              path: "foryou",
              page: ForYouRoute.page,
              initial: true,
            ),
            AutoRoute(
              path: "bucketlist",
              page: BucketListRoute.page,
            ),
            AutoRoute(
              path: "blanc",
              page: BlancRoute.page,
            ),
            AutoRoute(path: "timeline", page: TimeLineRoute.page),
            AutoRoute(
              path: "settings",
              page: SettingsRoute.page,
              guards: [AuthGuard(authcubit)],
              children: [
                AutoRoute(
                  path: '',
                  page: SettingsRoute.page,
                ),
                AutoRoute(
                  path: "user",
                  page: UserSettingsRoute.page,
                ),
                AutoRoute(
                  path: "userSelections",
                  page: UserSelectionRoute.page,
                ),
                AutoRoute(
                  path: "account",
                  page: AccountSettingsRoute.page,
                ),
                AutoRoute(
                  path: "timeline",
                  page: TimeLineSettingsRoute.page,
                ),
              ],
            ),
          ],
        ),
        AutoRoute(
            path: "/memoryEditor",
            page: MemoryEditorRoute.page,
            guards: [AuthGuard(authcubit)]),
        AutoRoute(
            path: "/memory",
            page: MemoryRoute.page,
            guards: [AuthGuard(authcubit)]),
        AutoRoute(path: "/auth", page: AuthRoute.page),
      ];

[HenrikH96]

Hey there, Any updates on this ? I am still struggling ;/

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[kuyazee]

Damn this also happens to me #1790

@Milad-Akarie any news?

I've also tried the nested push navigation like you said here

          @urvashik-7span  to navigate to notification page inside the home route 

          `context.navigateTo(HomeTabRoute(children: [NotificationRoute()]));`

          _Originally posted by @Milad-Akarie in https://github.com/Milad-Akarie/auto_route_library/issues/1654#issuecomment-1663989439_

[jazz-mobility]

Same issue for me. Nested navigation inside tabs doesn't work. The Main Profile page never opens, instead it pushes the same stack once again.

@AutoRouterConfig(
  modules: [
    LoginModule,
    ProductGuideModule,
    HomeModule,
    SeniorListModule,
    AnalysisListModule,
    MoreModule,
    ProfileModule,
  ],
)
class AppRouter extends _$AppRouter {
  // Private constructor
  AppRouter._();

  static AppRouter shared = AppRouter._();

  @override
  List<AutoRoute> get routes => [
        AutoRoute(page: SplashRoute.page, initial: true),
        AutoRoute(page: ProductGuideRoute.page),
        AutoRoute(page: LoginRoute.page),
        AutoRoute(
          page: B2BDashboardRoute.page,
          children: [
            AutoRoute(page: HomeRoute.page, initial: true),
            AutoRoute(
              page: LinderaSeniorListRoute.page,
              children: [AutoRoute(page: MainProfileRoute.page)],
            ),
            AutoRoute(page: AnalysesListRoute.page),
            AutoRoute(page: MoreRoute.page),
          ],
        ),
      ];
}

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

[rickynguyenc]

I have got same issue. Nested navigation inside tabs doesn't work. This is my code:

[derFunk]

Same problem here. Did somebody find a reason/solution?

[ismailcaakir]

I have the same problem. How to get rid of this problem, someone please help :)

I solved this problem. This is the right solution

https://github.com/Milad-Akarie/auto_route_library/blob/master/auto_route/example/lib/mobile/router/router.dart

The part to considers.

@RoutePage(name: 'BooksTab')
class BooksTabPage extends AutoRouter {
  const BooksTabPage({super.key});
}

@RoutePage(name: 'ProfileTab')
class ProfileTabPage extends AutoRouter {
  const ProfileTabPage({super.key});
}

AutoTabsRouter(
            routes: [
              BooksTab(),
              ProfileTab(),
              if (_showSettingsTap) SettingsTab(tab: 'tab'),
            ],
            builder: (context, child) {
              return Scaffold(
                appBar: AppBar(
                  title: Text(context.topRoute.title(context)),
                  leading: AutoLeadingButton(ignorePagelessRoutes: true),
                  // bottom: TabBar(
                  //   controller: controller,
                  //   tabs: [
                  //     for (final d in destinations)
                  //       Tab(
                  //         child: Text(d.label),
                  //       )
                  //   ],
                  // ),
                ),
                body: child,
                bottomNavigationBar:
                    buildBottomNav(context, context.tabsRouter),
              );
            },
          );

[Pramod800]

I aslo faced same problem . Does anyone have found a solution?

[npopok]

I also got a problem some time when I could not navigate to nested pages. My setup was: [Home] -> [Settings] in tabbar -> [Data] - this navigation didn't work

I use CupertinoApp and I suspect there is some problem with AutoTabsRouter in these specific conditions. After hours of troubleshooting, I resolved it using the following steps:

1. Replaced AutoTabsRouter with CupertinoTabScaffold + CupertinoTabBar.
2. Moved nested DataRouter to the same hierarchy as Home (this is very important).

[HenrikH96]

@Pramod800 I found a solution for my case. In order to create another navigator stack, you need to add a tabs page in between. Thanks to @ismailcaakir for pointing that out. I didn't understand it at first, but it's not that complicated. Just create a new app_tabs.dart file (for convenience) and add the tab routes you want. For example, for my multiple settings page:

@RoutePage(name: 'SettingsTab')
class SettingsTab extends AutoRouter {
  const SettingsTab({super.key});
}

Use them as parent pages for your tabbed screens. In my routing file, it looks like this:

@override
  List<AutoRoute> get routes => [
        CustomRoute(
            path: "/app",
            page: AppRoute.page,
            initial: true,
            transitionsBuilder: TransitionsBuilders.fadeIn,
            durationInMilliseconds: 500,
            children: [
              RedirectRoute(path: '', redirectTo: 'home'),
              CustomRoute(
                path: "home",
                page: HomeRoute.page,
                guards: [AuthGuard(authcubit)],
                children: [
                  RedirectRoute(path: '', redirectTo: 'memories'),
                  AutoRoute(
                      path: "memories",
                      page: MemoriesTab.page,
                      children: [
                        AutoRoute(
                          path: '',
                          page: MemoriesDashboardRoute.page,
                        ),
                      ]),
                  AutoRoute(
                      path: "bucketlist",
                      page: BucketListTab.page,
                      children: [
                        AutoRoute(
                          path: '',
                          page: BucketListRoute.page,
                        )
                      ]),
                  AutoRoute(
                    path: "challenge",
                    page: ChallengeTab.page,
                    children: [
                      AutoRoute(
                        path: '',
                        page: ChallengeRoute.page,
                      ),
                    ],
                  ),
                  AutoRoute(
                    path: "settings",
                    page: SettingsTab.page,
                    children: [
                      AutoRoute(
                        path: '',
                        page: SettingsRoute.page,
                      ),
                      AutoRoute(
                        path: 'accountSettings',
                        page: AccountSettingsRoute.page,
                      ),
                      AutoRoute(
                        path: "timelinesettings",
                        page: TimeLineSettingsRoute.page,
                      ),
                      AutoRoute(
                        path: "userSelections",
                        page: UserSelectionRoute.page,
                      ),
                      AutoRoute(
                        path: "userSettings",
                        page: UserSettingsRoute.page,
                      ),
                    ],
                  ),
                ],
              ),
              AutoRoute(
                path: "auth",
                page: AuthRoute.page,
              ),
      ];

[ismailcaakir]

@Pramod800 I found a solution for my case. In order to create another navigator stack, you need to add a tabs page in between. Thanks to @ismailcaakir for pointing that out. I didn't understand it at first, but it's not that complicated. Just create a new app_tabs.dart file (for convenience) and add the tab routes you want. For example, for my multiple settings page:

@RoutePage(name: 'SettingsTab')
class SettingsTab extends AutoRouter {
  const SettingsTab({super.key});
}

Use them as parent pages for your tabbed screens. In my routing file, it looks like this:

@override
  List<AutoRoute> get routes => [
        CustomRoute(
            path: "/app",
            page: AppRoute.page,
            initial: true,
            transitionsBuilder: TransitionsBuilders.fadeIn,
            durationInMilliseconds: 500,
            children: [
              RedirectRoute(path: '', redirectTo: 'home'),
              CustomRoute(
                path: "home",
                page: HomeRoute.page,
                guards: [AuthGuard(authcubit)],
                children: [
                  RedirectRoute(path: '', redirectTo: 'memories'),
                  AutoRoute(
                      path: "memories",
                      page: MemoriesTab.page,
                      children: [
                        AutoRoute(
                          path: '',
                          page: MemoriesDashboardRoute.page,
                        ),
                      ]),
                  AutoRoute(
                      path: "bucketlist",
                      page: BucketListTab.page,
                      children: [
                        AutoRoute(
                          path: '',
                          page: BucketListRoute.page,
                        )
                      ]),
                  AutoRoute(
                    path: "challenge",
                    page: ChallengeTab.page,
                    children: [
                      AutoRoute(
                        path: '',
                        page: ChallengeRoute.page,
                      ),
                    ],
                  ),
                  AutoRoute(
                    path: "settings",
                    page: SettingsTab.page,
                    children: [
                      AutoRoute(
                        path: '',
                        page: SettingsRoute.page,
                      ),
                      AutoRoute(
                        path: 'accountSettings',
                        page: AccountSettingsRoute.page,
                      ),
                      AutoRoute(
                        path: "timelinesettings",
                        page: TimeLineSettingsRoute.page,
                      ),
                      AutoRoute(
                        path: "userSelections",
                        page: UserSelectionRoute.page,
                      ),
                      AutoRoute(
                        path: "userSettings",
                        page: UserSettingsRoute.page,
                      ),
                    ],
                  ),
                ],
              ),
              AutoRoute(
                path: "auth",
                page: AuthRoute.page,
              ),
      ];

Your welcome, but there is a very small problem with this. HeroController does not support these pages unfortunately.

I am currently looking for a solution to this issue. https://github.com/Milad-Akarie/auto_route_library/issues/1873

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions