🌊 Liquid Glass Nav #

A stunning glassmorphic navigation bar for Flutter with liquid animations, physics-based transitions, and GPU-accelerated rendering.

Features • Installation • Usage • Customization • Examples

✨ Features #

🎨 True Glassmorphism - Beautiful frosted glass effect with backdrop blur, tint, and gradient overlays
💧 Liquid Animations - Smooth, physics-based spring animations for natural, fluid movement
🚀 GPU Accelerated - Fragment shaders for high-performance rendering on all platforms
🎯 Adaptive Quality - Automatically adjusts rendering quality based on device capabilities
🎭 Dark Mode Ready - Built-in light and dark theme support with seamless transitions
⚡ Highly Customizable - Extensive theming system with ready-to-use presets
🎮 Gesture Support - Responsive touch interactions with velocity tracking
♿ Accessible - Screen reader compatible with proper semantic labels
📦 Zero Dependencies - Pure Flutter implementation, no external packages required

📦 Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  liquid_glass_nav: ^0.0.1

Then run:

flutter pub get

🚀 Quick Start #

Basic Usage #

import 'package:flutter/material.dart';
import 'package:liquid_glass_nav/liquid_glass_nav.dart';

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: _buildBody(_currentIndex),
      bottomNavigationBar: LiquidGlassNavBar(
        icons: const [
          Icon(Icons.home_rounded),
          Icon(Icons.search_rounded),
          Icon(Icons.notifications_rounded),
          Icon(Icons.person_rounded),
        ],
        labels: const [
          Text('Home'),
          Text('Search'),
          Text('Alerts'),
          Text('Profile'),
        ],
        onItemSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

With Theme #

LiquidGlassTheme(
  data: LiquidGlassThemeData.dark(),
  child: Scaffold(
    bottomNavigationBar: LiquidGlassNavBar(
      icons: [...],
      labels: [...],
      onItemSelected: (index) => print('Selected: $index'),
    ),
  ),
)

🎨 Customization #

Glass Properties #

Control the appearance of the glassmorphic effect:

GlassProperties(
  blurRadius: 20.0,           // Backdrop blur intensity
  opacity: 0.2,               // Glass transparency
  tintColor: Colors.white,    // Base tint color
  tintIntensity: 0.5,         // Tint strength
  refractionIntensity: 0.5,   // Light refraction effect
  noiseIntensity: 0.05,       // Subtle noise texture
  borderWidth: 1.0,           // Glass border thickness
  borderOpacity: 0.2,         // Border transparency
)

Glass Presets

// Subtle - Minimal glass effect
GlassProperties.subtle()

// Medium - Balanced appearance (default)
GlassProperties.medium()

// Intense - Strong glass effect
GlassProperties.intense()

Liquid Behavior #

Configure animation characteristics:

LiquidBehavior(
  animationDuration: Duration(milliseconds: 500),
  springStiffness: 100.0,     // Spring tension
  springDamping: 10.0,        // Spring damping
  gestureSensitivity: 1.0,    // Touch response
  enableSnap: true,           // Snap to positions
)

Animation Presets

// Snappy - Fast, responsive animations
LiquidBehavior.snappy()

// Smooth - Gentle, flowing transitions
LiquidBehavior.smooth()

// Bouncy - Playful spring animations
LiquidBehavior.bouncy()

Custom Theme #

Create your own theme configuration:

LiquidGlassTheme(
  data: LiquidGlassThemeData(
    glassProperties: GlassProperties(
      blurRadius: 25.0,
      opacity: 0.15,
      tintColor: Colors.blue,
    ),
    liquidBehavior: LiquidBehavior(
      animationDuration: Duration(milliseconds: 400),
      springStiffness: 150.0,
    ),
  ),
  child: YourWidget(),
)

🎯 Advanced Features #

Programmatic Navigation #

Use LiquidGlassController for programmatic control:

final controller = LiquidGlassController();

LiquidGlassNavBar(
  controller: controller,
  icons: [...],
  onItemSelected: (index) {
    print('Navigated to: $index');
  },
)

// Navigate programmatically
controller.animateTo(2);  // Animated transition
controller.jumpTo(3);     // Instant jump

Glass Container #

Use the glass effect anywhere in your UI:

GlassContainer(
  blurRadius: 20,
  opacity: 0.15,
  borderRadius: BorderRadius.circular(20),
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Column(
      children: [
        Icon(Icons.star, color: Colors.white, size: 48),
        SizedBox(height: 10),
        Text('Glassmorphic Card', style: TextStyle(color: Colors.white)),
      ],
    ),
  ),
)

