Scroll edge

A fading band that keeps floating chrome legible.

The other half of the legibility problem. Adaptivity changes the glass; the scroll edge changes what is under it — a band pinned over the edge of a scrollable, fully opaque where it meets the edge and dissolving to nothing toward the content. It is the dimming variant of iOS 26's scroll edge effect.

Dart

Stack(
  children: [
    myScrollingList,
    Align(
      alignment: Alignment.bottomCenter,
      child: LiquidGlassScrollEdge(
        edge: LiquidGlassEdge.bottom,
        height: 120,
      ),
    ),
    myFloatingTabBar,
  ],
)

Parameter	Default	What it does
`edge`	`bottom`	Which screen edge the band hugs.
`height`	`null`	Band height. Unset, it takes the box it is given.
`color`	`0x8A000000`	The tint, in static mode.
`blur`	`5`	Backdrop blur under the band — exactly one `BackdropFilter` at any sigma. `0` removes it from the tree entirely.
`style`	`soft`	`soft` feathers the blur out so it meets sharp content without a seam. `hard` ends it on a line. Neither costs more than the other.
`curve` / `blurCurve`	`easeInOut` / —	The falloff shapes of the tint and of the blur.
`adaptivity`	`null`	Set it and the band tints itself from the background, on the view's shared sampler — no extra captures.
`child`	`null`	Content pinned inside the band — a title, a row of actions.

Comments

Comments are GitHub Discussions — reply from either place.