ios26_bottom_navigationbar 0.0.2

A customizable iOS 26 frosted glass floating bottom navigation bar for Flutter with gliding pill indicator, ambient fade, and full theme reactivity.

ios26_bottom_navigationbar

A highly customizable, frosted-glass floating bottom navigation bar for Flutter inspired by next-generation iOS design language.

Features a signature smooth-gliding pill indicator capsule, ambient bottom fade gradient, translucent glassmorphism blur, reactive icon scaling, manual border & selected item border control, and 100% theme & icon customizability.

---

[iOS 26 Bottom Navigation Bar - Light Mode] [iOS 26 Bottom Navigation Bar - Dark Mode]

---

✨ Features

• 🫧 Frosted Glassmorphism: Pure floating glass pill with customizable backdrop blur (BackdropFilter), translucent background, subtle border highlight, and soft elevation shadows.
• 💊 Smooth Gliding Pill Indicator: Animated pill capsule indicator that glides seamlessly across tabs with fluid easing curves (Curves.fastEaseInToSlowEaseOut).
• 🎨 Manual Border & Selected Item Border Control: Independently customize or disable the container border and the selected item indicator border with manual color and strength controls.
• 🌊 Ambient Bottom Fade Gradient: Optional ambient gradient overlay (IOS26AmbientFade / IOS26NavScaffold) ensuring scrollable body content flows beautifully underneath the floating bar without visual clashes.
• 🎛️ Zero Hardcoded Styles:
  • Adjust active colors, inactive colors, pill capsule tints, borders, shadows, blur sigmas, and margins.
  • Built-in presets: IOS26NavThemeData.light(), IOS26NavThemeData.dark(), and IOS26NavThemeData.resolve(context) with full support for Flutter's ThemeExtension.
  • Supports any IconData (Material, Cupertino, Lucide, FontAwesome) or custom Widget (SVG, Image, Lottie, Rive).
  • Independent active and inactive icon states.
  • Built-in support for numeric badges (badgeCount), textual badges (badgeText), dot badges (showBadge), or custom badge widgets.
  • Custom indicator and item builder hooks for complete layout control.
• 📳 Haptic Feedback: Subtle iOS-style tactile feedback on tab selection.
• 🌐 Cross-Platform: Fully compatible with Android, iOS, Web, macOS, Windows, and Linux.

---

📱 Platform Support

Platform	Support
iOS	Supported
Android	Supported
Web	Supported (HTML / CanvasKit / Wasm)
macOS	Supported
Windows	Supported
Linux	Supported

---

🚀 Getting Started

Add ios26_bottom_navigationbar to your pubspec.yaml:

dependencies:
  ios26_bottom_navigationbar: ^0.0.1

Import the package in your Dart code:

import 'package:ios26_bottom_navigationbar/ios26_bottom_navigationbar.dart';

---

📖 Usage

1. Turnkey Usage with IOS26NavScaffold

The easiest and recommended way to achieve the full iOS 26 look is using IOS26NavScaffold. It automatically sets up the full-screen stack, ambient fade gradient, and floating bar positioning:

import 'package:flutter/material.dart';
import 'package:ios26_bottom_navigationbar/ios26_bottom_navigationbar.dart';

class MyHomeScreen extends StatefulWidget {
  const MyHomeScreen({super.key});

  @override
  State<MyHomeScreen> createState() => _MyHomeScreenState();
}

class _MyHomeScreenState extends State<MyHomeScreen> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return IOS26NavScaffold(
      body: Center(
        child: Text('Selected Index: $_currentIndex'),
      ),
      navigationBar: IOS26BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        items: const [
          IOS26NavItem.icon(
            icon: Icons.home_outlined,
            activeIcon: Icons.home_rounded,
            label: 'Home',
          ),
          IOS26NavItem.icon(
            icon: Icons.local_pharmacy_outlined,
            activeIcon: Icons.local_pharmacy_rounded,
            label: 'Pharmacy',
            badgeCount: 2,
          ),
          IOS26NavItem.icon(
            icon: Icons.medical_services_outlined,
            activeIcon: Icons.medical_services_rounded,
            label: 'Doctors',
          ),
          IOS26NavItem.icon(
            icon: Icons.auto_awesome_outlined,
            activeIcon: Icons.auto_awesome_rounded,
            label: 'AI Chat',
            badgeText: 'NEW',
          ),
          IOS26NavItem.icon(
            icon: Icons.settings_outlined,
            activeIcon: Icons.settings_rounded,
            label: 'Settings',
            showBadge: true,
          ),
        ],
      ),
    );
  }
}

---

2. Manual Border & Selected Item Border Customization

You can manually control the border of the container pill as well as the selected item indicator pill directly on IOS26BottomNavigationBar, per-tab on IOS26NavItem, or via IOS26NavThemeData:

IOS26BottomNavigationBar(
  currentIndex: _currentIndex,
  // Container pill border:
  borderColor: Colors.purple.withValues(alpha: 0.5),
  borderWidth: 2.0,
  // Selected item indicator border:
  selectedItemBorderColor: Colors.amber, // Highlight active pill border
  selectedItemBorderWidth: 1.5,
  items: [
    const IOS26NavItem.icon(icon: Icons.home, label: 'Home'),
    // Per-item selected border override:
    const IOS26NavItem.icon(
      icon: Icons.star,
      label: 'VIP',
      selectedBorderColor: Colors.cyanAccent,
      selectedBorderWidth: 2.0,
    ),
  ],
)

// Or disable borders completely:
IOS26BottomNavigationBar(
  currentIndex: _currentIndex,
  borderWidth: 0.0,             // Disables container border
  selectedItemBorderWidth: 0.0, // Disables selected item indicator border
  items: items,
)

---

3. Standalone Floating Bar in Any Scaffold

You can also drop IOS26BottomNavigationBar into your existing Scaffold or custom Stack:

Scaffold(
  extendBody: true,
  body: MyScrollableContent(),
  bottomNavigationBar: IOS26BottomNavigationBar(
    currentIndex: _selectedIndex,
    onTap: (index) => setState(() => _selectedIndex = index),
    items: const [
      IOS26NavItem.icon(icon: Icons.home, label: 'Home'),
      IOS26NavItem.icon(icon: Icons.search, label: 'Search'),
      IOS26NavItem.icon(icon: Icons.person, label: 'Profile'),
    ],
  ),
);

---

4. Custom Icons & Widgets (SVGs, Images, Lottie)

You can pass arbitrary widgets as icons:

IOS26NavItem.custom(
  icon: Image.asset('assets/icons/home_outline.png', width: 20),
  activeIcon: Image.asset('assets/icons/home_filled.png', width: 20),
  label: 'Home',
),

---

5. Custom Styling & Themes

ios26_bottom_navigationbar offers deep styling control via IOS26NavThemeData.

Per-Instance Override:

IOS26BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: _onTap,
  style: IOS26NavThemeData.light(
    activeColor: const Color(0xFF5B15FC), // Apple Purple
    inactiveColor: const Color(0xFF6B7280),
    backgroundColor: const Color(0xFFF6F6F8).withValues(alpha: 0.80),
    indicatorColor: Colors.white.withValues(alpha: 0.94),
    height: 64.0,
    borderRadius: BorderRadius.circular(40),
  ),
  items: items,
)

Global App Theme Integration:

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    extensions: [
      IOS26NavThemeData.light(
        activeColor: Colors.deepPurple,
      ),
    ],
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    extensions: [
      IOS26NavThemeData.dark(
        activeColor: Colors.purpleAccent,
      ),
    ],
  ),
  home: const MyHomeScreen(),
);

---

🛠️ API Reference

IOS26NavItem

Property	Type	Description
icon	Widget?	Unselected icon widget (e.g. SVG or Image)
iconData	IconData?	Shorthand icon font data
activeIcon	Widget?	Selected icon widget
activeIconData	IconData?	Selected shorthand icon font data
label	String?	Text label displayed under icon
customLabel	Widget?	Custom widget to display as label
activeColor	Color?	Custom active color override for this item
inactiveColor	Color?	Custom inactive color override for this item
selectedBorder	BoxBorder?	Custom border override when this item is selected
selectedBorderColor	Color?	Custom border color when this item is selected
selectedBorderWidth	double?	Custom border width when this item is selected
badge	Widget?	Custom badge widget
badgeCount	int?	Numeric badge count (e.g. 5 or 99+)
badgeText	String?	Text badge (e.g. 'NEW')
showBadge	bool	Displays small dot badge
badgeColor	Color?	Badge background color
badgeTextColor	Color?	Badge text color
tooltip	String?	Accessibility / hover tooltip
onTap	VoidCallback?	Specific callback when this item is tapped

---

IOS26NavThemeData

Property	Default (Light / Dark)	Description
height	62.0	Container bar height
padding	EdgeInsets.all(5.0)	Internal container padding
margin	EdgeInsets.symmetric(horizontal: 16)	Outer margin around floating pill
borderRadius	BorderRadius.circular(38.0)	Capsule border radius
blurSigmaX / Y	30.0	Backdrop filter blur intensity
backgroundColor	0xFFF6F6F8 (80%) / 0xFF161618 (72%)	Glass capsule background color
borderColor	Colors.white (85% / 18%)	Manually controlled container border color
borderWidth	0.9	Container border strength (0.0 to disable)
border	effectiveBorder	Full custom BoxBorder (overrides color/width)
boxShadow	Subtle ambient drop shadow	Floating elevation shadows
indicatorColor	Colors.white (94% / 16%)	Gliding pill capsule background
selectedItemBorderColor	null	Gliding pill indicator border color
selectedItemBorderWidth	0.0	Gliding pill indicator border strength
selectedItemBorder	effectiveIndicatorBorder	Full custom BoxBorder for selected pill
indicatorBorderRadius	BorderRadius.circular(30.0)	Gliding pill border radius
indicatorAnimationDuration	300ms	Gliding animation duration
indicatorAnimationCurve	Curves.fastEaseInToSlowEaseOut	Gliding animation easing curve
activeColor	0xFF5B15FC / 0xFFBF5AF2	Active icon and label tint
inactiveColor	0xFF6B7280 / 0xFF8E8E93	Inactive icon and label tint
iconSize	19.0	Icon dimension
selectedIconScale	1.08	Scale factor on active icon
enableHapticFeedback	true	Subtle iOS haptic feedback on tap
enableAmbientFade	true	Soft bottom ambient gradient overlay

---

📄 Additional Information

• Example: Check out the full interactive demonstration in the example/ directory.
• Bugs & Issues: Please report any bugs or feature requests on the GitHub Issues tracker.
• License: MIT License. See LICENSE for details.