LiquidGlass NavBar 🌊 #

A beautiful, customizable liquid-glass floating navigation bar for Flutter with a draggable indicator and parallax page transitions.

https://github.com/user-attachments/assets/1d4dda9d-4da8-476f-ad0c-b1ee8d4ffd93

✨ Features #

• Liquid Glass Design: Beautiful glasomorphic navigation bar with liquid glass effects
• Draggable Indicator: Smooth, draggable indicator that snaps to navigation items
• Parallax Pages: Subtle parallax effect when navigating between pages
• Adaptive Layout: Automatically adjusts to different screen sizes and item counts
• Customizable: Full control over colors, sizes, spacing, and styling
• State Management: Built with Riverpod for efficient state management
• Responsive: Fully adaptive to different screen sizes using standard Flutter layout

https://github.com/user-attachments/assets/d2f8fa04-39fd-4add-9aed-670734aa0a35

📦 Installation #

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

dependencies:
  liquid_navbar: ^2.0.3

Then run:

flutter pub get

🚀 Quick Start #

Basic Usage #

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:liquid_navbar/liquid_navbar.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavScaffold(
        pages: [
          HomePage(),
          SearchPage(),
          ProfilePage(),
        ],
        icons: [
          Icon(Icons.home),
          Icon(Icons.search),
          Icon(Icons.person),
        ],
        labels: [
          'Home',
          'Search',
          'Profile',
        ],
      ),
    );
  }
}

Advanced Customization #

BottomNavScaffold(
  pages: myPages,
  icons: myIcons,
  labels: myLabels,
  navbarHeight: 80,
  indicatorWidth: 80,
  bottomPadding: 25,
  selectedColor: Colors.blue,
  unselectedColor: Colors.grey.shade400,
  horizontalPadding: 15,
)

IMPORTANT NOTE: When changing visual parameters such as the number of icons, padding, or navbar height, you MUST perform a Hot Restart (or full app restart) for the indicator position to be recalculated correctly. Hot Reload is sufficient for color changes, but layout changes require a restart.

🎨 Customization Options #

BottomNavScaffold Parameters #

NavbarItemWidget Parameters #

🏗️ Architecture #

The package is structured with modular, reusable components:

• BottomNavScaffold: Main scaffold widget that orchestrates pages and navbar
• NavbarWidget: Container widget for the navigation bar
• NavbarItemWidget: Individual navigation item with icon and label
• NavbarDraggableIndicator: Draggable liquid glass indicator
• NavbarBackground: Glasomorphic background container
• NavbarProviders: Riverpod state management for navbar state

🛠️ Dependencies #

• liquid_glass_renderer: ^0.2.0-dev.4 - Liquid glass effects
• flutter_riverpod: ^3.0.3 - State management

📱 Platform Support #

• ✅ iOS
• ✅ Android
• ✅ Web
• ✅ macOS
• ✅ Windows
• ✅ Linux

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License #

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

👤 Author #

Zyad Khedr

• Email: [email protected]
• GitHub: @ZyadWKhedr

🌟 Show Your Support #

Give a ⭐️ if this project helped you!

📝 Changelog #

See CHANGELOG.md for details on updates and version history.