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 (Images, SVGs, Badges), PNG/raster images, Flutter IconData, and Apple SF Symbols.

This package uses platform views and method channels to render the actual native iOS UITabBar. This eliminates the uncanny valley effect often found in simulated Flutter implementations, providing authentic Apple Liquid Glass blur, haptics, fluidity, and tab animations.

📱 Visual Showcase & Themes #

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

Authentic iOS Light Blur • Crisp Custom Widgets & PNGs • Dynamic Live Mesh Underlay • Floating Quick Action Pill	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 Highlights & Theming #

☀️ Light Theme (Liquid Glass) #

Authentic Apple Vibrancy: Uses native iOS glass materials that dynamically sample the colors and gradients passing beneath the navigation bar.
Zero External Dependencies: Lightweight and robust with no 3rd-party dependencies, preventing version conflicts.
Floating Action Pill: Sleek circular action button for central actions (e.g. Create, Add, Camera) seamlessly integrated into the navigation bar hierarchy.

🌙 Dark Theme (Deep Translucency) #

Automatic System & App Theme Adaptation: Automatically responds to iOS Dark Mode and Flutter ThemeData.brightness.
Dynamic Active Tinting: Customize active tab colors (tintColor) and unselected states (unselectedColor) with seamless color transitions.
Zero Frame Drops: Completely offloaded to native UITabBar rendering for rock-solid 60/120 FPS performance.

🚀 Cross-Platform Fallback (Android, Web & Desktop) #

Built-in Frosted Glass Container: Features backdrop glassmorphic blur (ImageFilter.blur(sigmaX: 25, sigmaY: 25)), dynamic glass borders, and subtle elevation shadows.
Interactive Sliding Pill Indicator: Smooth spring-animated pill indicator tracks active tab transitions across all non-iOS platforms.
100% Feature Parity: Full support for custom Flutter widgets (e.g. SvgPicture.asset, Image.asset), PNG assets, Flutter IconData, custom sizes, and action buttons without extra configuration.
Custom Fallback Widget Support: Easily plug in a custom Material 3 NavigationBar or any widget via the fallback: parameter.

Features #

🧩 Custom Widgets & SVGs: Pass any Flutter Widget directly via iconWidget (e.g. SvgPicture.asset, Image.asset, custom badges, Lottie, etc.).
📦 Zero Dependencies: Pure Flutter SDK implementation without 3rd-party dependency lock-in.
🖼️ PNG & Image Assets: Use custom PNG, JPG, or WebP assets (assetPath) or raw memory bytes (imageBytes).
🔣 Flutter IconData: Use any Material Icon, Cupertino Icon, or custom font icon (icon: Icons.home).
🍏 Apple SF Symbols: Built-in support for native Apple SF Symbols (symbol: 'house.fill').
💎 Authentic Liquid Glass Blur: Genuine native iOS translucency and blur styling with zero frame drops.
🌓 Theming & Dark Mode: Automatically adapts to system brightness and your app's ThemeData primary and tint colors.
🔘 Action Button: Add a prominent circular action button to the right of the tabs for central app actions (e.g. Create / Post / Add).
📱 Cross-Platform Fallback: Automatically provides a built-in cross-platform navigation bar or accepts a custom fallback widget for Android, Web, and desktop platforms.
⚡ High-Performance In-Memory Cache: Icons are rasterized at high retina resolution (@3x) and cached in memory for instantaneous 60/120 FPS transitions.

Installation #

Add native_liquid_glass_navbar to your pubspec.yaml:

dependencies:
  native_liquid_glass_navbar: ^1.1.0

Run flutter pub get.

Easy Usage (2 Popular Options) #

Option 1: Quick Named Constructors (Recommended) #

Use convenient named constructors for clean, declarative code:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton.widget(
    iconWidget: SvgPicture.asset('assets/icons/plus.svg', width: 20, height: 20),
    symbol: 'plus',
    assetPath: 'assets/icons/plus.png',
    onTap: () => _openCreateModal(),
  ),
  tabs: [
    // Custom widget (e.g., SVG using flutter_svg from your app)
    NativeLiquidGlassNavBarItem.widget(
      label: 'Home',
      iconWidget: SvgPicture.asset('assets/icons/home.svg', width: 24, height: 24),
      symbol: 'house.fill',
      assetPath: 'assets/icons/home.png',
    ),
    // PNG Asset
    const NativeLiquidGlassNavBarItem.asset(
      label: 'Search',
      assetPath: 'assets/icons/search.png',
      symbol: 'magnifyingglass',
    ),
    // Flutter IconData
    const NativeLiquidGlassNavBarItem.icon(
      label: 'Saved',
      icon: Icons.favorite_rounded,
      symbol: 'heart.fill',
    ),
    // Native Apple SF Symbol
    const NativeLiquidGlassNavBarItem.symbol(
      label: 'Settings',
      symbol: 'gearshape.fill',
    ),
  ],
)

Option 2: Standard Constructor #

You can mix and match custom widgets, PNGs, and Flutter IconData:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  tintColor: const Color(0xFF0A84FF),
  unselectedColor: const Color(0xFF8E8E93),
  iconSize: 26.0,
  fontSize: 10.0,
  onTap: (index) => setState(() => _currentIndex = index),
  tabs: [
    NativeLiquidGlassNavBarItem(
      label: 'Home',
      iconWidget: Image.asset('assets/icons/home.png', width: 24, height: 24),
      symbol: 'house.fill',
    ),
    const NativeLiquidGlassNavBarItem(
      label: 'Search',
      assetPath: 'assets/icons/search.png',
      symbol: 'magnifyingglass',
    ),
    const NativeLiquidGlassNavBarItem(
      label: 'Settings',
      icon: Icons.settings_rounded,
      symbol: 'gearshape.fill',
    ),
  ],
)

Cross-Platform Fallback & Customization #

When running on non-iOS platforms (Android, Web, macOS, Windows, Linux) or older iOS versions, native_liquid_glass_navbar provides two flexible options:

1. Built-in Premium Glass Fallback (Default) #

By default, the plugin automatically renders a floating frosted-glass navbar with:

ImageFilter.blur (sigma 25) backdrop glassmorphic blur.
Animated sliding pill indicator with smooth spring transitions.
Automatic light/dark mode glass gradient borders and drop shadows.
Direct support for all your custom widgets, PNGs, IconData, and action buttons.

You can customize this fallback directly using the properties on NativeLiquidGlassNavBar:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  // Customization properties applied across native and fallback:
  tintColor: Colors.blueAccent,       // Active icon & label color
  unselectedColor: Colors.grey,       // Inactive icon & label color
  iconSize: 26.0,                     // Icon dimension
  fontSize: 11.0,                     // Label font size
  tabs: _tabs,
  actionButton: _actionButton,
)

2. Providing a Custom Fallback Widget #

If you prefer a standard Material 3 NavigationBar or a custom design for Android/Web, provide the fallback parameter:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tabs: _tabs,
  // Custom fallback widget rendered on 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 #