StyledScaffold

A wrapper around Scaffold that gives every main screen consistent structure: a compact custom app bar, unified back-button behavior, and status-bar brightness control. Source: styled_scaffold.dart — which exports four things:

StyledScaffold — the screen shell
StyledAppBar — the compact app bar (usable standalone)
ScaffoldCloseButton — themed circular close button
SystemUiOverlayOverride — status-bar icon brightness for a subtree

StyledScaffold(
  title: Text('Preferences'),
  body: PreferencesList(),
)

Back-button behavior

The scaffold wraps its Scaffold in a PopScope with canPop: false by default: system back gestures and the app-bar back button are intercepted and routed through onLeadingPressed, which defaults to Beamer.of(context).beamToHome(). Set canPop: true for screens stacked over another route (e.g. the session screen over home) so iOS edge-swipe and system back perform a native pop revealing the route beneath.

StyledScaffold API

Parameter	Type	Default	Notes
`body`	`Widget`	required	Main content, wrapped in `SystemUiOverlayOverride`
`title` / `leading` / `trailing`	`Widget?`	—	Passed to `StyledAppBar`
`appBarBottom`	`PreferredSizeWidget?`	—	Banner/controls under the toolbar
`hideAppBar`	`bool`	`false`	Remove the app bar entirely
`hideBackButton`	`bool`	`false`	Suppress the default back button
`showAppBarBottomBorder`	`bool`	`false`	2 px `surfaceElevated` border
`bottomNavigationBar`	`Widget?`	—	e.g. StyledNavigationBar
`floatingActionButton` (+`Location`)	`Widget?`	—	Standard Material FAB slot
`extendBodyBehindAppBar`	`bool`	`false`	Full-bleed behind the app bar
`extendBodyBehindNavigationBar`	`bool`	`false`	Maps to `Scaffold.extendBody`
`resizeToAvoidBottomInset`	`bool`	`true`	Keyboard avoidance
`onLeadingPressed`	`VoidCallback?`	beam home	Back/leading action
`backgroundColor`	`Color?`	theme `surfaceBg`	—
`uiOverlayBrightness`	`Brightness?`	theme brightness	Status-bar icon color
`canPop`	`bool`	`false`	See back-button behavior above

StyledAppBar

A compact toolbar (ashToolbarHeight = 40, vs. Material’s 56) built on NavigationToolbar inside a SafeArea. Title renders in titleMedium / contrastMedium, centered. When onBackButtonPressed is provided and no custom leading, a BackButton appears. Padding knobs: topPadding (default kToolbarHeight - 40), bottomPadding (0), horizontalPadding (16). Implements preferredSize from its paddings + border + appBarBottom.

ScaffoldCloseButton

40×40 IconButton with Icons.close, surfaceElevated background, contrastMedium foreground — the standard dismiss affordance for modal-style screens.

StyledScaffold(
  hideBackButton: true,
  trailing: ScaffoldCloseButton(onPressed: () => Navigator.pop(context)),
  body: …,
)

SystemUiOverlayOverride

Sets status-bar icon brightness via AnnotatedRegion<SystemUiOverlayStyle> — dark icons on light themes, light icons on dark. Pass brightness explicitly when a screen mixes light content with a dark header (or vice versa). Also exported: context.systemUiOverlayStyle for manual use.

Tokens consumed

surfaceBg (via theme), surfaceElevated (border, close button), contrastMedium (title, icons); typography titleMedium.

StyledScaffold depends on the app’s Beamer router for its default back action — it’s the one design-system component with a navigation dependency.

Getting Started

Craft and Foundations

Brand

Design System

For Agents

StyledScaffold

Back-button behavior

StyledScaffold API

StyledAppBar

ScaffoldCloseButton

SystemUiOverlayOverride

Tokens consumed