ShellRoute class

A route that displays a UI shell around the matching child route.

When a ShellRoute is added to the list of routes on GoRouter or GoRoute, a new Navigator that is used to display any matching sub-routes, instead of placing them on the root Navigator.

To display a child route on a different Navigator, provide it with a parentNavigatorKey that matches the key provided to either the GoRouter or ShellRoute constructor. In this example, the _rootNavigator key is passed to the /b/details route so that it displays on the root Navigator instead of the ShellRoute's Navigator:

final GlobalKey<NavigatorState> _rootNavigatorKey =

  final GoRouter _router = GoRouter(
    navigatorKey: _rootNavigatorKey,
    initialLocation: '/a',
    routes: [
      ShellRoute(
        navigatorKey: _shellNavigatorKey,
        builder: (context, state, child) {
          return ScaffoldWithNavBar(child: child);
        },
        routes: [
          // This screen is displayed on the ShellRoute's Navigator.
          GoRoute(
            path: '/a',
            builder: (context, state) {
              return const ScreenA();
            },
            routes: <RouteBase>[
              // This screen is displayed on the ShellRoute's Navigator.
              GoRoute(
                path: 'details',
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'A');
                },
              ),
            ],
          ),
          // Displayed ShellRoute's Navigator.
          GoRoute(
            path: '/b',
            builder: (BuildContext context, GoRouterState state) {
              return const ScreenB();
            },
            routes: <RouteBase>[
              // Displayed on the root Navigator by specifying the
              // [parentNavigatorKey].
              GoRoute(
                path: 'details',
                parentNavigatorKey: _rootNavigatorKey,
                builder: (BuildContext context, GoRouterState state) {
                  return const DetailsScreen(label: 'B');
                },
              ),
            ],
          ),
        ],
      ),
    ],
  );

The widget built by the matching sub-route becomes the child parameter of the builder.

For example:

ShellRoute(
  path: '/',
  builder: (BuildContext context, GoRouterState state, Widget child) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Shell')
      ),
      body: Center(
        child: child,
      ),
    );
  },
  routes: [
    GoRoute(
      path: 'a'
      builder: (BuildContext context, GoRouterState state) {
        return Text('Child Route "/a"');
      }
    ),
  ],
),
Inheritance

Constructors

ShellRoute({ShellRouteBuilder? builder, ShellRoutePageBuilder? pageBuilder, List<RouteBase> routes = const <RouteBase>[], GlobalKey<NavigatorState>? navigatorKey})
Constructs a ShellRoute.

Properties

builder → ShellRouteBuilder?
The widget builder for a shell route.
final
hashCode → int
The hash code for this object.
no setterinherited
The GlobalKey to be used by the Navigator built for this route. All ShellRoutes build a Navigator by default. Child GoRoutes are placed onto this Navigator instead of the root Navigator.
final
pageBuilder → ShellRoutePageBuilder?
The page builder for a shell route.
final
routes → List<RouteBase>
The list of child routes associated with this route.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited