liquid_glass_hig 0.1.0-beta.3

iOS 26 Liquid Glass UI primitives for Flutter — containers, sheets, nav bars, controls. Pixel-matched to Apple's HIG. Material 3 fallback on Android.

liquid_glass_hig

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

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

---

License

BSD-3-Clause. Copyright © 2026 Jayu Limbani.