GlassSearchBar class

A glass morphism search bar following Apple's iOS 26 design patterns.

GlassSearchBar provides a sophisticated search field with pill shape, animated clear button, and optional cancel button that slides in from the right. It matches iOS's UISearchBar appearance and behavior with glass morphism effects.

Key Features

• Pill-Shaped Glass: Rounded search field with glass effect
• Animated Clear Button: Appears/fades when text is entered
• Cancel Button: Optional slide-in cancel button (iOS pattern)
• Search Icon: Leading search icon with customizable color
• Auto-focus Support: Can auto-focus on appearance
• Dual Mode: Grouped or standalone rendering

Usage

Basic Usage

String query = '';

GlassSearchBar(
  placeholder: 'Search',
  onChanged: (value) {
    setState(() => query = value);
  },
)

With Cancel Button

GlassSearchBar(
  placeholder: 'Search messages',
  showsCancelButton: true,
  onCancel: () {
    // Clear search and dismiss keyboard
  },
)

Within LiquidGlassLayer (Grouped Mode)

AdaptiveLiquidGlassLayer(
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 8,
    refractiveIndex: 1.59,
  ),
  child: Column(
    children: [
      GlassSearchBar(
        placeholder: 'Search',
        onChanged: (value) => _performSearch(value),
      ),
      // Search results...
    ],
  ),
)

Standalone Mode

GlassSearchBar(
  placeholder: 'Search',
  useOwnLayer: true,
  settings: LiquidGlassSettings(
    thickness: 30,
    blur: 8,
  ),
  onChanged: (value) => _performSearch(value),
)

Custom Styling

GlassSearchBar(
  placeholder: 'Search products...',
  searchIconColor: Colors.blue,
  clearIconColor: Colors.blue,
  cancelButtonColor: Colors.blue,
  textStyle: TextStyle(fontSize: 18, color: Colors.white),
  height: 48,
)