native_liquid_glass_navbar #

A high-performance, zero-dependency Flutter plugin bringing the authentic iOS Liquid Glass navigation bar to Flutter apps with complete support for PNG Images, Vector SVGs, Flutter Icons, and Apple SF Symbols.

This package renders the native iOS UITabBar on iOS devices for authentic Apple Liquid Glass blur, haptics, fluidity, and system styling, while automatically providing a smooth frosted-glass navigation bar on Android, Web, and Desktop.

📱 Visual Showcase & Themes #

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

Authentic iOS Light Blur • Crisp PNGs, SVGs & 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)

🌟 Supported Icon & Image Formats #

You can pass any icon or image format using dedicated parameters or custom widgets:

Format / Source	How to Use	Code Snippet
🖼️ PNG / JPG Images	Use `iconWidget: Image.asset(...)` or `imageBytes`	`NativeLiquidGlassNavBarItem.widget(label: 'Home', iconWidget: Image.asset('assets/icons/home.png', width: 24, height: 24))`
🎨 Vector SVGs	Use `iconWidget: SvgPicture.asset(...)`	`NativeLiquidGlassNavBarItem.widget(label: 'Search', iconWidget: SvgPicture.asset('assets/icons/search.svg', width: 24, height: 24))`
🔣 Flutter Icons	Use `icon: Icons.home_rounded`	`NativeLiquidGlassNavBarItem.icon(label: 'Home', icon: Icons.home_rounded)`
🍏 Apple SF Symbols	Use `symbol: 'house.fill'`	`NativeLiquidGlassNavBarItem.symbol(label: 'Home', symbol: 'house.fill')`
🏷️ Badges & Custom UI	Use `iconWidget: Badge(...)`	`NativeLiquidGlassNavBarItem.widget(label: 'Alerts', iconWidget: Badge(label: Text('3'), child: Icon(Icons.notifications)))`

📦 Installation #

Add native_liquid_glass_navbar to your pubspec.yaml:

dependencies:
  native_liquid_glass_navbar: ^1.1.2

Then run:

flutter pub get

💡 How to Use #

1. 🖼️ Using PNG Images (`Image.asset`) #

Use NativeLiquidGlassNavBarItem.widget() with Image.asset for standard PNG icons:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton.widget(
    iconWidget: Image.asset('assets/icons/plus.png', width: 20, height: 20, color: Colors.white),
    onTap: () => print('Add tapped!'),
  ),
  tabs: [
    NativeLiquidGlassNavBarItem.widget(
      label: 'Home',
      iconWidget: Image.asset('assets/icons/home.png', width: 24, height: 24),
      selectedIconWidget: Image.asset('assets/icons/home.png', width: 24, height: 24, color: Colors.blue),
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Search',
      iconWidget: Image.asset('assets/icons/search.png', width: 24, height: 24),
      selectedIconWidget: Image.asset('assets/icons/search.png', width: 24, height: 24, color: Colors.blue),
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Saved',
      iconWidget: Image.asset('assets/icons/heart.png', width: 24, height: 24),
      selectedIconWidget: Image.asset('assets/icons/heart.png', width: 24, height: 24, color: Colors.blue),
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Settings',
      iconWidget: Image.asset('assets/icons/settings.png', width: 24, height: 24),
      selectedIconWidget: Image.asset('assets/icons/settings.png', width: 24, height: 24, color: Colors.blue),
    ),
  ],
)

2. 🎨 Using Vector SVGs (`SvgPicture.asset`) #

Use flutter_svg's SvgPicture.asset inside iconWidget and selectedIconWidget:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton.widget(
    iconWidget: SvgPicture.asset(
      'assets/icons/plus.svg',
      width: 20,
      height: 20,
      colorFilter: const ColorFilter.mode(Colors.white, BlendMode.srcIn),
    ),
    onTap: () => print('Action tapped!'),
  ),
  tabs: [
    NativeLiquidGlassNavBarItem.widget(
      label: 'Home',
      iconWidget: SvgPicture.asset(
        'assets/icons/home.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
      ),
      selectedIconWidget: SvgPicture.asset(
        'assets/icons/home.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.blue, BlendMode.srcIn),
      ),
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Search',
      iconWidget: SvgPicture.asset(
        'assets/icons/search.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
      ),
      selectedIconWidget: SvgPicture.asset(
        'assets/icons/search.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.blue, BlendMode.srcIn),
      ),
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Saved',
      iconWidget: SvgPicture.asset(
        'assets/icons/heart.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
      ),
      selectedIconWidget: SvgPicture.asset(
        'assets/icons/heart.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.blue, BlendMode.srcIn),
      ),
    ),
    NativeLiquidGlassNavBarItem.widget(
      label: 'Settings',
      iconWidget: SvgPicture.asset(
        'assets/icons/settings.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.grey, BlendMode.srcIn),
      ),
      selectedIconWidget: SvgPicture.asset(
        'assets/icons/settings.svg',
        width: 24,
        height: 24,
        colorFilter: const ColorFilter.mode(Colors.blue, BlendMode.srcIn),
      ),
    ),
  ],
)

