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)

💡 How Icon Resolution Works (iOS Native vs. Cross-Platform)

NativeLiquidGlassNavBarItem.widget(
label: 'Home',
symbol: 'house.fill', // Rendered on iOS native UITabBar
iconWidget: SvgPicture.asset('assets/svgs/home.svg', width: 24, height: 24), // Rendered on Android / Web
)

🌟 Supported Icon & Image Formats

📦 Installation

Add native_liquid_glass_navbar to your pubspec.yaml:

dependencies:
  native_liquid_glass_navbar: ^1.1.3

Then run:

flutter pub get

💡 Usage Examples

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(
    symbol: 'plus', // Rendered on iOS
    iconWidget: Image.asset('assets/icons/plus.png', width: 20, height: 20, color: Colors.white), // Android/Web
    onTap: () => print('Add tapped!'),
  ),
  tabs: [
    NativeLiquidGlassNavBarItem.widget(
      label: 'Home',
      symbol: 'house.fill',
      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',
      symbol: 'magnifyingglass',
      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',
      symbol: 'heart.fill',
      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',
      symbol: 'gearshape.fill',
      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(
    symbol: 'plus', // Rendered on iOS
    iconWidget: SvgPicture.asset( // Rendered on Android / Web
      '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',
      symbol: 'house.fill',
      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',
      symbol: 'magnifyingglass',
      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',
      symbol: 'heart.fill',
      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',
      symbol: 'gearshape.fill',
      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(). The package automatically converts them to high-resolution native image bytes for iOS without requiring manual configuration:

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',
      symbol: 'house.fill',
      iconWidget: Image.asset('assets/icons/home.png', width: 24, height: 24),
    ),
    // 2. Vector SVG
    NativeLiquidGlassNavBarItem.widget(
      label: 'Search',
      symbol: 'magnifyingglass',
      iconWidget: SvgPicture.asset('assets/icons/search.svg', width: 24, height: 24),
    ),
    // 3. Custom Badge with Flutter Icon
    NativeLiquidGlassNavBarItem.widget(
      label: 'Alerts',
      symbol: 'bell.fill',
      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

NativeLiquidGlassNavBar

NativeLiquidGlassNavBarItem

Named Constructors:

• NativeLiquidGlassNavBarItem.widget({required String label, required Widget iconWidget, Widget? selectedIconWidget, Uint8List? imageBytes, String? symbol, double? iconSize})
• NativeLiquidGlassNavBarItem.icon({required String label, required IconData icon, String? symbol, double? iconSize})
• NativeLiquidGlassNavBarItem.symbol({required String label, required String symbol, double? iconSize})

NativeLiquidGlassActionButton

Named Constructors:

• NativeLiquidGlassActionButton.widget({required Widget iconWidget, required VoidCallback onTap, Uint8List? imageBytes, String? symbol, double? iconSize})
• NativeLiquidGlassActionButton.icon({required IconData icon, required VoidCallback onTap, String? symbol, double? iconSize})
• NativeLiquidGlassActionButton.symbol({required String symbol, required VoidCallback onTap, double? iconSize})

👨‍💻 Author & Maintainer

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.