Repository: flutter
Issue: Document the animation behavior for material page transition
Labels: d: api docs,f: routes,has reproducible steps,P3,found in release: 3.10,team-design,triaged-design,found in release: 3.13

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

I'm forced to duplicate #130327 as the old one was closed prematurely. I'm now providing two examples of the same application with & without using ShellRoutes so the difference (and the issue) is clearly visible.

No particular steps to reproduce, just a simplest case with navigating shell routes.

### Expected results

Smooth transition-in for a new go-to screen, smooth transition-out for the current screen. **Same behaviour as for regular GoRoutes is expected**.

### Actual results

Transition-in for a new go-to screen happens just fine, while transition-out for the current screen doesn't happen and it stays there together with the new screen before simply dissappearing. Regular GoRoutes work just fine. I would expect the same behaviour.

### Code sample

<details><summary>Code sample with defect and ShellRoutes</summary>

```dart
void main() {
  runApp(const MyApp());
}

final _theme = ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
  useMaterial3: true,
);

final _router = GoRouter(
  initialLocation: '/',
  routes: [
    ShellRoute(
      builder:
          (BuildContext context, GoRouterState state, Widget child) {
        return Scaffold(
          body: child,
          /* ... */
        );
      },
      routes: <RouteBase>[
        GoRoute(
          path: '/',
          builder: (BuildContext context, GoRouterState state) {
            return const FooPage();
          },
        ),
        GoRoute(
          path: '/bar',
          builder: (BuildContext context, GoRouterState state) {
            return const BarPage();
          },
        ),
      ],
    ),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: _theme,
      routerConfig: _router,
    );
  }
}

class FooPage extends StatefulWidget {
  const FooPage({super.key});

  @override
  State<FooPage> createState() => _FooPageState();
}

class _FooPageState extends State<FooPage> {

  @override
  Widget build(BuildContext context) {
    return  Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                context.go("/bar");
              },
              child: const Text('This is foo, going to bar'),
            )
          ],
        ),
      );
  }
}


class BarPage extends StatefulWidget {
  const BarPage({super.key});

  @override
  State<BarPage> createState() => _BarPageState();
}

class _BarPageState extends State<BarPage> {

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                context.go("/");
              },
              child: const Text('This is bar, going to foo'),
            )
          ],
        ),
      );
  }
}
```

</details>

<details><summary>Code sample without defects and using GoRoutes</summary>

```dart


void main() {
  runApp(const MyApp());
}

final _theme = ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
  useMaterial3: true,
);

final _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const FooPage(),
    ),
    GoRoute(
      path: '/bar',
      builder: (context, state) => const BarPage(),
    ),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: _theme,
      routerConfig: _router,
    );
  }
}

class FooPage extends StatefulWidget {
  const FooPage({super.key});

  @override
  State<FooPage> createState() => _FooPageState();
}

class _FooPageState extends State<FooPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              context.go("/bar");
            },
            child: const Text('This is foo, going to bar'),
          )
        ],
      ),
    ));
  }
}

class BarPage extends StatefulWidget {
  const BarPage({super.key});

  @override
  State<BarPage> createState() => _BarPageState();
}

class _BarPageState extends State<BarPage> {
  @override
  Widget build(BuildContext context) {
    return
      Scaffold(
      body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              context.go("/");
            },
            child: const Text('This is bar, going to foo'),
          )
        ],
      ),
    ));
  }
}

```

</details>

### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

Same as in the original issue.

</details>


### Logs

<details><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
Resolving dependencies... 
  collection 1.17.1 (1.17.2 available)
+ flutter_web_plugins 0.0.0 from sdk flutter
+ go_router 9.0.3
+ logging 1.2.0
  matcher 0.12.15 (0.12.16 available)
  material_color_utilities 0.2.0 (0.8.0 available)
  source_span 1.9.1 (1.10.0 available)
  stack_trace 1.11.0 (1.11.1 available)
  stream_channel 2.1.1 (2.1.2 available)
  test_api 0.5.1 (0.6.1 available)
Changed 3 dependencies!
ydolzhenko@YuriAholdMac shell_case % flutter doctor -v
[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4 22F66 darwin-x64, locale en-NL)
    • Flutter version 3.10.5 on channel stable at /usr/local/Caskroom/flutter/2.8.1/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (4 weeks ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/ydolzhenko/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Users/ydolzhenko/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/222.4459.24.2221.10121639/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 17.0.6+0-17.0.6b802.4-9586694)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.3)
    • IntelliJ at /Users/ydolzhenko/Applications/JetBrains Toolbox/IntelliJ IDEA Ultimate.app
    • 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

[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.2)
    • IntelliJ at /Users/ydolzhenko/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/231.9011.34/IntelliJ IDEA 2022.2 EAP.app
    • 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

[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.3)
    • IntelliJ at /Users/ydolzhenko/Library/Application Support/JetBrains/Toolbox/apps/IDEA-U/ch-0/231.9161.38/IntelliJ IDEA 2022.2 EAP.app
    • 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.78.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.4 22F66 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 114.0.5735.198

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
```

</details>