How can I implement Tabs/Section within a Tab/Section?

[Arnooodles]

Use Case:

Main Tabs

- /home
- /shops
- /profile

then in /shops, I have a sub-tabs/sections for each shop:
example:

/shops/nike
/shops/apple
/shops/samsung
/shops/addidas

then in /profile

/profile/settings
/profile/orders

I have the following GoRouter :

final router = GoRouter(
  initialLocation: '/',
  urlPathStrategy: UrlPathStrategy.path,
  routes: [
    GoRoute(path: '/', redirect: (_) => '/home'),
    GoRoute(
        path: '/:section',
        pageBuilder: (context, state) {
          final section = baseState.params['section']!;
          return MaterialPage<void>(
            key: state.pageKey,
            child: BasePage(
              key: state.pageKey,
              section: section,
            ),
          );
        },
        ),
  ],
  errorPageBuilder: (context, state) => MaterialPage<void>(
    child: ErrorPage(
      error: state.error,
    ),
  ),
);

How should I proceed with adding the sub-routes?

[osaxma]

Did you check the nested navigation example? It's probably what you're looking for but instead of family tabs, you'd have shop tabs.

[Arnooodles]

Yes, I've checked that already but from what I understand is the sub-routes of that example are on a new page... what I want to achieve is something like this:

the main tab will be this:

and the sub-routes: