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

Run flutter pub get.

Usage #

Import the package:

import 'package:native_liquid_glass_navbar/native_liquid_glass_navbar.dart';

1. Using Custom SVG Icons #

Place your .svg files in your Flutter assets folder (e.g., assets/icons/) and declare them in your pubspec.yaml:

flutter:
  assets:
    - assets/icons/

Then create your navigation bar:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  tabs: const [
    NativeLiquidGlassNavBarItem(
      label: 'Home',
      svgPath: 'assets/icons/home.svg',
    ),
    NativeLiquidGlassNavBarItem(
      label: 'Search',
      svgPath: 'assets/icons/search.svg',
    ),
    NativeLiquidGlassNavBarItem(
      label: 'Settings',
      svgPath: 'assets/icons/settings.svg',
    ),
  ],
)

2. Using PNGs, SVGs, and Flutter IconData #

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

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tabs: const [
    NativeLiquidGlassNavBarItem(
      label: 'Home',
      svgPath: 'assets/icons/home.svg',
    ),
    NativeLiquidGlassNavBarItem(
      label: 'Profile',
      assetPath: 'assets/icons/profile.png',
    ),
    NativeLiquidGlassNavBarItem(
      label: 'Settings',
      icon: Icons.settings_rounded,
    ),
  ],
)

3. Adding an Action Button #

You can add an action button (e.g., for creating a new post or item). When an action button is present, the maximum number of tabs is 4 (for a total of 5 items including the action button).

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: NativeLiquidGlassActionButton(
    svgPath: 'assets/icons/plus.svg',
    onTap: () {
      print('Action button tapped!');
    },
  ),
  tabs: const [
    NativeLiquidGlassNavBarItem(
      label: 'Home',
      svgPath: 'assets/icons/home.svg',
    ),
    NativeLiquidGlassNavBarItem(
      label: 'Search',
      svgPath: 'assets/icons/search.svg',
    ),
  ],
)

4. Cross-Platform Fallback (Android & Older iOS) #

Since this plugin utilizes native iOS Liquid Glass APIs, on Android or unsupported platforms it will automatically render a built-in fallback navigation bar, or you can provide a custom fallback widget:

NativeLiquidGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  tabs: const [
    NativeLiquidGlassNavBarItem(label: 'Home', svgPath: 'assets/icons/home.svg'),
    NativeLiquidGlassNavBarItem(label: 'Settings', icon: Icons.settings),
  ],
  fallback: NavigationBar(
    selectedIndex: _currentIndex,
    onDestinationSelected: (index) => setState(() => _currentIndex = index),
    destinations: const [
      NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
      NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
    ],
  ),
)

API Reference #