flutter
flutter copied to clipboard
flutter
go_router Ignores ShellRoute with Nested Grandchild Navigation
I am using Flutter 3.3.10 and go_router 6.0.1. I have created a sample Flutter app for desktop that has a navigation bar on the left. I want my routes to navigate only to the right of the nav so the nav is persistent and never changes.
This works great when going between top-level pages or drilling down one level in the nav hierarchy:
But once you go from a child page to a grandchild page, the views animate over the top of the nav, which would suggest it's ignoring the ShellRoute established at the top of the navigation tree.
Is this a bug or am I doing something wrong?
Full code is below.
Code sample
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(MaterialApp(home: Routes()));
}
final GlobalKey<NavigatorState> rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');
final GlobalKey<NavigatorState> firstNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'shell');
class Routes extends StatelessWidget {
Routes({super.key});
final GoRouter router = GoRouter(
navigatorKey: rootNavigatorKey,
initialLocation: '/a',
routes: [
ShellRoute(
navigatorKey: firstNavigatorKey,
builder: (BuildContext context, GoRouterState state, Widget child) {
//Main App Structure =====
return Scaffold(
body: Row(
children: [
const SizedBox(
width: 68,
child: Nav(),
),
Expanded(child: child),
],
),
);
},
routes: [
//===== A =====
GoRoute(
path: '/a',
pageBuilder: (context, state) => NoTransitionPage<void>(
key: state.pageKey,
child: const PageA(),
),
routes: [
GoRoute(
path: 'child',
builder: (context, state) {
return const PageAChild();
},
routes: [
GoRoute(
path: 'grandchild',
builder: (context, state) {
return const PageAGrandChild();
},
routes: [],
),
],
),
],
),
//===== B =====
GoRoute(
path: '/b',
pageBuilder: (context, state) => NoTransitionPage<void>(
key: state.pageKey,
child: const PageB(),
),
routes: [],
),
],
),
],
);
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: router,
debugShowCheckedModeBanner: false,
);
}
}
class Nav extends StatelessWidget {
const Nav({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.white),
child: Column(
children: [
TextButton(
onPressed: () {
GoRouter.of(context).go('/a');
},
child: const Text('Go to A'),
),
const SizedBox(height: 20),
TextButton(
onPressed: () {
GoRouter.of(context).go('/b');
},
child: const Text('Go to B'),
),
],
),
);
}
}
class PageA extends StatelessWidget {
const PageA({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.deepPurple),
child: Center(
child: Column(
children: [
const Text(
'Page A',
style: TextStyle(color: Colors.white),
),
TextButton(
onPressed: () {
GoRouter.of(context).go('/a/child');
},
child: const Text('Go to A\'s Child'),
),
],
),
),
);
}
}
class PageAChild extends StatelessWidget {
const PageAChild({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.deepOrange),
child: Center(
child: Column(
children: [
const Text('Page A Child'),
TextButton(
onPressed: () {
GoRouter.of(context).go('/a/child/grandchild');
},
child: const Text(
'Go to A\'s Grandchild',
style: TextStyle(color: Colors.white),
),
),
TextButton(
onPressed: () {
GoRouter.of(context).pop();
},
child: const Text('Go Back'),
),
],
),
),
);
}
}
class PageAGrandChild extends StatelessWidget {
const PageAGrandChild({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.red),
child: Center(
child: Column(
children: [
const Text('Page A Grandchild'),
TextButton(
onPressed: () {
GoRouter.of(context).pop();
},
child: const Text('Go Back'),
),
],
),
),
);
}
}
class PageB extends StatelessWidget {
const PageB({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(color: Colors.pink),
child: const Center(
child: Text('Page B'),
),
);
}
}
Logs
[✓] Flutter (Channel stable, 3.3.10, on macOS 13.1 22C65 darwin-arm (Rosetta), locale en-US) • Flutter version 3.3.10 on channel stable at /Users/clifton/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 135454af32 (6 weeks ago), 2022-12-15 07:36:55 -0800 • Engine revision 3316dd8728 • Dart version 2.18.6 • DevTools version 2.15.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at /Users/clifton/Library/Android/sdk • Platform android-33, build-tools 33.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866) • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14C18 • CocoaPods version 1.11.3
[✓] Android Studio (version 2021.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.74.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.58.0
[✓] Connected device (1 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.1 22C65 darwin-arm (Rosetta)
[✓] HTTP Host Availability • All required HTTP hosts are available
• No issues found!
Thanks for the report. Seeing the same behavior as reported, so will this issue open for team's thoughts on expected behavior.
stable, master flutter doctor -v
[!] Flutter (Channel stable, 3.7.0, on macOS 12.2.1 21D62 darwin-x64, locale
en-GB)
• Flutter version 3.7.0 on channel stable at
/Users/dhs/documents/fluttersdk/flutter
! Warning: `flutter` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
your current Flutter SDK checkout at
/Users/dhs/documents/fluttersdk/flutter. Consider adding
/Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
! Warning: `dart` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b06b8b2710 (28 hours ago), 2023-01-23 16:55:55 -0800
• Engine revision b24591ed32
• Dart version 2.19.0
• DevTools version 2.20.1
• If those were intentional, you can disregard the above warnings; however
it is recommended to use "git" directly to perform update checks and
upgrades.
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
! Flutter recommends a minimum Xcode version of 13.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] VS Code (version 1.62.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.21.0
[✓] Connected device (5 available)
• SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30)
• Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 •
ios • iOS 14.4.1 18D61
• iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 •
ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
• macOS (desktop) • macos •
darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64
• Chrome (web) • chrome •
web-javascript • Google Chrome 98.0.4758.80
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
[!] Flutter (Channel master, 3.7.0-27.0.pre.25, on macOS 12.2.1 21D62
darwin-x64, locale en-GB)
• Flutter version 3.7.0-27.0.pre.25 on channel master at
/Users/dhs/documents/fluttersdk/flutter
! Warning: `flutter` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
your current Flutter SDK checkout at
/Users/dhs/documents/fluttersdk/flutter. Consider adding
/Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
! Warning: `dart` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision c9affdba9d (3 hours ago), 2023-01-25 21:25:02 -0800
• Engine revision 8f1e5dc1b1
• Dart version 3.0.0 (build 3.0.0-157.0.dev)
• DevTools version 2.20.1
• If those were intentional, you can disregard the above warnings; however
it is recommended to use "git" directly to perform update checks and
upgrades.
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
! Flutter recommends a minimum Xcode version of 13.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] VS Code (version 1.62.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.21.0
[✓] Connected device (5 available)
• SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30)
• Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 •
ios • iOS 14.4.1 18D61
• iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 •
ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
• macOS (desktop) • macos •
darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64
• Chrome (web) • chrome •
web-javascript • Google Chrome 98.0.4758.80
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
Is this perhaps the issue also normally seen in nested navigators? Usually I have fixed this by clipping the nested navigator. I am not sure if thats possible with a shellroute 🤔 (without changing the shellroute internally).
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}