Transitons doesn't work with StatefulShellRoute in go_router package

[AhmedAli2003]

Steps to reproduce

This is the official example that demonstrates how to setup nested navigation using a BottomNavigationBar, where each bar item uses its own persistent navigator, i.e. navigation state is maintained separately for each item. This setup also enables deep linking into nested pages.

https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/stateful_shell_route.dart

Now I want to add CustomTransitionPage between pages in the bottom navigation bar, so I used pageBuilder instead of builder, but it didn't work.

Expected results

.

Actual results

.

Code sample

Code sample

``` import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; final _rootNavigatorKey = GlobalKey(debugLabel: 'root'); final _sectionANavigatorKey = GlobalKey(debugLabel: 'sectionANav'); void main() { runApp(NestedTabNavigationExampleApp()); } class NestedTabNavigationExampleApp extends StatelessWidget { NestedTabNavigationExampleApp({super.key}); final GoRouter _router = GoRouter( navigatorKey: _rootNavigatorKey, initialLocation: '/a', routes: [ StatefulShellRoute.indexedStack( pageBuilder: (context, state, navigationShell) { return CustomTransitionPage( key: state.pageKey, child: ScaffoldWithNavBar(navigationShell: navigationShell), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ); }, branches: [ StatefulShellBranch( navigatorKey: _sectionANavigatorKey, routes: [ GoRoute( path: '/a', pageBuilder: (context, state) => CustomTransitionPage( key: state.pageKey, child: const RootScreen(label: 'A'), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ), ), ], ), StatefulShellBranch( routes: [ GoRoute( path: '/b', pageBuilder: (context, state) => CustomTransitionPage( key: state.pageKey, child: const RootScreen(label: 'B'), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ), ), ], ), StatefulShellBranch( routes: [ GoRoute( path: '/c', pageBuilder: (context, state) => CustomTransitionPage( key: state.pageKey, child: const RootScreen(label: 'C'), transitionsBuilder: (context, animation, secondaryAnimation, child) { return FadeTransition( opacity: animation, child: child, ); }, ), ), ], ), ], ), ], ); @override Widget build(BuildContext context) { return MaterialApp.router( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), routerConfig: _router, ); } } /// Builds the "shell" for the app by building a Scaffold with a /// BottomNavigationBar, where [child] is placed in the body of the Scaffold. class ScaffoldWithNavBar extends StatelessWidget { const ScaffoldWithNavBar({ required this.navigationShell, Key? key, }) : super(key: key ?? const ValueKey('ScaffoldWithNavBar')); /// The navigation shell and container for the branch Navigators. final StatefulNavigationShell navigationShell; @override Widget build(BuildContext context) { return Scaffold( body: navigationShell, bottomNavigationBar: BottomNavigationBar( items: const [ BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Section A'), BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Section B'), BottomNavigationBarItem(icon: Icon(Icons.tab), label: 'Section C'), ], currentIndex: navigationShell.currentIndex, onTap: (int index) => _onTap(context, index), ), ); } void _onTap(BuildContext context, int index) { navigationShell.goBranch( index, initialLocation: index == navigationShell.currentIndex, ); } } /// Widget for the root/initial pages in the bottom navigation bar. class RootScreen extends StatelessWidget { const RootScreen({ required this.label, super.key, }); final String label; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Root of section $label'), ), body: Center( child: Text('Screen $label'), ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs

```console [Paste your logs here] ```

Flutter Doctor output

Doctor output

```Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.19.0, on Microsoft Windows [Version 10.0.22631.3447], locale en-US) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 32.0.0) [√] Chrome - develop for the web [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2020.3) [√] VS Code (version 1.88.1) [√] Connected device (4 available) [√] Network resources ! Doctor found issues in 1 category. ```

[darshankawar]

@AhmedAli2003 Can you take a look at below issues and check if any of them resembles your case or not ?

https://github.com/flutter/flutter/issues/139471 https://github.com/flutter/flutter/issues/137034 https://github.com/flutter/flutter/issues/135839 https://github.com/flutter/flutter/issues/131994

[AhmedAli2003]

@AhmedAli2003 Can you take a look at below issues and check if any of them resembles your case or not ?

139471 #137034 #135839 #131994

No, all these issues talk about ShellRoute not StatefulSellRoute which differs

[darshankawar]

Running the code, I see below behavior:

https://github.com/flutter/flutter/assets/67046386/ab28a732-3656-4607-b086-c4b3ba7abff1

What's the expected behavior are you looking for when it comes to transitioning from one nav bar to other ? Also, check this issue for further reference.

[TheLastFlame]

What's the expected behavior are you looking for when it comes to transitioning from one nav bar to other ?

I'm not the author of the issue, but I'm also concerned about this problem, so I think I can answer for him. I need StatefullShellRoute to not ignore the transition animation as it does now (there is absolutely no animation in the video when changing pages).

[github-actions[bot]]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.