XueHua Adaptive Sliding Layout

Reference

Example App Walkthrough

How the bundled example app is organised, in the order worth reading it.

The example/ app is the integration template: everything from the tutorial, at full size. On the live demo the top bar pins phone / foldable / tablet / desktop widths, so you can see every breakpoint without resizing the window.

Run it

bash 
cd example
flutter run -d chrome
flutter test

Reading order

  1. lib/main.dart β€” MaterialApp.router(routerConfig: RouterPages.router) plus the width-preset wrapper (pages/size_preset_screen.dart).
  2. lib/router/router_names.dart β€” every path and route name as a constant.
  3. lib/router/router_pages.dart β€” the complete route table: top-level redirect, auth routes outside the shell, the AdaptiveShellRoute with its custom handle, breadcrumbs and card panes, and the branches.
  4. lib/shell/app_shell.dart β€” AdaptiveShellChrome + NavigationBar vs NavigationRail, re-tapping a tab, and PopScope exit confirmation.
  5. lib/pages/… β€” the screens, one folder per area (table below). lib/services/ holds the signals they share.

Areas

AreaWhat it showsTutorial stepFiles
Auth Full-screen splash / login / register; redirect to /login?from= for the account page Redirects pages/auth/
Home Product list β†’ /home/:id with a title from the id; translucent full-screen image preview via transitionsBuilder Nested routes, Customizing pages/home/
Shopping cart A separate branch with its own stack Tabs pages/shopping_cart/
Contacts List β†’ /contacts/:id β†’ edit ; onExit dialog with useRootNavigator chosen via AdaptivePaneScope onExit pages/contacts/
Mine Nested theme / account pages; about as a fullscreenDialog Customizing pages/mine/
Shell Bar vs rail, goBranch(i, initialLocation: true) , PopScope exit confirmation Tabs shell/app_shell.dart

Things to try in the demo

  • Desktop preset β†’ Contacts β†’ a contact β†’ edit: three levels, two columns, breadcrumbs.
  • Type in the remark, press Escape: the onExit dialog.
  • Mine β†’ account while signed out: redirected to login, then returned.
  • Switch between the phone and desktop presets with a detail page open.