GlassContainer class

A foundational glass container widget following Apple's liquid glass design.

This is the base primitive for all container-based glass widgets. It provides a simple glass surface with configurable dimensions, padding, and shape.

Usage Modes

Grouped Mode (default)

Uses LiquidGlass.grouped and inherits settings from parent LiquidGlassLayer:

AdaptiveLiquidGlassLayer(
  settings: LiquidGlassSettings(...),
  child: Column(
    children: [
      GlassContainer(
        child: Text('Hello'),
      ),
      GlassContainer(
        child: Text('World'),
      ),
    ],
  ),
)

Standalone Mode

Creates its own layer with LiquidGlass.withOwnLayer:

GlassContainer(
  useOwnLayer: true,
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 10,
  ),
  child: Text('Standalone'),
)

Customization Examples

Custom padding and shape:

GlassContainer(
  padding: EdgeInsets.all(20),
  shape: LiquidRoundedSuperellipse(borderRadius: 16),
  child: Text('Padded content'),
)

With constraints:

GlassContainer(
  width: 200,
  height: 100,
  child: Center(child: Text('Fixed size')),
)

With clipping:

GlassContainer(
  clipBehavior: Clip.antiAlias,
  child: Image.network('...'),
)

Card preset: GlassContainer.card

GlassContainer.card is the card preset (16px padding, 12px superellipse corners for GlassSurfaceStyle.glass). It is the replacement for the deprecated GlassCard, and adds a surfaceStyle:

// Native iOS inset-grouped card: flat, opaque, no blur / rim / shadow.
GlassContainer.card(
  surfaceStyle: GlassSurfaceStyle.solid,
  child: Text('Hello'),
)

iOS renders inset-grouped list cards as flat opaque surfaces, so use GlassSurfaceStyle.solid for cards inside lists and reserve glass for chrome that floats above content.

⚠️ Anti-Pattern: Do Not Place Glass Controls Inside a GlassContainer

GlassContainer is a foundational surface, not a generic wrapper. Placing interactive glass controls inside it causes two problems:

1. Visual degradation — GlassContainer sets InheritedLiquidGlass.avoidsRefraction to true for its entire child subtree. Any GlassEffect descendant falls back to a non-refracting path — the inner glass effect is degraded by design.

2. Jelly-physics clipping — With useOwnLayer = true on Impeller, the container routes through LiquidGlass.withOwnLayer which applies its own internal shape clip. Interactive indicator widgets overshoot their bounds during spring animations — that overshoot gets cut.

Interactive glass controls already manage their own surface appearance via backgroundColor and indicatorColor — no outer container is needed.

// ✅ Correct — control manages its own surface
GlassSegmentedControl(
  segments: [...],
  selectedIndex: _index,
  onSegmentSelected: (i) => setState(() => _index = i),
)

// ❌ Anti-pattern — degrades refraction, clips jelly animation
GlassContainer(
  child: GlassSegmentedControl(...),
)