native_liquid_glass_navbar #

A high-performance Flutter plugin that brings the authentic iOS Liquid Glass navigation bar to Flutter apps with full support for custom SVGs, 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
[iOS Light Theme Liquid Glass Navbar]	[iOS Dark Theme Liquid Glass Navbar]	[Cross-Platform Glass Fallback Navbar]
Authentic iOS Light Blur • Crisp Custom SVGs & PNGs • Dynamic 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 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.
Retina Crisp Vector SVGs: High-resolution vector rasterization ensuring pixel-perfect clarity without blurriness on @2x and @3x screens.
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 SVGs, PNG assets, Flutter IconData, custom sizes, and action buttons without any extra configuration.
Custom Fallback Widget Support: Easily plug in a custom Material 3 NavigationBar or any widget via the fallback: parameter.

Features #

🎨 Custom SVGs: Load vector SVG icons directly via Flutter asset path (svgPath) or inline SVG string (svgString).
🖼️ 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 older iOS versions.
⚡ 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.0.4

Run flutter pub get.

Easy Usage (2 Popular Options) #

Option 1: Quick Named Constructors (Recommended) #

Use convenient named constructors for crisp, declarative code:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton.svg(
    svgPath: 'assets/icons/plus.svg',
    onTap: () => _openCreateModal(),
  ),
  tabs: const [
    NativeLiquidGlassNavBarItem.svg(
      label: 'Home',
      svgPath: 'assets/icons/home.svg',
    ),
    NativeLiquidGlassNavBarItem.svg(
      label: 'Search',
      svgPath: 'assets/icons/search.svg',
    ),
    NativeLiquidGlassNavBarItem.icon(
      label: 'Saved',
      icon: Icons.favorite_rounded,
    ),
    NativeLiquidGlassNavBarItem.symbol(
      label: 'Settings',
      symbol: 'gearshape.fill',
    ),
  ],
)

Option 2: Standard Constructor #

You can mix and match custom SVGs, 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: const [
    NativeLiquidGlassNavBarItem(
      label: 'Home',
      svgPath: 'assets/icons/home.svg',
    ),
    NativeLiquidGlassNavBarItem(
      label: 'Search',
      assetPath: 'assets/icons/search.png',
    ),
    NativeLiquidGlassNavBarItem(
      label: 'Settings',
      icon: Icons.settings_rounded,
    ),
  ],
)

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 SVGs, 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 #