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.

Showcase & Highlights #

💎 Liquid Glass & SVGs	🌈 Live Mesh Translucency	🔘 Quick Action Button
Authentic Apple Blur Native `UITabBar` rendering with zero frame drops	Retina Vector SVGs High-resolution rasterization for pixel-perfect clarity	Floating Action Pill Circular action button for quick adds & media triggers

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.3

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 #