How to navigate between screens in Flutter using nested routing with auto_route

Question

I have a setup with nested routes using the auto_routes package. It looks like this:

  replaceInRouteName: 'Page,Route',
  routes: [
    AutoRoute(
      path: '/',
      page: HomePage,
      children: [
        AutoRoute(
          path: 'dashboard',
          name: 'DashboardRouter',
          page: EmptyRouterPage,
          children: [
            AutoRoute(
              path: '',
              page: DashboardPage,
            ),
            AutoRoute(
              path: ':regional',
              page: TopPlayersPage,
            ),
            AutoRoute(page: EditProfilePage),
            // AutoRoute(page: ProfilePage),
          ],
        ),
        AutoRoute(
          path: 'profile',
          name: 'ProfileRouter',
          page: ProfilePage,
        ),
        AutoRoute(
          path: 'search',
          name: 'SearchRouter',
          page: EmptyRouterPage,
          children: [
            AutoRoute(
              path: '',
              page: SearchOverviewPage,
            ),
            AutoRoute(
              path: ':searchType',
              page: SearchPage,
            )
          ],
        ),
        AutoRoute(
          path: 'add_post',
          name: 'AddPostRouter',
          page: AddPostPage,
        ),
        AutoRoute(
          path: 'notifications',
          name: 'NotificationsRouter',
          page: NotificationsPage,
        ),
        AutoRoute(
          path: 'edit_profile',
          name: 'EditProfileRouter',
          page: EditProfilePage,
        )
      ],
    ),
  ],
...
);
)

Most of the sections from above are used in a AutoTabsScaffold, that comes with auto_routes, to create a bottomNavigationBar.

return AutoTabsScaffold(
      backgroundColor: LIGHT_MODE_WHITE,
      routes: const [
        DashboardRouter(),
        SearchRouter(),
        AddPostRouter(),
        NotificationsRouter(),
        EditProfileRouter(),
      ],

I now want to navigage from a widget which is contained in the Dashboard page to my ProfilePage, which is not used in the bottomNavigationBar. I tried to do this using this code, but nothing happens (the parameter "playerId" is marked required in the class I use in the ProfileRouter):

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        context.navigateTo(
          ProfileRouter(
            playerId: 'Test',
          ),
        );
      },
... 
}

When I swap the ProfileRouter for a router that is used in my bottomNavigationBar, it works fine. Any idea how to fix this? When i integrate the ProfileRouter into the dashboard section of my routing setup, i can access it using router.push(), but since I want to access this Page from other parts of the code aswell, this is not the way to go as far as I understand.

Thank you!

Answer 1

Found out what the problem was. The ProfilePage Route had to be moved up a level.