XueHua Adaptive Sliding Layout

Getting Started

Introduction

What xue_hua_adaptive_sliding_layout solves, and how one route table becomes one or two columns.

Phone apps push pages full-screen. Desktop and tablet apps show a list and its detail side by side. Building both usually means two navigation systems that drift apart.

xue_hua_adaptive_sliding_layout gives you one route table. A URL becomes a stack of pages, and the window width decides how that stack is shown:

Products
Narrow window (< 840): one column
Products β€Ί Coffee mug
Products
Coffee mug
Wide window (β‰₯ 840): two sliding columns
Same URL /products/1 , same stack [Products, Coffee mug] . Narrow: a normal Navigator shows the top page. Wide: the last two pages sit side by side, with breadcrumbs and a resize handle.

How it works in one line

text 
URL /products/1/reviews
  β†’ match the route table  β†’ stack [products, 1, reviews]
  β†’ window width < 840     β†’ 1 column: Navigator shows "reviews"
  β†’ window width β‰₯ 840     β†’ 2 columns: "1" | "reviews" ("products" slid off to the left)

You navigate with the verbs you already know from Navigator β€” pushNamed, pop, maybePop… β€” called on AdaptiveRouter.of(context). Back buttons, system back, browser back, deep links and refresh all go through the same URL, so the stack is always consistent.

What you will build

The tutorial builds one small shop app, a step at a time. Every step gives you a complete lib/main.dart to paste:

  1. First app: one route, MaterialApp.router.
  2. Nested routes: a product list and /products/:id detail.
  3. Navigation: push, pop, return a result, replace, reset.
  4. Tabs: a Products tab and an Account tab with their own stacks.
  5. Two columns: what happens at 840 px, placeholders, the resize handle.
  6. Titles & breadcrumbs, then redirects, sign-in and onExit.
  7. Finally customizing the UI, reading state and using the layout without the router.

Next: Installation.