glass_liquid_navbar

Pub Version License

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
Light Preview Dark Preview Smooth Animation

✨ 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

Libraries

glass_liquid_navbar
Glass Liquid Navbar — iOS 26-inspired frosted glass bottom navigation for Flutter.
main