XueHua Adaptive Sliding Layout

Reference

Route Table

Reference for AdaptiveRouter, AdaptiveRoute, AdaptiveShellRoute, AdaptiveBranch and the state objects.

Types

TypeRole
AdaptiveRouter RouterConfig<AdaptiveRouteMatchList> . Verbs + namedLocation / refresh . Signals: location , matches , currentBranch . of / maybeOf .
AdaptiveRoute One page. path , optional name , builder , title , fullscreen , fullscreenDialog , hidesBottomBarWhenPushed , opaque , barrierColor , barrierDismissible , transitionsBuilder , redirect , onExit , nested routes .
AdaptiveShellRoute Tabs + adaptive chrome. One per tree, top-level only. builder(context, shell, child) , branches , breakpoints , sash / breadcrumbs, plus UI knobs .
AdaptiveShellChrome Compact bottom bar. bottomNavigationBar is a WidgetBuilder . The bar is inside the branch page, so a sheet with useRootNavigator: false covers it. Do not also set Scaffold.bottomNavigationBar .
AdaptiveBranch One tab. routes , optional initialLocation / placeholder .
AdaptiveRouteState Builder argument, also AdaptiveRouteState.of(context) : uri , matchedLocation , fullPath , name , pathParameters , queryParameters , arguments , error , pageKey .
AdaptiveShellState Shell builder argument: currentIndex , width / breakpoints ( isCompact , isMedium , isExpanded ), leftPaneFraction , goBranch .
LayoutBreakpoints const class, defaults compactMaxWidth: 600 , expandedMinWidth: 840 .

Paths

  • Child paths are relative to their parent.
  • :param is one path segment.
  • First match wins.

Redirects and errors

Top-level redirect and per-route redirect may return a new location (FutureOr<String?>). Loops stop after redirectLimit (5) and hit errorBuilder. The example guards its account page like this:

dart example/lib/router/router_pages.dart 
AdaptiveRouter(
  initialLocation: RouterNames.splash,
  redirect: (context, state) {
    final path = state.uri.path;
    if (path.startsWith(RouterNames.account) &&
        !AppSettingServices.instance.signedIn.value) {
      return '${RouterNames.login}?from=${Uri.encodeComponent(state.uri.toString())}';
    }
    return null;
  },
  errorBuilder: (context, state) => NotFoundPage(uri: state.uri),
  routes: [
    AdaptiveRoute(path: '/', redirect: (_, _) => RouterNames.splash),
    // ...
  ],
)

Guarding exit with onExit

dart 
AdaptiveRoute(
  path: 'edit',
  name: RouterNames.contactEdit,
  onExit: (context, state) async {
    if (!ContactServices.instance.remarkDirty.value) return true;
    final leave = await showDialog<bool>(
      context: context,
      useRootNavigator: AdaptivePaneScope.maybeOf(context) != null,
      builder: (dialogContext) => AlertDialog(/* ... */),
    );
    return leave == true;
  },
  builder: (context, state) => const ContactEditPage(),
)