ios_liquid_glass 0.9.6

Native iOS 26 Liquid Glass (UIGlassEffect and UITabBarController) for Flutter, plus an Impeller liquid-lens tier for iridescent droplet navigation.

ios_liquid_glass

Apple's native iOS 26 Liquid Glass for Flutter — real UIGlassEffect surfaces and the real UITabBarController tab bar — plus an Impeller liquid lens tier for the iridescent droplet bottom nav that refracts Flutter content (rainbow rim, jelly morph).

Tier	When	Rendering
liquid	LiquidGlassBottomNav.liquid / preferLiquid: true	Impeller live-backdrop droplet (needs Impeller)
native	iOS 26+ default	Native UIGlassEffect platform view / system UITabBar
plain	everything else	Solid surface, identical layout

Important: Native UIGlassEffect is decorative — it samples layers beneath the Flutter view and does not refract Flutter pixels. For the floating rainbow droplet over your icons/page, use the liquid tier and stack the bar over content.

Install

dependencies:
  ios_liquid_glass:
    path: /path/to/flutter_liquid_glass   # or ^0.9.0 from pub

Host app requirements

• iOS Info.plist — enable platform views (native tier) and Impeller (liquid tier):

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

• iOS 26+ SDK on the build machine for native glass (deployment target can stay lower).
• Full restart after enabling Impeller (hot reload is not enough).

Usage

Drop-in tab host (recommended)

import 'package:ios_liquid_glass/ios_liquid_glass.dart';

LiquidGlassTabScaffold(
  currentIndex: index,
  onIndexChanged: (i) => setState(() => index = i),
  shouldHideOverlay: () => isPinOpen, // optional
  overlayListenable: router,          // optional
  destinations: [
    LiquidGlassTabDestination(
      title: 'Home',
      systemImage: 'house',
      selectedSystemImage: 'house.fill',
      icon: const Icon(Icons.home_outlined),
      selectedIcon: const Icon(Icons.home),
      page: const HomePage(),
    ),
    LiquidGlassTabDestination(
      title: 'Search',
      systemImage: 'magnifyingglass',
      icon: const Icon(Icons.search),
      page: const SearchPage(),
    ),
  ],
)

Use .shell when you already own the page stack:

LiquidGlassTabScaffold.shell(
  currentIndex: index,
  onIndexChanged: onIndexChanged,
  themeBuilder: (context) => LiquidGlassTheme.adaptive(context),
  overlayListenable: router,
  // Optional same-frame hide for known overlays (PIN/blur):
  // shouldHideOverlay: () => isPinOpen || isBlurOpen,
  nativeTabs: [...],
  fallbackItems: [...],
  child: yourBody,
)

Register the package observer so hide/show runs after the navigator applies the new stack:

router.delegate(
  navigatorObservers: () => [LiquidGlassNavigatorObserver.instance],
)

The scaffold hides the native bar when its host route is covered. Pass your router as overlayListenable (and optionally shouldHideOverlay for stack-based flags that update in the same frame).

Scroll views should use MediaQuery.paddingOf(context).bottom (applied automatically when applyContentInset: true).

Liquid droplet bottom nav (matches the morphing lens look)

import 'package:ios_liquid_glass/ios_liquid_glass.dart';

Scaffold(
  body: Stack(
    fit: StackFit.expand,
    children: [
      Padding(
        padding: EdgeInsets.only(
          bottom: LiquidGlassBottomNav.contentBottomClearance(context),
        ),
        child: yourPage,
      ),
      LiquidGlassBottomNav.liquid(
        currentIndex: index,
        onIndexChanged: (i) => setState(() => index = i),
        items: [
          LiquidGlassNavItem.custom(
            iconBuilder: (context, g) => SvgPicture.asset(
              g.selected ? 'assets/home_fill.svg' : 'assets/home.svg',
              width: g.size,
              height: g.size,
              colorFilter: ColorFilter.mode(g.color, BlendMode.srcIn),
            ),
          ),
          // ...
        ],
      ),
    ],
  ),
);

Tune the rainbow rim with chromaticAberration (default 0.035).

Native glass card / buttons (iOS 26+)

LiquidGlassContainer(
  borderRadius: 24,
  style: const LiquidGlassStyle(
    nativeVariant: NativeGlassVariant.clear,
  ),
  child: const Text('Hello, glass'),
)

Capability detection

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

The real system tab bar (advanced)

LiquidGlassNativeTabShell overlays Apple's actual UITabBarController (iOS 26+) — see previous docs / example for install, badges, route sync, and modals.

Known limitations

• Native UIGlassEffect does not refract Flutter-drawn pixels.
• Liquid tier needs Impeller; on Skia/Web it falls back to a frosted bar.
• Custom native-tab icons must be pre-rasterized PNG bytes.
• The iOS Simulator exaggerates native Liquid Glass artifacts; judge native visuals on a device. Liquid Impeller refraction is fine on sim.

Example

example/lib/main.dart — glass buttons, native tab shell on iOS 26+, and Flutter fallback bars.