glass_liquid_navbar #

iOS 26-inspired liquid glass bottom navigation for Flutter. Ultra-smooth quintic transitions, real backdrop blur, and automatic theme detection.

✨ New in 0.2.0 #

• 🌊 Ultra-Transparency: Pushed glass to 3% opacity for a true "Liquid" look.
• 🚀 Quintic Smoothness: High-end iOS friction-based sliding animations.
• 🌓 Auto-Theme: Automatically detects and switches between Dark and Light modes.
• 💎 Refined Visuals: Soft diffuse indicators with realistic specular highlights.

🖼️ Visuals #

Light Mode	Dark Mode	Smooth Transition

✨ Features #

• 🌓 Dual Themes: Optimized light and dark presets (LiquidGlassTheme.light() / .dark()).
• 🪟 Real Glass Blur: Authentic frosted-glass depth using BackdropFilter.
• 💫 Quintic Animation: Pure, smooth sliding transitions (no jitter or overshoot).
• 📱 Safe-Area Aware: Handles bottom safe-area padding automatically.
• 🛠️ Fully Customizable: Tweak blur, transparency, borders, and shadows.

🚀 Getting started #

dependencies:
  glass_liquid_navbar: ^0.2.0

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(
  currentIndex: _index,
  onTap: (i) => setState(() => _index = i),
  // theme: ... (Optional: Auto-detects Light/Dark mode)
  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