native_liquid_glass_navbar #

A high-performance, zero-dependency Flutter plugin that brings the authentic iOS Liquid Glass navigation bar to Flutter apps with full support for custom Flutter widgets (SVGs, Images, Badges), Flutter IconData, and Apple SF Symbols.

This package renders the native iOS UITabBar on iOS devices to provide authentic Apple Liquid Glass blur, haptics, and fluidity, while automatically providing a beautiful frosted-glass navbar on non-iOS platforms (Android, Web, Desktop).

📱 Visual Showcase & Themes #

☀️ iOS Light Theme	🌙 iOS Dark Theme	🚀 Cross-Platform Fallback

Authentic iOS Light Blur • Crisp Custom Widgets & Icons • Dynamic Live Mesh Underlay • Floating Quick Action Button	Deep Liquid Dark Blur • Custom Accent & Tinting • High-contrast Retina Icons • Native iOS `UITabBar` Fluidity	Glassmorphism for All Platforms • Android, Web & Desktop Ready • Smooth Animated Sliding Pill • Frosted Backdrop Blur (Sigma 25)

🚀 Key Features #

🧩 Any Flutter Widget (iconWidget): Pass any widget directly — SvgPicture.asset(...), Image.asset(...), custom badge, animated container, etc.
📦 Zero External Dependencies: Pure Flutter SDK implementation. Bring your own packages without version conflicts.
🔣 Flutter IconData: Seamless support for Material and Cupertino icons (icon: Icons.home).
🍏 Apple SF Symbols: Built-in support for native iOS SF Symbols (symbol: 'house.fill').
🔘 Floating Action Button: Add a circular action button to the right of the tabs for central app actions (e.g. Create, Add, Camera).
📱 Cross-Platform Fallback: Automatically renders a floating frosted-glass navbar on Android, Web, macOS, Linux, and Windows.
💎 Authentic Liquid Glass Blur: Genuine native iOS materials and blur styling with zero frame drops.

📦 Installation #

Add native_liquid_glass_navbar to your pubspec.yaml:

dependencies:
  native_liquid_glass_navbar: ^1.1.1

Run:

flutter pub get

💡 Quick Start #

1. Using Custom Widgets (e.g., SVGs / Images) #

Pass your custom widget directly via iconWidget:

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:native_liquid_glass_navbar/native_liquid_glass_navbar.dart';

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  tintColor: Colors.blueAccent,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton.widget(
    iconWidget: SvgPicture.asset('assets/icons/plus.svg', width: 20, height: 20),
    symbol: 'plus',
    onTap: () => print('Action tapped!'),
  ),
  tabs: [
    NativeLiquidGlassNavBarItem.widget(
      label: 'Home',
      iconWidget: SvgPicture.asset('assets/icons/home.svg', width: 24, height: 24),
      symbol: 'house.fill',
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Search',
      iconWidget: SvgPicture.asset('assets/icons/search.svg', width: 24, height: 24),
      symbol: 'magnifyingglass',
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Saved',
      iconWidget: SvgPicture.asset('assets/icons/heart.svg', width: 24, height: 24),
      symbol: 'heart.fill',
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Settings',
      iconWidget: SvgPicture.asset('assets/icons/settings.svg', width: 24, height: 24),
      symbol: 'gearshape.fill',
    ),
  ],
)

2. Using Flutter `IconData` or SF Symbols #

You can also use standard Flutter icons or Apple SF Symbols:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tabs: const [
    NativeLiquidGlassNavBarItem.icon(
      label: 'Home',
      icon: Icons.home_rounded,
      symbol: 'house.fill',
    ),
    NativeLiquidGlassNavBarItem.icon(
      label: 'Search',
      icon: Icons.search_rounded,
      symbol: 'magnifyingglass',
    ),
    NativeLiquidGlassNavBarItem.icon(
      label: 'Saved',
      icon: Icons.favorite_rounded,
      symbol: 'heart.fill',
    ),
    NativeLiquidGlassNavBarItem.icon(
      label: 'Settings',
      icon: Icons.settings_rounded,
      symbol: 'gearshape.fill',
    ),
  ],
)

🎨 Customizing Active & Inactive States #

You can supply an optional selectedIconWidget to show a different widget when a tab is selected:

NativeLiquidGlassNavBarItem(
  label: 'Home',
  iconWidget: SvgPicture.asset(
    'assets/icons/home.svg',
    colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
  ),
  selectedIconWidget: SvgPicture.asset(
    'assets/icons/home.svg',
    colorFilter: const ColorFilter.mode(Colors.blueAccent, BlendMode.srcIn),
  ),
  symbol: 'house.fill',
)

🌐 Cross-Platform Fallback #

When running on non-iOS platforms (Android, Web, Desktop), native_liquid_glass_navbar automatically renders a floating frosted-glass navbar with:

ImageFilter.blur (sigma 25) backdrop glassmorphic blur.
Animated sliding indicator pill tracking active tab transitions.
Light & dark mode glass border effects and shadows.

You can also provide your own custom fallback widget via the fallback: parameter:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tabs: _tabs,
  // Custom fallback widget for Android / Web:
  fallback: NavigationBar(
    selectedIndex: _currentIndex,
    onDestinationSelected: (index) => setState(() => _currentIndex = index),
    destinations: const [
      NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
      NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
      NavigationDestination(icon: Icon(Icons.favorite), label: 'Saved'),
      NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
    ],
  ),
)

📖 API Reference #