Scaffold

The page that captures itself.

LiquidGlassScaffold is the pipeline with the slots already wired. It captures its own body and hands that to everything floating over it, so bars and lenses refract your page on both engines — including the web, where nothing else can.

Dart

LiquidGlassScaffold(
  body: IndexedStack(
    index: index,
    children: const [HomeTab(), BrowseTab(), SavedTab(), YouTab()],
  ),
  appBar: const LiquidGlassAppBar(title: Text('Library')),
  bottomNavigationBar: LiquidGlassTabBar(
    items: items,
    selectedIndex: index,
    onChanged: (i) => setState(() => index = i),
  ),
)

Slot / knob	What goes in it
`body`	Your page. This is what gets captured and refracted.
`appBar`	A `LiquidGlassAppBar`, floated over the body.
`bottomNavigationBar`	The bar, floated over the bottom.
`bottomNavigationBarAction`	A trailing action beside the bar — a compose or record button.
`floatingActionButton`	A `LiquidGlassFab`, placed by `floatingActionButtonAlignment` and kept clear of the bottom bar by `floatingActionButtonClearance`.
`dialog`	A dialog shown as part of the scaffold rather than as a route — with its own barrier colour, dismiss callback and transition.
`lenses`	Free-floating lenses positioned over the body.
`adaptivity`	Drives every piece of chrome from one background verdict — see Adaptivity.
`batch`	`true` by default: the chrome shares one backdrop read — see Batch. A sheet or dialog presented from inside joins it only with `batch: true` on its own call.
`realTimeCapture`, `pixelRatio`, `useSync`, `refreshRate`	The same capture knobs a `LiquidGlassView` takes, for the same reasons.

Comments

Comments are GitHub Discussions — reply from either place.