MaskingQuality enum

A glass morphism bottom navigation bar following Apple's design patterns.

GlassBottomBar provides a sophisticated bottom navigation bar with draggable indicator, jelly physics, rubber band resistance, and seamless glass blending. It supports iOS-style drag-to-switch tabs with velocity-based snapping and organic squash/stretch animations.

Key Features

  • Draggable Indicator: Swipe between tabs with smooth spring animations
  • Velocity-Based Snapping: Flick quickly to jump multiple tabs
  • Rubber Band Resistance: iOS-style overdrag behavior at edges
  • Jelly Physics: Organic squash and stretch effects during movement
  • Per-Tab Glow Effects: Customizable glow colors for each tab
  • Icon Thickness Effect: Optional shadow halo around unselected icons
  • Seamless Glass Blending: Uses LiquidGlassBlendGroup for smooth transitions

Usage

Basic Usage

AdaptiveLiquidGlassLayer(
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 3,
    refractiveIndex: 1.59,
  ),
  child: Scaffold(
    body: _pages[_selectedIndex],
    bottomNavigationBar: GlassBottomBar(
      tabs: [
        GlassBottomBarTab(
          label: 'Home',
          icon: Icon(CupertinoIcons.home),
          activeIcon: Icon(CupertinoIcons.home_fill),
          glowColor: Colors.blue,
        ),
        GlassBottomBarTab(
          label: 'Search',
          icon: Icon(CupertinoIcons.search),
          glowColor: Colors.purple,
        ),
        GlassBottomBarTab(
          label: 'Profile',
          icon: Icon(CupertinoIcons.person),
          activeIcon: Icon(CupertinoIcons.person_fill),
          glowColor: Colors.pink,
        ),
      ],
      selectedIndex: _selectedIndex,
      onTabSelected: (index) => setState(() => _selectedIndex = index),
    ),
  ),
)

With Extra Button

GlassBottomBar(
  tabs: [...],
  selectedIndex: _selectedIndex,
  onTabSelected: (index) => setState(() => _selectedIndex = index),
  extraButton: GlassBottomBarExtraButton(
    icon: CupertinoIcons.add,
    label: 'Create',
    onTap: () => _showCreateDialog(),
    size: 64,
  ),
)

Custom Styling

GlassBottomBar(
  tabs: [...],
  selectedIndex: _selectedIndex,
  onTabSelected: (index) => setState(() => _selectedIndex = index),
  barHeight: 72,
  spacing: 12,
  horizontalPadding: 24,
  selectedIconColor: Colors.white,
  unselectedIconColor: Colors.white.withOpacity(0.6),
  iconSize: 28,
  textStyle: TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
  glassSettings: LiquidGlassSettings(
    thickness: 40,
    blur: 5,
    refractiveIndex: 1.7,
  ),
)

Without Draggable Indicator

GlassBottomBar(
  tabs: [...],
  selectedIndex: _selectedIndex,
  onTabSelected: (index) => setState(() => _selectedIndex = index),
  showIndicator: false,
)

Rendering quality for the liquid glass masking effect in GlassBottomBar.

Controls the complexity of the masking effect that creates the "magic lens" appearance where selected tab content appears to glow through the glass indicator.

Inheritance
Available extensions

Values

off → const MaskingQuality

No masking effect, simple icon color change (fastest).

Uses the traditional approach where tabs simply change color when selected. No dual-layer rendering or clipping. Best performance, but less visual polish.

Recommended for:

  • Apps targeting older devices (iPhone X or older)
  • Maximum performance requirements
  • 7+ tabs
high → const MaskingQuality

Full jelly physics clip path with dual-layer rendering (best quality, default).

Creates a "magic lens" effect where selected tabs appear to glow through the glass indicator as it moves. Content is magnified and the clip path follows the jelly physics for perfect synchronization.

Recommended for:

  • Modern devices (iPhone 12+, Pixel 5+)
  • 3-5 tabs (typical use case)
  • Premium/polished apps
  • When visual quality is a priority

Performance: Renders tabs twice with ClipPath operations. Maintains 60fps on modern devices with typical 3-5 tab configurations.

Properties

hashCode → int
The hash code for this object.
no setterinherited
index → int
A numeric identifier for the enumerated value.
no setterinherited
name → String

Available on Enum, provided by the EnumName extension

The name of the enum value.
no setter
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Constants

values → const List<MaskingQuality>
A constant List of the values in this enum, in order of their declaration.