liquid_glass_bridge

A cross-platform Flutter package that gives you one API for liquid-glass UI.

  • iOS: native Swift/UIKit renderer (UIVisualEffectView) for system-like frosted material.
  • Android/Web/Desktop: Flutter renderer (BackdropFilter + tint + border + highlight + optional noise).
  • Lens mode: shader overlay with automatic fallback.

Install

flutter pub add liquid_glass_bridge

Included Widgets

  • LiquidGlassSurface
  • LiquidGlassButton
  • LiquidGlassNavigationBar
  • LiquidGlassBottomNavigationBar

Modes and Quality

LiquidGlassMode

  • auto: iOS -> native UIKit, Android -> native blur view, others -> Flutter glass
  • iosNative: iOS native, others fallback to Flutter glass
  • androidNative: Android native blur, others fallback to Flutter glass
  • flutterGlass: force Flutter glass everywhere
  • flutterLens: force lens shader (falls back to glass when unavailable)

LiquidGlassQuality

  • low: better performance
  • medium: balanced (default)
  • high: stronger effect, higher cost

Main Surface API

LiquidGlassSurface parameters:

  • child
  • borderRadius
  • padding, margin
  • elevation
  • tintColor, tintOpacity
  • blurSigma
  • borderColor, borderWidth
  • highlightStrength
  • noiseOpacity
  • iosBlurStyle
  • style, platformStyle
  • mode
  • quality
  • enabled
  • debugLabel

Usage

Surface

LiquidGlassSurface(
  mode: LiquidGlassMode.auto,
  quality: LiquidGlassQuality.medium,
  borderRadius: BorderRadius.circular(24),
  blurSigma: 18,
  noiseOpacity: 0.05,
  child: const Text('Liquid glass'),
)

Styles and Presets

Use LiquidGlassStyle for reusable visual settings. When style or platformStyle is provided, those values override the per-parameter defaults.

final LiquidGlassStyle style = LiquidGlassPresets.frosted;

LiquidGlassSurface(
  style: style,
  child: const Text('Reusable style'),
)

Theming

You can set app-wide defaults with LiquidGlassTheme. When a theme is present, widgets will prefer its style/platformStyle and default mode/quality. Per-widget overrides should use style or platformStyle.

LiquidGlassTheme(
  data: LiquidGlassThemeData(
    style: LiquidGlassPresets.frosted,
    mode: LiquidGlassMode.auto,
    quality: LiquidGlassQuality.medium,
  ),
  child: MaterialApp(
    home: const ExampleScreen(),
  ),
)

Platform-specific overrides:

final LiquidGlassPlatformStyle platformStyle = LiquidGlassPlatformStyle(
  fallback: LiquidGlassPresets.frosted,
  ios: LiquidGlassPresets.thin.copyWith(
    iosBlurStyle: LiquidGlassIosBlurStyle.systemThinMaterial,
  ),
  android: LiquidGlassPresets.dense.copyWith(blurSigma: 22),
);

LiquidGlassSurface(
  platformStyle: platformStyle,
  child: const Text('Per-platform glass'),
)

Button + Navigation

Scaffold(
  appBar: const LiquidGlassNavigationBar(
    title: Text('Home'),
  ),
  bottomNavigationBar: LiquidGlassBottomNavigationBar(
    items: const <LiquidGlassNavItem>[
      LiquidGlassNavItem(icon: Icons.home_outlined, label: 'Home'),
      LiquidGlassNavItem(icon: Icons.search_outlined, label: 'Search'),
    ],
    currentIndex: 0,
    onTap: (int index) {},
  ),
  body: Center(
    child: LiquidGlassButton(
      onPressed: () {},
      child: const Text('Continue'),
    ),
  ),
)

iOS Native Rendering Notes

On iOS, auto and iosNative use a platform view backed by Swift/UIKit:

  • native blur material (UIVisualEffectView)
  • native tint/border/highlight composition
  • Flutter child content remains in Dart above the native layer
  • blurSigma is ignored for native iOS; use iosBlurStyle instead

On Android, auto and androidNative use a platform view backed by a native blur view. If you need to force the Flutter renderer, set mode to flutterGlass.

Note: Android native blur uses the BlurView library under the hood.

Performance Tips (Android/Flutter renderer)

  • Keep blurSigma moderate (12-18 is a good start).
  • Use LiquidGlassQuality.low for long scrolling lists.
  • Keep noiseOpacity subtle (0.02-0.06).
  • Avoid many overlapping large blurred surfaces.

Example App

Run from package root:

flutter run -d <device> -t example/lib/main.dart

or from example/:

flutter run

License

MIT

Libraries

liquid_glass_bridge