Theme
Customize the design system

Every control starts at the preset. Change one and every preview on the site follows, on this page and the next, until you reset it.

Contrast

Text against what it sits on. Below 4.5:1 fails WCAG AA for body text — the check a reviewer runs on any surface that takes a tone.

Waiting for the first preview to report its palette.

Corners

Sets all three radii at once. The individual values are under Geometry.

Brand 5

The accent seam an app actually brands itself through. Change these and you have made the decision a real `DesignTokens.graphite(...)` call makes.

Geometry 15

Square or rounded, and how heavy every line is. The radius row above the controls sets all three corners at once, because "what does square feel like" is one decision rather than three numbers.

Surfaces 17

Everything the app is painted ON — the ground behind the content (the frame paints it too), the cards over it, the well inset in a card, and the washes that show state.

Bands 10

The rail's head and the view bar beside it (one band across the top at 960 and wider), a pushed screen's bar, the compact bar and the compact nav bar — the band's fill, its rule, its hover and active faces, the resting field box on it, and the ink and accent control that sit on it. The rail's tree and its footer stay on the ground.

Text and controls 11

The ink ramp, the control outlines and the field's focus halo. Every pair the panel can break is watched by a contrast badge above.

Status 7

The three voices that mean something — danger, caution and ok — each as a foreground and a surface wash, danger with a border as well.

Data 5

The default pin head, its glyph and its halo, and the group bands. A pin's category color comes from the palette, named in the theme seed.

Map 11

The basemap's roles — land, water, parks, roads and their casings, buildings, labels — and the pending pin's gray. A raster basemap keeps its own imagery; these paint the map's plate and any kit-drawn map.

Scrollbars 6

Every scroller's bar: the thumb at rest and while hovered or dragged, the strip it rides, and the desk bar's thickness, side gap and corners. The desk half shows only while a fine pointer is attached; at touch the platform's own overlay keeps its size.

Advanced 6

Real controls that are not decisions — motion durations, the focus ring offset, the touch floor. Opens collapsed on purpose.

Take it with you

The Dart that reproduces what you are looking at. It is a real constructor call, because the configurator edits a real preset — what you copy is what an app can paste.

Wiring

App switcher

Install this once, above every route, where a host offers more than one app: every scaffold beneath it turns its brand into a menu that switches between them, with All apps for the launcher.

1
Classes
2
Knobs

Live

Real widgets, built from the real kit. Turn a knob and it rebuilds; the theme bar above applies the design system's own tokens — including anything you changed under Customize — and the device selector uses the same sizes the golden baselines gate on, so what you see here is what CI holds the widget to.

Press Focus on any preview to take it to the full window — at a desktop width that renders most devices at 1:1, which is when the widget's own controls become clickable. The bar always states the device and the scale, so a shrunk preview says it is shrunk. Esc leaves.

AppScaffoldAppsScope

No live preview — no disposition is recorded for it — that is a gap, not a decision. Its knobs are documented below.

The API

AppScaffoldAppsScope widget

THE APPS SCOPE (`Scaffold.d.ts` THE APP SWITCHER, steady-core #1841): the switcher every AppScaffold under it draws on its brand when its own AppScaffold.apps is absent. Every module draws its own scaffold, so the host that owns the session installs this ONCE, above every module's routes, exactly as…

Full dartdoc

THE APPS SCOPE (`Scaffold.d.ts` THE APP SWITCHER, steady-core #1841): the switcher every AppScaffold under it draws on its brand when its own AppScaffold.apps is absent. Every module draws its own scaffold, so the host that owns the session installs this ONCE, above every module's routes, exactly as it does AppScaffoldAccountScope; a module passes nothing and reads nothing. A module never installs one.

AppScaffoldAppsScopedefault constructor

Knob Type Default What it does
apps * AppScaffoldApps? — The switcher's value, or null while the host has none.
child * dynamic —

Types its knobs take

These are not things you choose — they are the shapes the knobs above expect. They live under this entry rather than in the navigation for exactly that reason.

AppScaffoldApps support

THE APP SWITCHER's value (`Scaffold.d.ts`, steady-core #1841): the apps this person can open, the one this scaffold belongs to, and where choosing goes. The brand draws it only with two or more apps.

Field Type Default What it does
apps * List<AppScaffoldApp> — The openable apps, in the host's order (never recency).
current * String — The id of the app this scaffold belongs to; checked in the menu.
mark AppSwitcherMark AppSwitcherMark.brand What the closed button draws as its mark (AppSwitcherMark): the brand by default, or the current app's glyph.
onAllApps VoidCallback? null The launcher, as the menu's last row ("All apps"); null omits it.
onSelect * ValueChanged<String> — Choosing another app. Never called for current.

Where it lives

Class File
AppScaffoldAppsScope packages/app_widgets/lib/src/kit/surfaces/scaffold.dart