App bar

A floating capsule with your page running under it.

LiquidGlassAppBar is a single lens wrapped around leading, title and actions. Place it in a top-aligned Stack child, or in the appBar: slot of a LiquidGlassScaffold.

Dart

LiquidGlassView(
  backgroundWidget: myScrollingPage,   // what the bar refracts
  child: Align(
    alignment: Alignment.topCenter,
    child: LiquidGlassAppBar(
      leading: const Icon(Icons.menu_rounded),
      title: const Text('Library'),
      actions: const [Icon(Icons.search_rounded)],
      width: 356,
    ),
  ),
)

Parameter	Default	What it does
`leading`	`null`	Start slot — a menu or back button.
`title`	`null`	Usually a `Text`; inherits the bar style.
`actions`	`[]`	End slot, laid out in order.
`centerTitle`	`true`	False left-aligns it beside `leading`.
`height` / `width`	`56` / `360`	Height also sets the default corner radius (`height / 2`).
`horizontalPadding` / `actionSpacing`	`14` / `8`	The inset at the ends, and the gap between actions.
`foregroundColor`	`null`	Reaches icons and text through an `IconTheme` and a `DefaultTextStyle`. Left null, it defers — which is what lets adaptivity drive it.
`touch`	`null`	Makes the bar itself answer a press.

Comments

Comments are GitHub Discussions — reply from either place.