glass_liquid_navbar 0.1.2

A stunning iOS 26-inspired liquid glass bottom navigation bar with buttery-smooth animations and frosted glass morphism for Flutter.

glass_liquid_navbar

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

---

🔗 Live Interactive Preview

Click here to try the Live Demo in your browser!
Includes Light/Dark mode toggle and real spring-physics simulation.

---

🖼️ Visuals

Light Mode	Dark Mode	Liquid Transition

---

✨ Features

• 🌊 Liquid Indicator: Blob stretches & morphs using spring physics.
• 🌓 Dual Themes: Optimized light and dark presets (LiquidGlassTheme.light() / .dark()).
• 🪟 Real Glass Blur: Authentic frosted-glass depth using BackdropFilter.
• 💫 Bounce Animation: Icon-specific spring-bounce on selection.
• 📱 Safe-Area Aware: Handles bottom safe-area padding automatically.

---

🚀 Getting started

dependencies:
  glass_liquid_navbar: ^0.1.2

import 'package:glass_liquid_navbar/glass_liquid_navbar.dart';

⚠️ Important: Enable Glass Effect

Set extendBody: true in your Scaffold so content scrolls behind the bar:

Scaffold(
  extendBody: true, // 👈 Required
  bottomNavigationBar: LiquidGlassNavbar(...),
  body: ... 
)

---

📖 Usage

LiquidGlassNavbar(
  theme: LiquidGlassTheme.light(), // Or .dark()
  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.person_rounded, label: 'Profile'),
  ],
)

---

📄 License

MIT © 2026 Abhay Patel