liquid_glass_hig

iOS 26 Liquid Glass UI primitives for Flutter. Pixel-matched to Apple's HIG. Material 3 fallback on Android.

liquid_glass_hig components demo — iOS 26 Liquid Glass UI primitives in Flutter

LiquidGlass(
  borderRadius: BorderRadius.circular(20),
  padding: const EdgeInsets.all(16),
  child: const Text('Glass surface'),
)

Drop a LiquidGlass over any background and the HIG-spec blur, tint, and edge highlight apply automatically. Light / dark adaptation is handled by LiquidGlassConfig.adaptToBrightness which the theme calls for you.

Install

dependencies:
  liquid_glass: ^0.1.0

flutter pub get

30-second usage

import 'package:flutter/material.dart';
import 'package:liquid_glass/liquid_glass.dart';

class Demo extends StatelessWidget {
  const Demo({super.key});

  @override
  Widget build(BuildContext context) {
    return LiquidGlassThemeScope(
      theme: LiquidGlassTheme.fromColorScheme(
        Theme.of(context).colorScheme,
        preset: LiquidGlassPreset.frosted,
      ),
      child: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: const GlassNavigationBar(title: 'Settings'),
        body: ListView(children: const [
          GlassSection(
            title: 'general',
            rows: [
              GlassSectionRow(title: 'About'),
              GlassSectionRow(title: 'Wi-Fi', trailing: Text('Home')),
            ],
          ),
        ]),
      ),
    );
  }
}

What you get

Category	Widgets
Core primitive	`LiquidGlass`, `LiquidGlassConfig`
Containers	`GlassCard`, `GlassContainer`, `GlassPanel`, `GlassSection` (+ `GlassSectionRow`)
Sheets & modals	`showGlassBottomSheet`, `showGlassDialog`, `showGlassActionSheet`, `showGlassPopover`
Navigation	`GlassNavigationBar`, `GlassScrollAwareNavigationBar`, `GlassTabBar`, `GlassToolbar`, `GlassSegmentedControl<T>`
Controls	`GlassButton`, `GlassToggle`, `GlassChip`, `GlassSearchBar`
Theme	`LiquidGlassTheme` + 3 presets, `LiquidGlassThemeScope`
Fallback	`LiquidGlassFallback.override`, automatic M3 swap on Android

Three presets

LiquidGlassPreset.clear    // σ=12, low tint — hero overlays
LiquidGlassPreset.frosted  // σ=18, balanced — use this by default
LiquidGlassPreset.vibrant  // σ=28, high saturation — modal sheets

Switch the active preset by rebuilding LiquidGlassThemeScope with a new theme; every descendant glass surface updates in place.

The scroll trick

A GlassScrollAwareNavigationBar thickens its blur as a bound ScrollController advances past a threshold. The same gesture Apple uses across iOS to make the bar feel attached to the content underneath.

final scroll = ScrollController();

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: GlassScrollAwareNavigationBar(
    scrollController: scroll,
    title: 'Notes',
  ),
  body: ListView.builder(controller: scroll, /* ... */),
)

Material 3 fallback

iOS + macOS render real glass surfaces. Android, web, and desktop auto-fall back to Material 3 equivalents (Card, FilledButton, Switch, NavigationBar) so the same widget tree looks native on every platform.

Force fallback on / off for testing:

LiquidGlassFallback.override = true; // pretend we're on Android

Example

Full iOS 26 Settings + Music + component-showcase replica:

cd example
flutter run -d "iPhone 17 Pro"

Quality

33 unit + widget tests, all green
flutter analyze strict-mode clean
Zero runtime dependencies — flutter SDK only
RepaintBoundary on every glass surface