liquid_glass_lens_navbar #

A floating Liquid Glass bottom navigation bar for Flutter, modelled on the iOS 26 tab bar.

Light	Liquid lens	Dark

• Frosted, saturated glass floating above your content, with light refraction along its rim.
• The selection lifts into a liquid glass lens while it moves or is dragged — it magnifies and refracts what is behind it, with chromatic fringing (fragment shader on Impeller).
• Drag along the bar to scrub between tabs, with haptic ticks.
• Hides on scroll, or collapses into a circle like iOS 26.
• Clear / Tinted / Solid glass, adjustable opacity, light and dark styles.
• Follows iOS Reduce Transparency, Increase Contrast and Reduce Motion.
• Adaptive quality: steps the effect down automatically on slow GPUs.
• Pure Flutter, no platform views. Tested on iOS and Android.

Install #

flutter pub add liquid_glass_lens_navbar

Requires Flutter 3.35 or newer.

Usage #

Scaffold(
  extendBody: true, // let content scroll under the glass
  body: ...,
  bottomNavigationBar: LiquidGlassNavBar(
    currentIndex: _index,
    onTap: (i) => setState(() => _index = i),
    items: const [
      LiquidGlassNavItem(icon: Icons.article_outlined, selectedIcon: Icons.article, label: 'Today'),
      LiquidGlassNavItem(icon: Icons.rocket_outlined, selectedIcon: Icons.rocket, label: 'Games'),
      LiquidGlassNavItem(icon: Icons.layers_outlined, selectedIcon: Icons.layers, label: 'Apps'),
      LiquidGlassNavItem(icon: Icons.search, label: 'Search'),
    ],
  ),
)

Hide on scroll #

Scrolling down slides the whole bar off screen; scrolling up or reaching the top brings it back. Set minimizeStyle: LiquidGlassMinimizeStyle.circle to instead collapse it into a circle showing the selected tab (iOS 26 tabBarMinimizeBehavior), which expands when tapped.

final _tabBar = LiquidGlassNavBarController(); // dispose() it with the State

Scaffold(
  extendBody: true,
  body: LiquidGlassScrollMinimizer(
    controller: _tabBar,
    child: ListView(...),
  ),
  bottomNavigationBar: LiquidGlassNavBar(
    controller: _tabBar,
    ...
  ),
)

You can also drive it yourself with _tabBar.minimize() / _tabBar.expand().

Transparency & system settings #

LiquidGlassNavBar(
  appearance: LiquidGlassAppearance.tinted, // clear (default) | tinted | solid
  backgroundOpacity: 0.4,                // 0 = see-through … 1 = opaque
  ...
)

With respectSystemSettings: true (default) the bar follows iOS settings live:

iOS 26.1's Display & Brightness › Liquid Glass Clear / Tinted choice has no public API for apps to read, so expose appearance as an in-app setting if you want to offer it.

Options #

LiquidGlassLens is exported too, so you can reuse the refracting glass lens elsewhere.

Performance #

Backdrop blur is the expensive part of glass, and some GPUs (Android emulators, older OpenGL ES devices) render it very slowly. By default quality: LiquidGlassQuality.adaptive measures real raster times while the bar animates and steps down if frames are missed — usually within the first second:

The level never goes back up within a session. Force a level with quality: LiquidGlassQuality.high (or medium / low). LiquidGlassPerformance.instance.level exposes the current adaptive level.

Measured with example/lib/main_perf.dart (16 automatic tab switches, profile mode):

Platforms #

On Android the bar sits above the gesture-navigation handle (iOS lets it overlap the home-indicator area). Android's Remove animations setting maps to the Reduce Motion behaviour.

Example #

cd example && flutter run