native_glass_navbar #

A Flutter plugin that brings the native iOS Liquid Glass style navigation bar to your Flutter apps.

This package uses platform views and method channels to render the actual native iOS UITabBar. This means no more of that uncanny valley effect that you often get with custom Flutter implementations.

Oh yeah, it also doesn't have any 3rd party dependencies!

Demos
#

Features #

• Native look and feel: Probably because it is native 😉.
• Dark Mode & Theming: Automatically matches system themes and uses your app's primary color.
• Action Button: Add a floating action button for your main app actions.
• SF Symbols: Use any SF Symbol for icons.
• Fallback Support: Optionally define a fallback widget for Android or older iOS versions.

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
    native_glass_navbar: ^1.0.1

Usage #

Import the package:

import 'package:native_glass_navbar/native_glass_navbar.dart';

Basic Implementation #

NativeGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  tabs: const [
    NativeGlassNavBarItem(label: 'Home', symbol: 'house'),
    NativeGlassNavBarItem(label: 'Search', symbol: 'magnifyingglass'),
    NativeGlassNavBarItem(label: 'Settings', symbol: 'gear'),
  ],
)

With Action Button #

You can add a action button (e.g., for a "New Post" action). Note that when an action button is present, the maximum number of tabs is 4.

yes I'm aware this is not the recommended design pattern but I like it soooooooo...

NativeGlassNavBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  actionButton: TabBarActionButton(
    symbol: 'plus',
    onTap: () {
      print('Action button tapped!');
    },
  ),
  tabs: const [
    NativeGlassNavBarItem(label: 'Home', symbol: 'house'),
    NativeGlassNavBarItem(label: 'Profile', symbol: 'person'),
  ],
)

Handling Unsupported Platforms #

Since this plugin relies on native iOS APIs, it will not render the glass effect on Android or older iOS versions. You can provide a fallback widget (like a standard BottomNavigationBar) for these cases.

NativeGlassNavBar(
  // ... other properties
  fallback: BottomNavigationBar(
    currentIndex: _currentIndex,
    onTap: (index) => setState(() => _currentIndex = index),
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
    ],
  ),
)

API Reference #

NativeGlassNavBar #

NativeGlassNavBarItem #