🔮 Glassy Real Navbar

The world's most beautiful glassmorphism navigation bar for Flutter

Author: Salauddin Majumder • [email protected] • Portfolio • GitHub

✨ Features #

📦 Installation #

Add to your pubspec.yaml:

dependencies:
  glassy_real_navbar: ^1.0.2

Then run:

flutter pub get

🚀 Quick Start #

import 'package:glassy_real_navbar/glassy_real_navbar.dart';

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Your content here
          YourPageContent(index: _selectedIndex),
          
          // The magic navbar ✨
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: GlassNavBar(
                selectedIndex: _selectedIndex,
                onItemSelected: (index) => setState(() => _selectedIndex = index),
                items: [
                  GlassNavBarItem(icon: Icons.home, title: 'Home'),
                  GlassNavBarItem(icon: Icons.search, title: 'Search'),
                  GlassNavBarItem(icon: Icons.person, title: 'Profile'),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

🎨 Customization #

Basic Styling #

GlassNavBar(
  // Dimensions
  height: 70,
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
  borderRadius: BorderRadius.circular(35),
  
  // Glass Effect
  blur: 10,              // Backdrop blur intensity
  opacity: 0.1,          // Glass tint opacity
  refraction: 1.25,      // Magnification (1.0 = none)
  glassiness: 1.2,       // Border shine intensity
  
  // Colors
  backgroundColor: Colors.black,
  selectedItemColor: Colors.cyanAccent,
  unselectedItemColor: Colors.white54,
  
  // ...
)

Lens Customization #

The "lens" is the floating indicator that highlights the selected item:

GlassNavBar(
  // Lens Shape
  lensWidth: 60,                              // Fixed width (null = auto)
  lensHeight: 50,                             // Fixed height (null = auto)
  lensBorderRadius: BorderRadius.circular(16), // Square-ish lens
  
  // Lens Glass Effect
  lensBlur: 5,           // Static blur on lens
  lensRefraction: 1.5,   // Lens magnification
  glassiness: 1.5,       // Lens shine/glow
  
  // Lens Border
  lensBorderColor: Colors.cyanAccent.withOpacity(0.5), // Neon glow
  
  // Motion Effects
  lensMotionBlurStrength: 15,  // Blur when moving
  lensVelocityRefraction: 0.1, // Extra refraction when fast
  
  // ...
)

Item Styling #

GlassNavBar(
  showLabels: true,
  itemIconSize: 28,
  itemTextStyle: TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w600,
    letterSpacing: 0.5,
  ),
  
  // Item Animation
  activeItemAnimation: GlassActiveItemAnimation.spark, // Glow effect
  
  // ...
)

🎬 Animation Presets #

Choose from 17 physics-based animations:

GlassNavBar(
  animationEffect: GlassAnimation.bouncyWater, // Pick your style!
  // ...
)

Custom Physics #

Override with your own spring physics:

GlassNavBar(
  animationPhysics: SpringDescription(
    mass: 1.5,      // Higher = heavier feel
    stiffness: 80,  // Higher = faster snap
    damping: 15,    // Higher = less bounce
  ),
  // ...
)

🎭 Active Item Animations #

Control how the selected icon reacts:

GlassNavBar(
  activeItemAnimation: GlassActiveItemAnimation.zoom,
  // ...
)

🌗 Themes #

Built-in Theme Presets #

// Minimal Light (like iOS)
GlassNavBar.preset(
  preset: GlassNavBarPreset.minimal,
  items: [...],
  selectedIndex: _index,
  onItemSelected: (i) => setState(() => _index = i),
)

// Cyberpunk Neon
GlassNavBar.preset(
  preset: GlassNavBarPreset.cyberpunk,
  items: [...],
  selectedIndex: _index,
  onItemSelected: (i) => setState(() => _index = i),
)

// Luxury Gold
GlassNavBar.preset(
  preset: GlassNavBarPreset.luxury,
  items: [...],
  selectedIndex: _index,
  onItemSelected: (i) => setState(() => _index = i),
)

Available presets:

• GlassNavBarPreset.minimal - Clean, subtle, iOS-inspired
• GlassNavBarPreset.cyberpunk - Neon colors, high contrast
• GlassNavBarPreset.luxury - Gold accents, heavy feel
• GlassNavBarPreset.gaming - Bouncy, vibrant
• GlassNavBarPreset.zen - Soft, muted, calming

🧩 GlassContainer Widget #

Use the glass effect anywhere in your app:

GlassContainer(
  width: 200,
  height: 200,
  blur: 10,
  opacity: 0.1,
  refraction: 1.2,
  borderRadius: BorderRadius.circular(20),
  glassiness: 1.5,
  child: Center(
    child: Text('Hello Glass!'),
  ),
)

📖 API Reference #

GlassNavBar #

GlassNavBarItem #

GlassContainer #

🎯 Best Practices #

Performance Tips #

1. Use over colorful backgrounds - The glass effect looks best over images or gradients
2. Avoid excessive refraction - Values above 1.5 may cause visual artifacts
3. Limit items to 5-6 - More items reduce the lens effect visibility

Design Tips #

1. Match your app's aesthetic - Use glassiness: 0.5 for subtle, 1.5 for dramatic
2. Consider accessibility - Ensure sufficient color contrast
3. Test on real devices - Blur effects vary across platforms

🤝 Contributing #

Contributions are welcome! Please read our contributing guidelines.

📄 License #

[email protected]

Made by the Salauddin Majumder

pub.dev • GitHub • Report Bug