GlassButton class

Glass morphism button with scale animation and glow effects.

This button provides a complete liquid glass experience with:

• Liquid glass visual effect with customizable settings
• Scale animation (squash & stretch) when pressed
• Touch-responsive glow effect on interaction (Impeller) or shader-based glow (Skia)
• Full control over all animation and visual properties
• Accessibility support with semantic labels
• Flexible content support (icon or custom child)

Platform Rendering

The glow effect adapts to the platform:

• Impeller: Uses advanced compositing via GlassGlow
• Skia/Web: Animates shader saturation parameter for frosted glow

Usage Modes

Grouped Mode (default)

Uses LiquidGlass.grouped and inherits settings from parent LiquidGlassLayer:

AdaptiveLiquidGlassLayer(
  settings: LiquidGlassSettings(...),
  child: Column(
    children: [
      GlassButton(
        icon: Icon(CupertinoIcons.heart),
        onTap: () => print('Favorite'),
      ),
    ],
  ),
)

Standalone Mode

Creates its own layer with LiquidGlass.withOwnLayer:

GlassButton(
  icon: Icon(CupertinoIcons.play),
  onTap: () => print('Play'),
  useOwnLayer: true,
  settings: LiquidGlassSettings(
    thickness: 0.3,
    blurRadius: 20,
  ),
)

Customization Examples

Custom stretch behavior:

GlassButton(
  icon: Icon(CupertinoIcons.star),
  onTap: () {},
  interactionScale: 1.1,  // Grow 10% when pressed
  stretch: 0.8,           // More dramatic stretch
  resistance: 0.15,       // Higher drag resistance
)

Custom glow effect:

GlassButton(
  icon: Icon(CupertinoIcons.bolt),
  onTap: () {},
  glowColor: Colors.blue.withOpacity(0.4),
  glowRadius: 1.5,  // Larger glow
)

Custom content:

GlassButton.custom(
  onTap: () {},
  width: 120,
  height: 48,
  child: Text('Click Me', style: TextStyle(color: Colors.white)),
)

Navigation bar / toolbar usage

When multiple buttons share a LiquidGlassBlendGroup (e.g. inside an AdaptiveLiquidGlassLayer), the drag-follow animation physically moves each button's glass shape in the shader's coordinate space. Because the blend group treats all shapes as a connected liquid surface, dragging one button causes neighboring buttons to visually respond — this is intentional for isolated floating buttons, but can feel jarring in a nav bar.

Reduce stretch for tightly-grouped buttons to keep the tactile press feel without excessive cross-button coupling:

// Nav bar / toolbar — subtle liquid feel, minimal coupling
GlassButton(
  stretch: 0.15,
  icon: Icon(CupertinoIcons.home),
  onTap: () {},
)

// Standalone FAB — full liquid feel (default)
GlassButton(
  icon: Icon(CupertinoIcons.add),
  onTap: () {},
)

Setting stretch to 0.0 disables drag-following entirely while keeping the press-scale effect (interactionScale).