3. 🔣 Using Flutter Icons (`IconData`) #

Pass standard Flutter IconData (Material or Cupertino icons) directly using NativeLiquidGlassNavBarItem.icon():

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton.icon(
    icon: Icons.add_rounded,
    onTap: () => print('Add tapped!'),
  ),
  tabs: const [
    NativeLiquidGlassNavBarItem.icon(
      label: 'Home',
      icon: Icons.home_rounded,
    ),
    NativeLiquidGlassNavBarItem.icon(
      label: 'Search',
      icon: Icons.search_rounded,
    ),
    NativeLiquidGlassNavBarItem.icon(
      label: 'Saved',
      icon: Icons.favorite_rounded,
    ),
    NativeLiquidGlassNavBarItem.icon(
      label: 'Settings',
      icon: Icons.tune_rounded,
    ),
  ],
)

4. 🍏 Using Apple SF Symbols (`symbol`) #

Pass native Apple SF Symbol names for authentic iOS rendering. On Android, Web, and Desktop, matching Material icons are automatically used as fallback:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton.symbol(
    symbol: 'plus',
    onTap: () => print('Add tapped!'),
  ),
  tabs: const [
    NativeLiquidGlassNavBarItem.symbol(
      label: 'Home',
      symbol: 'house.fill',
    ),
    NativeLiquidGlassNavBarItem.symbol(
      label: 'Search',
      symbol: 'magnifyingglass',
    ),
    NativeLiquidGlassNavBarItem.symbol(
      label: 'Saved',
      symbol: 'heart.fill',
    ),
    NativeLiquidGlassNavBarItem.symbol(
      label: 'Settings',
      symbol: 'gearshape.fill',
    ),
  ],
)

5. 🔀 Mix & Match (PNGs, SVGs, Icons, and Badges) #

You can freely mix different icon types and custom widgets across your navigation bar:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tabs: [
    // 1. PNG Image
    NativeLiquidGlassNavBarItem.widget(
      label: 'Home',
      iconWidget: Image.asset('assets/icons/home.png', width: 24, height: 24),
    ),
    // 2. Vector SVG
    NativeLiquidGlassNavBarItem.widget(
      label: 'Search',
      iconWidget: SvgPicture.asset('assets/icons/search.svg', width: 24, height: 24),
    ),
    // 3. Custom Badge with Flutter Icon
    NativeLiquidGlassNavBarItem.widget(
      label: 'Alerts',
      iconWidget: const Badge(
        label: Text('3'),
        child: Icon(Icons.notifications_rounded, size: 24),
      ),
    ),
    // 4. Flutter IconData
    const NativeLiquidGlassNavBarItem.icon(
      label: 'Settings',
      icon: Icons.settings_rounded,
    ),
  ],
)

🎨 Dynamic Theming & Appearance #

You can customize the active tint color, unselected color, icon size, label font size, and light/dark appearance:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tintColor: const Color(0xFF0A84FF),      // Active tab color (Apple Blue)
  unselectedColor: const Color(0xFF8E8E93),// Inactive tab color
  iconSize: 26.0,                          // Custom icon dimension
  fontSize: 11.0,                          // Custom label font size
  tabs: _myTabs,
)

🌐 Cross-Platform Fallback #

When running on Android, Web, macOS, Linux, or Windows (or unsupported devices), native_liquid_glass_navbar automatically renders a high-end floating frosted-glass navigation bar featuring:

ImageFilter.blur (sigma 25) backdrop glassmorphic blur.
Animated sliding indicator pill tracking active tab transitions.
Light and dark mode support with automatic border gradients and drop shadows.

You can also provide a custom fallback widget via fallback::

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