Tutorial

Reading State

Read the current location, route parameters, pane and shell scopes from any widget.

Cheat sheet

dart
AdaptiveRouter.of(context).location.value;               // '/products/1'
AdaptiveRouteState.of(context).pathParameters;           // {'id': '1'}
AdaptivePaneScope.maybeOf(context) != null;              // inside a two-column pane?
AdaptivePaneScope.maybeOf(context)?.title.value = name;  // breadcrumb title
AdaptiveShellScope.maybeOf(context)?.isExpanded;         // two columns right now?

A live location label

location, matches and currentBranch on the router are signals. Wrap readers in SignalBuilder (from signals_flutter) and they rebuild on every navigation. Drop this into the tutorial's AccountPage list:

dart
SignalBuilder(
  builder: (context) => ListTile(
    leading: const Icon(Icons.link),
    title: Text(AdaptiveRouter.of(context).location.value),
  ),
)

Pane and shell scopes

  • AdaptivePaneScope.maybeOf(context) is non-null only inside a two-column pane. Use it to choose useRootNavigator for dialogs and to set titles.
  • AdaptiveShellScope.maybeOf(context) gives the AdaptiveShellState (currentIndex, isCompact, isMedium, isExpanded, goBranch) to widgets deep inside the shell.

Drawing titles in your own chrome

To render titles somewhere other than the built-in breadcrumb strip, read AdaptiveRouter.of(context).matches.value.branchMatches; each match has a title signal and a name.

Next: Layout without the router.