Repository: flutter
Issue: [go_router] Is there a way to animate a bunch of underlying routes?
Labels: package,c: proposal,P3,p: go_router,team-go_router,triaged-go_router

### 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)

### Use case

I was experimenting with a routing in scope of custom transitions.
I added a `ModalBottomSheetRoute` to the list of the routes.

One thing that I would like to improve is to have an underlying bunch of rotes to have some animation. Currently they just appear after slide transition.

Here is a video

https://github.com/flutter/flutter/assets/6721286/dcf5c977-c9db-4829-8d6c-efbeb9faef64

and code

```dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() => runApp(App());

class DialogPage<T> extends Page<T> {
  final Widget child;

  const DialogPage({required this.child, super.key});

  @override
  Route<T> createRoute(BuildContext context) => ModalBottomSheetRoute<T>(
        settings: this,
        builder: (context) => Dialog(
          child: child,
        ),
        isScrollControlled: false,
      );
}

/// The main app.
class App extends StatelessWidget {
  /// Creates an [App].
  App({super.key});

  /// The title of the app.
  static const String title = 'GoRouter Example: Custom Transitions';

  @override
  Widget build(BuildContext context) => MaterialApp.router(
        routerConfig: _router,
        title: title,
      );

  final GoRouter _router = GoRouter(
    initialLocation: '/fade',
    routes: <GoRoute>[
      GoRoute(
        path: '/',
        builder: (context, state) => Scaffold(
          appBar: AppBar(),
          body: Column(
            children: [
              TextButton(
                child: Text('Open popup'),
                onPressed: () {
                  context.go('/slide');
                },
              ),
              TextButton(
                child: Text('Home'),
                onPressed: () {
                  context.go('/fade');
                },
              ),
            ],
          ),
        ),
        routes: [
          GoRoute(
            path: 'slide',
            pageBuilder: (BuildContext context, GoRouterState state) {
              return DialogPage(
                child: Align(
                    child: Container(
                        width: 200, height: 200, color: Colors.green)),
              );
            },
          ),
        ],
      ),
      GoRoute(
        path: '/fade',
        pageBuilder: (BuildContext context, GoRouterState state) =>
            CustomTransitionPage<void>(
          key: state.pageKey,
          child: const ExampleTransitionsScreen(
            kind: 'fade',
            color: Colors.red,
          ),
          transitionsBuilder: (BuildContext context,
                  Animation<double> animation,
                  Animation<double> secondaryAnimation,
                  Widget child) =>
              FadeTransition(opacity: animation, child: child),
        ),
      ),
    ],
  );
}

/// An Example transitions screen.
class ExampleTransitionsScreen extends StatelessWidget {
  /// Creates an [ExampleTransitionsScreen].
  const ExampleTransitionsScreen({
    required this.color,
    required this.kind,
    super.key,
  });

  /// The available transition kinds.
  static final List<String> kinds = <String>[
    'slide',
  ];

  /// The color of the container.
  final Color color;

  /// The transition kind.
  final String kind;

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('${App.title}: $kind')),
        body: Container(
          color: color,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                for (final String kind in kinds)
                  Padding(
                    padding: const EdgeInsets.all(8),
                    child: ElevatedButton(
                      onPressed: () => context.go('/$kind'),
                      child: Text('$kind transition'),
                    ),
                  ),
                Padding(
                  padding: const EdgeInsets.all(8),
                  child: ElevatedButton(
                    onPressed: () => context.go('/'),
                    child: Text('Root'),
                  ),
                )
              ],
            ),
          ),
        ),
      );
}
```


### Proposal

A possibility to have some kind of transition for underlying routes or any other thing.
Is there an ability to animate underlying routes in the same way as the top most?