Implement tabs using a separate [GoRouter] instance for each tab

[Mouayad Alhamwi]

What we're trying to accomplish: to have a separate GoRouter for each tab.
Reason:

• Simplify navigation in each tab.
• Add a new tab without changing the router config.

[Mouayad Alhamwi]

First try:

• created primary(app-level) GoRouter with the following config:

  GoRouter(
      debugLogDiagnostics: kIsDebug,
      navigatorKey: _rootNavigatorKey,
      initialLocation: '/',
      routes: [
        GoRoute(
          path: '/',
          name: 'Home',
          builder: (context, state) => const WideHomeScreen(),
          routes: [
            ExplorePageRoute(),
            ListeningHistoryPageRoute(),
            LibraryAlbumsPageRoute(),
            LibraryTracksPageRoute(),
            LibraryArtistsPageRoute(),
            LibraryFoldersPageRoute(),
            ExploreMusicCategoryPageRoute(),
            ArtistPageRoute(),
            AlbumPageRoute(),
            PlaylistPageRoute(),
          ],
        ),
        DesktopSplashScreenRoute(),
      ],
    );

where in the WideHomeScreen body will have:

  
    PageView.builder(
      itemCount: tabsCount,
      itemBuilder: (context, index) {
        return Router.withConfig(config: tabRouter);
      },
    );

[Mouayad Alhamwi]

Additional steps:

• create a PageController to specify current tab.
• Update (vertical&horizontal)tab's title based on current location.
• update routers when re-ordering tabs.
• Add unit tests for TabsState.
• Add unit tests for TabsHelper.
• Add widget tests for VerticalTabs and HorizontalTabs