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

[vlkonoshenko]

Some have solution for this issue? Instead of auto_route package

[subzero911]

Some have solution for this issue? Instead of auto_route package

Unfortunately, go_router is still far behind auto_route.

[palancana]

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

The great flutter/packages#2650 PR has finally been merged! I understand, though, that animations were out of the scope. Are there any hopes for adding TabView or PageView support, so we can take profit of those animations?

Or maybe there is another workaround to use those animations with the current StatefulShellRoute, but I couldn't figure out how. Maybe @tolo or @chunhtai has an opinion there.

[subzero911]

You already have a StatefulShellRoute.indexedStack
It now should be easy to implement StatefulShellRoute.pageView. It essentially would be the same, but with a beautiful swipe animation between the screens.
Looking forward for it!

[yanshouwang]

There is a CustomStateShellRoute example, we can use PageView instead of the AnimatedBranchContainer

// GoRouter
final routerConfig = GoRouter(
  initialLocation: '/central-manager',
  navigatorKey: _rootNavigatorKey,
  routes: [
    StatefulShellRoute(
      // builder: (context, state, navigationShell) {
      //   return HomeView(navigationShell: navigationShell);
      // },
      builder: (context, state, navigationShell) => navigationShell,
      navigatorContainerBuilder: (context, navigationShell, children) {
        return HomeView(
          navigationShell: navigationShell,
          children: children,
        );
      },
      branches: [
        StatefulShellBranch(
          routes: [
            GoRoute(
              path: '/central-manager',
              builder: (context, state) {
                return const CentralManagerView();
              },
              routes: [
                GoRoute(
                  path: 'peripheral',
                  builder: (context, state) {
                    final eventArgs = state.extra as DiscoveredEventArgs;
                    return PeripheralView(
                      eventArgs: eventArgs,
                    );
                  },
                ),
              ],
            ),
          ],
        ),
        StatefulShellBranch(
          routes: [
            GoRoute(
              path: '/peripheral-manager',
              builder: (context, state) {
                return const PeripheralManagerView();
              },
            ),
          ],
        ),
      ],
    ),
  ],
);

// HomeView
class HomeView extends StatefulWidget {
  final StatefulNavigationShell navigationShell;
  final List<Widget> children;

  const HomeView({
    super.key,
    required this.navigationShell,
    required this.children,
  });

  @override
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  late final PageController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PageController(
      initialPage: widget.navigationShell.currentIndex,
    );
  }

  @override
  Widget build(BuildContext context) {
    final navigationShell = widget.navigationShell;
    final children = widget.children;
    return Scaffold(
      // body: navigationShell,
      // body: AnimatedBranchContainer(
      //   currentIndex: widget.navigationShell.currentIndex,
      //   children: widget.children,
      // ),
      body: PageView.builder(
        controller: _controller,
        onPageChanged: (index) {
          debugPrint(
              'index: $index, currentIndex: ${navigationShell.currentIndex}');
          // Ignore tap events.
          if (index == navigationShell.currentIndex) {
            return;
          }
          navigationShell.goBranch(
            index,
            initialLocation: false,
          );
        },
        itemBuilder: (context, index) {
          return children[index];
        },
        itemCount: children.length,
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          navigationShell.goBranch(
            index,
            initialLocation: index == navigationShell.currentIndex,
          );
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.radar),
            label: 'Central',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.sensors),
            label: 'Peripheral',
          ),
        ],
        currentIndex: widget.navigationShell.currentIndex,
      ),
    );
  }

  @override
  void didUpdateWidget(covariant HomeView oldWidget) {
    super.didUpdateWidget(oldWidget);
    final navigationShell = widget.navigationShell;
    final page = _controller.page ?? _controller.initialPage;
    final index = page.round();
    debugPrint('index: $index, currentIndex: ${navigationShell.currentIndex}');
    // Ignore swipe events.
    if (index == navigationShell.currentIndex) {
      return;
    }
    _controller.animateToPage(
      widget.navigationShell.currentIndex,
      duration: const Duration(milliseconds: 300),
      curve: Curves.linear,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}