[ go_router ] Nested ShellRoute does not show when pushing new route #113032
Description
Steps to Reproduce
- Execute
flutter runon the code sample - Tap the buttons to navigate between pages
/aand/a/b
Expected results:
There are three different ShellRoutes. The first is red, the second green and the third blue. The first and second should be visible on page /a and /a/b. The third should only be visible on page /a/b.
Actual results:
Both pages /a and /a/b show the same ShellRoute-Containers (red and green). The blue ShellRoute is not visible on page /a/b. I do not understand why that is the case and consider it to be a bug. When I use .go() instead of .push() when switching between the pages, the expected result is showing correctly. But this is not the behavior I want in my app.
Code sample
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
final GoRouter goRouter = GoRouter(
routes: [
ShellRoute(
builder: (context, state, child) => Scaffold(
body: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(32.0),
child: child,
),
),
),
routes: [
GoRoute(
path: "/",
redirect: (context, state) => "/a",
),
ShellRoute(
builder: (context, state, child) => Container(
color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(32.0),
child: child,
),
),
routes: [
GoRoute(
path: "/a",
builder: (context, state) => const A(),
routes: [
ShellRoute(
builder: (context, state, child) => Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(32.0),
child: child,
),
),
routes: [
GoRoute(
path: "b",
builder: (context, state) => const B(),
),
],
),
],
),
],
),
],
),
],
);
class A extends StatelessWidget {
const A({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black45,
child: Center(
child: ElevatedButton(
child: const Text("This is /a. go to /a/b"),
onPressed: () => GoRouter.of(context).push("/a/b"),
),
),
);
}
}
class B extends StatelessWidget {
const B({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black45,
child: Center(
child: ElevatedButton(
child: const Text("This is /a/b. go to /a"),
onPressed: () => GoRouter.of(context).push("/a"),
),
),
);
}
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationProvider: goRouter.routeInformationProvider,
routerDelegate: goRouter.routerDelegate,
routeInformationParser: goRouter.routeInformationParser,
);
}
}
pubspec.yml
name: go_router_test
description: A new Flutter project.
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1
environment:
sdk: '>=2.18.2 <3.0.0'
# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
go_router: ^5.0.5
dev_dependencies:
flutter_test:
sdk: flutter
# The "flutter_lints" package below contains a set of recommended lints to
# encourage good coding practices. The lint set provided by the package is
# activated in the `analysis_options.yaml` file located at the root of your
# package. See that file for information about deactivating specific lint
# rules and activating additional ones.
flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
Logs
no relevant errors
No issues found!
[√] Flutter (Channel stable, 3.3.3, on Microsoft Windows [Version 10.0.19044.2006], locale de-DE)
• Flutter version 3.3.3 on channel stable at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 18a827f393 (8 days ago), 2022-09-28 10:03:14 -0700
• Engine revision 5c984c26eb
• Dart version 2.18.2
• DevTools version 2.15.0
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at C:\Users\TimBa\AppData\Local\Android\sdk
• Platform android-33, build-tools 30.0.3
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop for Windows (Visual Studio Build Tools 2019 16.11.8)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
• Visual Studio Build Tools 2019 version 16.11.32002.261
• Windows 10 SDK version 10.0.19041.0
[√] Android Studio (version 4.2)
• Android Studio at C:\Program Files\Android\Android Studio
• 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.8+10-b944.6842174)
[√] IntelliJ IDEA Community Edition (version 2020.3)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2020.3.1
• 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
[√] VS Code (version 1.71.2)
• VS Code at C:\Users\TimBa\AppData\Local\Programs\Microsoft VS Code
• Flutter extension can be installed from:
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[√] Connected device (4 available)
• sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.2006]
• Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.127
• Edge (web) • edge • web-javascript • Microsoft Edge 106.0.1370.34
[√] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
Page /a |
Page /a/b |
|
|---|---|---|
Buggy when using .push() |
 |
 |
Working correctly when using .go() |
 |
 |