glass_liquid_navbar #

iOS 26-inspired liquid glass bottom navigation for Flutter. Buttery-smooth spring physics, real backdrop blur, and a morphing liquid indicator — zero dependencies beyond Flutter itself.

✨ Features #

🚀 Getting started #

dependencies:
  glass_liquid_navbar: ^0.1.0

import 'package:glass_liquid_navbar/glass_liquid_navbar.dart';

📖 Basic usage #

Scaffold(
  extendBody: true, // ← lets the bar float over content
  body: _pages[_index],
  bottomNavigationBar: LiquidGlassNavbar(
    currentIndex: _index,
    onTap: (i) => setState(() => _index = i),
    items: const [
      LiquidNavItem(icon: Icons.home_rounded,          label: 'Home'),
      LiquidNavItem(icon: Icons.search_rounded,         label: 'Search'),
      LiquidNavItem(icon: Icons.add_circle_rounded,     label: 'Create'),
      LiquidNavItem(icon: Icons.notifications_rounded,  label: 'Alerts', badge: 3),
      LiquidNavItem(icon: Icons.person_rounded,         label: 'Profile'),
    ],
  ),
)

🎨 Theming #

LiquidGlassNavbar(
  theme: const LiquidGlassTheme(
    glassBlur:       28,      // backdrop blur sigma
    glassColor:      Color(0x30FFFFFF),
    borderRadius:    34,
    pillHeight:      72,
    selectedColor:   Colors.white,
    unselectedColor: Color(0x60FFFFFF),
    indicatorColor:  Color(0x40FFFFFF),
    shadowBlurRadius: 48,
  ),
  ...
)

Dark-mode preset #

LiquidGlassNavbar(
  theme: LiquidGlassTheme.dark(),
  ...
)

🔧 API reference #

LiquidGlassNavbar #

LiquidNavItem #

LiquidGlassTheme #

All properties have sensible defaults. Refer to the class dartdoc for the full list.

🛠️ Tips #

• Set Scaffold(extendBody: true) so page content scrolls behind the bar — the blur will composite the real content beneath.
• For a pure dark or AMOLED background, use LiquidGlassTheme.dark().
• Pair with PageView + PageController for swipe-to-navigate with synced indicator.
• Use activeIcon to swap to a filled variant of the icon when selected (e.g. Icons.home_outlined → Icons.home_rounded).

📄 License #

MIT © 2026 Abhay Patel