Composition topic

Glass with other glass, and glass that moves.

API	What it is
GlassGroup, GlassUnion	Several surfaces drawn as one silhouette, fusing where they meet.
GlassTravel	The region a moving glass travels in: its motion costs no capture.
GlassMorph	Swap the child and the glass flows to its size, as a button becomes its menu.
GlassAbove	Raises the glass below it a level: a bar over glass cards refracts the cards.

Fused glass

GlassGroup(
  spacing: 24, // how near two surfaces have to be to fuse
  child: Stack(
    children: <Widget>[
      Positioned(left: 20, top: 40, width: 120, height: 120, child: const GlassSurface(borderRadius: kGlassCapsule)),
      Positioned(left: 150, top: 60, width: 80, height: 80, child: const GlassSurface(borderRadius: kGlassCapsule)),
    ],
  ),
)

Moving glass for free

Glass that moves over still content would take a capture a frame. Inside a GlassTravel the host captures the whole region once and the glass samples what it already holds:

GlassTravel(
  child: Stack(
    children: <Widget>[
      Positioned(left: at.dx, top: at.dy, width: 120, height: 120,
          child: const GlassSurface(borderRadius: kGlassCapsule)),
    ],
  ),
)

Glass on glass

Glass written inside other glass refracts it automatically. Glass beside it does not: a bar floating over a list of GlassCards sees the page with the cards cut out, until it is wrapped in a GlassAbove.

Classes

GlassAbove

Raises every glass surface below it lift levels above the glass beside it.

GlassBlendGroup

The membership of one blend group.

GlassGroup

Draws every GlassSurface below it as one fused shape.

GlassGroupScope

Carries the group down to the surfaces inside it.

GlassMorph

A piece of glass that flows to the size of whatever child it is given.

GlassMorphMotion

How a GlassMorph moves: a spring, by its perceptual duration and bounce.

GlassTravel

Declares that the glass below may move anywhere inside this widget's box, and asks the host to capture the whole box for it.

GlassTravelRegion

The region the surfaces below may move within, as something they can ask.

GlassTravelScope

Carries the region down to the surfaces inside it. Never notifies: the region's identity is fixed and its geometry is read when asked.

GlassUnion

Draws every GlassSurface below it as one piece of glass, however far apart they are.

RenderGlassAbove

The render object behind GlassAbove: a marker the host reads off the tree, and nothing else — it paints, lays out and hit-tests as its child.

RenderGlassGroup

The render object behind GlassGroup and GlassUnion.

RenderGlassTravel

The box behind GlassTravel. Transparent to layout, paint and hit testing.

Constants

kGlassModalLift → const int

The lift of a modal layer — a menu, a dialog, a sheet: above the page's glass and above bars lifted over it.

kGlassMorphSpacing → const double

The spacing a morph's union is folded at, in logical pixels — the default of GlassMorph.spacing.

kMaxFusedShapes → const int

Shapes one fused draw can carry.

Functions

unionBlendRadius(List<Rect> boxes, List<double> radii) → double

The smallest blend radius that folds boxes into one connected silhouette, in logical pixels — what a GlassUnion hands the shader instead of a declared spacing.