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