Motion

The moving-glass model under the thumb and the pill, on its own.

LiquidGlassMotionPill deforms from how its centre moves, not from where it is. Throw it across and the pill stretches along the travel and pinches across it, then recoils past rest and settles. Hold it still at any position and the pill is exactly its declared size again.

This is the same model inside the slider's thumb and the tab bar's glass pill, and all three take the same tuning value — a LiquidGlassLensMotionSpec.

Two things happen at once#

The morph. Grab it and the pill spring-grows from restSize to activeSize, with the solid cover fading out as the glass arrives; let go and it contracts on a softer spring. The glass is a state change, not decoration that was always there.

The deformation. While it is lifted, the centre is sampled every frame and the averaged acceleration scales the two axes oppositely. That part is motion.

Dart

LiquidGlassMotionPill(
  center: Offset(edge + travel * fraction, box.height / 2),
  active: dragging,       // lifted: expanded, and tracking itself
  restSize: const Size(76, 44),
  activeSize: const Size(112, 62),
  motion: const LiquidGlassLensMotionSpec(),
  cover: myRestPill,      // fades out as the glass comes up
)

Parameter	Default	What it does
`center`	—	The pill’s centre, in local coordinates. Drive it however the host moves — a drag, a glide spring, anything.
`active`	—	Lifted or not. Flip it on grab and off when it should contract.
`restSize` / `activeSize`	—	The two sizes it morphs between.
`cover`	`null`	Drawn over the glass at rest and faded out as the morph expands — the slider passes its solid white pill here. Clipped to the pill’s own outline, so pass a plain fill.
`style`	`null`	Glass look; `null` keeps the tuned default.
`motion`	`LiquidGlassLensMotionSpec()`	The tuning, below.
`shadow`	`null`	Contact shadow. Normally left null — it travels with the rest of the look, in `style.appearance.shadow`.

LiquidGlassLensMotionSpec#

The shared tuning. The slider takes one as motion:, and so does the tab bar’s pillStyle.motion.

Field	Default	What it does
`sampleWindow`	`0.3`	Seconds of recent motion averaged to read the force. Bigger is calmer, smaller is twitchier.
`sensitivity`	`0.00007`	Gain from acceleration to scale deviation — how strongly a given force deforms the body.
`maxDeformation`	`0.3`	The ceiling on how far the two scales may stray from `1`. `0` turns the deformation off and leaves the plain morph.
`responseTime`	`0.18`	Seconds to ease toward the acceleration’s answer instead of snapping to it. `0` is the frame-locked response.

Comments

Comments are GitHub Discussions — reply from either place.