[go_router] Add support for the TabView for more beautiful animation

[jopmiddelkamp]

Use case

In our app we are using a TabBar with TabView. This create a nice animation when using the tabs.

Now with go_router 5.0.0 we can use a ShellRoute but it returns the child in a Navigator. This works but we are losing the nice animation when switching tabs with a TabView.

I was thinking maybe we can create a TabBarShellRoute which gets wrapped in a DefaultTabController and then returns a child as a TabView with all the child routes inside of which each have their own Navigator.

Then maybe create a TabViewGoRoute which doesn't have a pageBuilder and of which the child routes are a list of the normal GoRoute objects.

Proposal

TabBarShellRoute(
  navigatorKey: _homeTabBarShellNavigatorKey,
  builder: (context, state, child, controller) => HomeTabShell(
    controller: controller,
    child: child,
  ),
  routes: [
    TabViewGoRoute(
      name: TransactionsTab.name,
      path: '/transactions',
      builder: (context, state) => const TransactionsTab(),
    ),
    TabViewGoRoute(
      name: SavingsBalancesTab.name,
      path: '/savings-balances',
      builder: (context, state) => const SavingsBalancesTab(),
      routes: [
        GoRoute(
          name: OpenSavingsPage.name,
          path: 'open-new',
          parentNavigatorKey: _rootNavigatorKey,
          builder: (context, state) => const OpenSavingsPage(),
        ),
      ],
    ),
  ],
),

[tolo]

Perhaps this can also be solved with a solution like the one I proposed in a comment to #99124. That change proposes a new ShellRoute subclass, that doesn't create a navigator, but instead delegates navigation handling to the child of the shell route.

I was also able to create a workaround without modifying go_router itself - see example in this gist. In that example, a custom ShellRoute subclass is also created, which simply bypasses the navigator of the shell route. Perhaps this example could also be adapted to your use case.

[chunhtai]

This feature can be added once flutter/packages#2650 is landed

[subzero911]

+1 for TabView support. You may want to also support PageView (in case we don't have tabs and want to scroll pages by gesture).
Both TabView and PageView are already supported in auto_route https://pub.dev/packages/auto_route#tab-navigation, but in ugly manner (it requires its own sub-router, so routing is smeared over the application). With ShellRoute it would be much nicer.