Platform Detection #

Access platform capabilities:

if (PlatformDetector.supportsShaders) {
  // Use high-quality rendering
}

final quality = PlatformDetector.recommendedQuality;
// Returns: QualityTier.high, .medium, or .low

📱 Platform Support #

Platform	Support	Notes
🍎 iOS	✅	Full support with Impeller rendering engine
🤖 Android	✅	Full support with hardware acceleration
🌐 Web	✅	Requires WebGL for shader support
💻 macOS	✅	Full support with Metal backend
🪟 Windows	✅	Full support
🐧 Linux	✅	Full support

⚡ Performance #

Adaptive Quality System #

The package automatically optimizes rendering based on device capabilities:

Quality Tier	Features	Target Devices
High	Full shaders, blur, and noise effects	Modern devices (iPhone 12+, flagship Android)
Medium	Reduced blur samples, no noise	Mid-range devices
Low	Simple gradient fallback	Older or low-end devices

Performance Metrics #

🎯 60 FPS on modern devices
🚀 < 16ms frame time for animations
💪 GPU accelerated rendering with fragment shaders
🔋 Battery efficient with smart quality scaling

📚 Examples #

Complete Example App #

See the /example folder for a full-featured demo app that showcases:

✅ Navigation bar with 4 items
✅ Light/Dark theme switching
✅ Custom gradient backgrounds
✅ Glass containers
✅ Smooth animations

Run the example:

cd example
flutter run

Code Examples #

With Icons Only

LiquidGlassNavBar(
  icons: const [
    Icon(Icons.home),
    Icon(Icons.explore),
    Icon(Icons.favorite),
  ],
  onItemSelected: (index) => print(index),
)

With Labels

LiquidGlassNavBar(
  icons: const [Icon(Icons.home), Icon(Icons.search)],
  labels: const [Text('Home'), Text('Search')],
  onItemSelected: (index) => handleNavigation(index),
)

With Custom Theme

LiquidGlassTheme(
  data: LiquidGlassThemeData(
    glassProperties: GlassProperties.intense(),
    liquidBehavior: LiquidBehavior.bouncy(),
  ),
  child: Scaffold(
    bottomNavigationBar: LiquidGlassNavBar(...),
  ),
)

🔧 Requirements #

Flutter: >= 3.16.0
Dart: >= 3.1.0
Platform: iOS 12+, Android 5.0+ (API 21+)

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 Liquid Glass Nav

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

🤝 Contributing #

Contributions are always welcome! Here's how you can help:

🍴 Fork the repository
🔨 Create a feature branch (git checkout -b feature/AmazingFeature)
✅ Commit your changes (git commit -m 'Add some AmazingFeature')
📤 Push to the branch (git push origin feature/AmazingFeature)
🎉 Open a Pull Request

Development Setup #

# Clone the repository
git clone https://github.com/HAMEDNGOMA/liquid_glass_nav.git

# Install dependencies
flutter pub get

# Run tests
flutter test

# Run example app
cd example && flutter run

🐛 Issues & Support #

Found a bug or have a feature request? Please open an issue on GitHub.

For questions :

📧 Email: hamedngoma97@gmail.com

🌟 Show Your Support #

If you like this package, please give it a ⭐ on GitHub and a 👍 on pub.dev!

Made with ❤️ for the Libyan developer community

⬆ Back to Top

liquid_glass_bottom_navbar 0.0.1 liquid_glass_bottom_navbar: ^0.0.1 copied to clipboard

Metadata