ios_liquid_glass 0.8.0

Native iOS 26 Liquid Glass (UIGlassEffect and UITabBarController) for Flutter, with plain no-effect fallbacks on all other platforms.

ios_liquid_glass

Apple's native iOS 26 Liquid Glass for Flutter — real UIGlassEffect surfaces and the real UITabBarController tab bar, no shader emulation.

Platform	Rendering
iOS 26+	Native UIGlassEffect platform view / system UITabBar
Everything else (iOS < 26, Android, web, desktop)	Plain solid surface, identical layout, no effect

There is intentionally no shader or blur imitation: where Apple's material isn't available, widgets render as normal solid surfaces so your UI looks clean and native everywhere.

Install

dependencies:
  ios_liquid_glass: ^0.8.0

Host app requirements

• iOS Info.plist must enable platform views:

  <key>io.flutter.embedded_views_preview</key>
  <true/>
  

• iOS 26+ SDK on the build machine (the app's deployment target can stay lower — native glass simply isn't used below iOS 26).

Usage

A glass card anywhere

import 'package:ios_liquid_glass/ios_liquid_glass.dart';

LiquidGlassContainer(
  borderRadius: 24,
  padding: const EdgeInsets.all(16),
  child: const Text('Hello, glass'),
)

On iOS 26+ this is a real UIGlassEffect; elsewhere a plain solid card. Style it with LiquidGlassStyle:

LiquidGlassContainer(
  style: const LiquidGlassStyle(
    nativeVariant: NativeGlassVariant.clear, // UIGlassEffect style
    nativeTintColor: Colors.black,           // UIGlassEffect tint
    plainColor: Color(0xFF1C1C1E),           // fallback surface color
  ),
  child: ...,
)

Buttons

LiquidGlassButton(
  onPressed: () {},
  child: const Text('Continue'),
)

LiquidGlassIconButton(
  icon: const Icon(Icons.favorite),
  onPressed: () {},
)

Native glass capsules/circles on iOS 26+ with pressed-scale feedback and a disabled state (onPressed: null); plain solid buttons elsewhere. Style them with the same LiquidGlassStyle (clear variant, tints, fallback color).

Bottom navigation

LiquidGlassBottomNav(
  items: const [
    LiquidGlassNavItem(label: 'Home', icon: Icon(Icons.home_outlined), activeIcon: Icon(Icons.home)),
    LiquidGlassNavItem(label: 'Search', icon: Icon(Icons.search)),
    LiquidGlassNavItem(label: 'Profile', icon: Icon(Icons.person_outline), activeIcon: Icon(Icons.person)),
  ],
  currentIndex: currentIndex,
  onIndexChanged: (index) => setState(() => currentIndex = index),
)

Native glass bar on iOS 26+, plain solid bar elsewhere. Force a tier for screenshots/tests with forceTier: GlassTier.plain (or .native).

Capability detection

if (LiquidGlassPlatform.supportsNativeGlass) { ... } // iOS 26+

The real system tab bar (advanced)

LiquidGlassNativeTabShell overlays Apple's actual UITabBarController (iOS 26+) — true system Liquid Glass with all its behaviors:

// main(), once:
await LiquidGlassNativeTabShell.instance.initialize();

// Scaffold:
bottomNavigationBar: LiquidGlassPlatform.supportsNativeTabShell
    ? null
    : LiquidGlassBottomNav(...),

// After your authenticated home shell mounts:
await LiquidGlassNativeTabShell.instance.ensureInstalled(
  const [
    LiquidGlassNativeTab(title: 'Home', systemImage: 'house', selectedSystemImage: 'house.fill'),
    LiquidGlassNativeTab(title: 'Profile', systemImage: 'person.circle', selectedSystemImage: 'person.circle.fill'),
  ],
  theme: const LiquidGlassTheme(labelFontFamily: 'YourFont'),
);
LiquidGlassNativeTabShell.instance.onTabSelected = (index) { ... };

// On logout:
await LiquidGlassNativeTabShell.instance.uninstallShell();

Flutter stays the window root throughout — login/splash screens are unaffected. Also included:

• Custom icons — per-tab PNG bytes (iconPngBytes) or SF Symbol names.
• Live restyle — configureTabs(tabs, theme: ...) updates titles, icons, colors, fonts, and bar geometry on the installed shell.
• Route sync — LiquidGlassTabRoutePolicy + syncVisibilityForRoute / router-agnostic attachRouteListener (two lines with go_router).
• Modals — presentModalBottomSheet hides the bar for a sheet's lifetime (hideForModal/showAfterModal are reference-counted).
• FAB & insets — LiquidGlassNativeTabShellFabLocation, theme.nativeShellBottomInset(context), theme.contentBottomInset(context).
• Selection control — setSelectedIndex, clearSelectedIndex.

Known limitations

• The UIGlassEffect platform view is decorative: it samples the layer beneath the Flutter view and does not refract Flutter-drawn pixels. For a bar with Apple's full behavior, use the native tab shell.
• Native glass and the tab shell are iOS 26+ only; every other platform deliberately renders plain surfaces.
• Custom native-tab icons must be pre-rasterized PNG bytes — the package has no SVG dependency.
• The iOS Simulator renders Liquid Glass with exaggerated artifacts; judge visuals on a real device.

Example

example/lib/main.dart — glass buttons in different styles over colorful content, with Apple's real tab bar (including a badge) on iOS 26+.