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

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(),
        ),
      ],
    ),
  ],
),

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.

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

+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.

[go_router] Nested stateful navigation with ShellRoute (flutter#2650)

[go_router] Fixed TabView swiping in custom stateful shell route exam…

[go_router] Nested stateful navigation with ShellRoute (flutter#2650)

[go_router] Fixed TabView swiping in custom stateful shell route exam…

Navigation Menu

Repository navigation

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

Use case

Proposal

30 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Use case

Proposal

Activity

tolo commented on Sep 27, 2022

chunhtai commented on Sep 29, 2022

subzero911 commented on Dec 28, 2022

30 remaining items

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions