ios26_bottom_navigationbar #

A floating, frosted-glass bottom navigation bar for Flutter, inspired by the visual style of iOS 26.

The package focuses on the details that make a floating navigation bar feel good to use: a smooth sliding selection pill, glass blur, subtle shadows, animated icons, badges, and plenty of control over the styling.

It works across iOS, Android, Web, macOS, Windows, and Linux.

Features #

• Frosted glass background with configurable blur
• Floating pill-shaped navigation bar
• Smooth animated selection indicator
• Active icon scaling animation
• Light and dark theme presets
• Custom colors, borders, shadows, padding, margins, and sizes
• Optional border for the navigation bar and selected item
• Numeric, text, dot, and custom badges
• Different icons for active and inactive states
• Support for IconData and custom widgets
• Custom item and indicator builders
• Optional haptic feedback
• Optional ambient fade behind the navigation bar
• Flutter ThemeExtension support
• Works with Material, Cupertino, and third-party icon packs
• Cross-platform support

Platform support #

Getting started #

Add the package to your pubspec.yaml:

dependencies:
  ios26_bottom_navigationbar: ^0.0.4

Then import it:

import 'package:ios26_bottom_navigationbar/ios26_bottom_navigationbar.dart';

Usage #

Using IOS26NavScaffold #

If you want the complete floating navigation setup, IOS26NavScaffold is the easiest option.

It handles the layout for you, including the ambient fade behind the navigation bar.

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.explore_outlined,
            activeIcon: Icons.explore_rounded,
            label: 'Explore',
          ),
          IOS26NavItem.icon(
            icon: Icons.favorite_outline_rounded,
            activeIcon: Icons.favorite_rounded,
            label: 'Favorites',
            badgeCount: 3,
          ),
          IOS26NavItem.icon(
            icon: Icons.notifications_none_rounded,
            activeIcon: Icons.notifications_rounded,
            label: 'Alerts',
            badgeText: 'NEW',
          ),
          IOS26NavItem.icon(
            icon: Icons.person_outline_rounded,
            activeIcon: Icons.person_rounded,
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

Using it with a regular Scaffold #

You don't have to use IOS26NavScaffold. The navigation bar can also be used directly with your existing Scaffold.

Scaffold(
  extendBody: true,
  body: MyScrollableContent(),
  bottomNavigationBar: IOS26BottomNavigationBar(
    currentIndex: _selectedIndex,
    onTap: (index) {
      setState(() => _selectedIndex = index);
    },
    items: const [
      IOS26NavItem.icon(
        icon: Icons.home_outlined,
        activeIcon: Icons.home_rounded,
        label: 'Home',
      ),
      IOS26NavItem.icon(
        icon: Icons.search_outlined,
        activeIcon: Icons.search_rounded,
        label: 'Search',
      ),
      IOS26NavItem.icon(
        icon: Icons.person_outline_rounded,
        activeIcon: Icons.person_rounded,
        label: 'Profile',
      ),
    ],
  ),
);

Customizing the borders #

Both the outer navigation bar and the selected item indicator have their own border settings.

IOS26BottomNavigationBar(
  currentIndex: _currentIndex,

  borderColor: Colors.purple.withValues(alpha: 0.5),
  borderWidth: 2.0,

  selectedItemBorderColor: Colors.amber,
  selectedItemBorderWidth: 1.5,

  items: const [
    IOS26NavItem.icon(
      icon: Icons.home_outlined,
      activeIcon: Icons.home_rounded,
      label: 'Home',
    ),
    IOS26NavItem.icon(
      icon: Icons.star_outline,
      activeIcon: Icons.star,
      label: 'VIP',
      selectedBorderColor: Colors.cyanAccent,
      selectedBorderWidth: 2.0,
    ),
  ],
);

You can also disable either border by setting its width to 0:

IOS26BottomNavigationBar(
  currentIndex: _currentIndex,
  borderWidth: 0,
  selectedItemBorderWidth: 0,
  items: items,
);

Custom icons and widgets #

IOS26NavItem supports both IconData and custom widgets.

For example, you can use SVGs, images, Lottie animations, Rive animations, or your own widgets:

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

You can also use any icon package that provides IconData, including Material Icons, Cupertino Icons, Lucide, and Font Awesome.

Badges #

There are several ways to add a badge to an item.

Numeric badge #

IOS26NavItem.icon(
  icon: Icons.notifications_outlined,
  activeIcon: Icons.notifications,
  label: 'Notifications',
  badgeCount: 5,
);

Text badge #

IOS26NavItem.icon(
  icon: Icons.auto_awesome_outlined,
  activeIcon: Icons.auto_awesome,
  label: 'Discover',
  badgeText: 'NEW',
);

Dot badge #

IOS26NavItem.icon(
  icon: Icons.chat_outlined,
  activeIcon: Icons.chat,
  label: 'Messages',
  showBadge: true,
);

For more control, you can provide your own badge widget through the badge property.

Styling #

The navigation bar can be customized per instance using IOS26NavThemeData.

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

There are built-in light and dark presets:

IOS26NavThemeData.light()
IOS26NavThemeData.dark()
IOS26NavThemeData.resolve(context)

Using it with ThemeData #

IOS26NavThemeData is also a ThemeExtension, so it can be added directly to your application's theme.

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

API #

IOS26NavItem #

IOS26NavThemeData #

Some of the main styling options include:

Example #

The example/ directory contains a small interactive app demonstrating the navigation bar, including light/dark themes, badges, borders, and different customization options.

You can run it locally with:

cd example
flutter run

Issues and feature requests #

If you find a bug or have an idea for improving the package, please open an issue on the project's GitHub repository.

License #

This package is released under the MIT License. See LICENSE for details.