flare_bottom_bar 1.0.0

A highly animated, premium glassmorphism bottom navigation bar for Flutter. Features a sliding elastic indicator, haptic feedback, and a sleek floating design.

flare_bottom_bar 🌟

The flagship UI component of the Flare ecosystem. A highly animated, premium glassmorphism bottom navigation bar for Flutter.

Part of the Flare premium UI ecosystem by ErsanQ.

---

🧭 Why Flare?

"Motion is meaning." Most bottom bars on pub.dev are either rigid, bulky, or poorly animated. flare_bottom_bar is built entirely around fluid spring-physics. When an icon is selected, a meticulously engineered "Sliding Pill" background indicator zips behind it with elastic physics, while the active icon scales up smoothly. Every interaction is tied to a microscopic haptic bump (HapticFeedback.lightImpact), giving your app an unparalleled, high-end, tactile feel.

✨ Features

• 🛳 Floating Aesthetic: Safely floats above your content using margins and a stadium border (capsule shape).
• 🪟 True Glassmorphism: Real-time blurred frosted background (BackdropFilter) that beautifully blends with your scrolling content.
• 💊 Sliding Pill Indicator: A background highlight that animates fluidly behind the selected icon using an ElasticOutCurve.
• 📳 Haptics Built-In: Automatic light haptic feedback on every tap to bring your app to life.
• ✨ Scale Animation: The active icon scales up, providing clear visual hierarchy.
• 🧩 Zero Dependencies: Pure, 60/120 FPS Flutter code.

---

📸 Demo

---

📦 Installation

Add the package to your pubspec.yaml:

dependencies:
  flare_bottom_bar: ^1.0.0

Then run:

flutter pub get

---

💡 Quick Start & Tips

🌟 Crucial Tip: extendBody

To get the true "floating" effect where your background content scrolls underneath the transparent glass bar, you must set extendBody: true on your Scaffold.

import 'package:flutter/material.dart';
import 'package:flare_bottom_bar/flare_bottom_bar.dart';
import 'package:flare_bottom_bar/flare_bar_item.dart';

class MyDashboard extends StatefulWidget {
  @override
  _MyDashboardState createState() => _MyDashboardState();
}

class _MyDashboardState extends State<MyDashboard> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // <--- IMPORTANT FOR FLOATING GLASS EFFECT
      body: Center(
        child: Text('Current Tab: $_currentIndex'),
      ),
      bottomNavigationBar: FlareBottomBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          FlareBarItem(
            icon: Icons.home_rounded,
            title: 'Home',
          ),
          FlareBarItem(
            icon: Icons.search_rounded,
            title: 'Search',
          ),
          FlareBarItem(
            icon: Icons.person_rounded,
            title: 'Profile',
          ),
        ],
      ),
    );
  }
}

---

🛠 Advanced Customization

FlareBottomBar exposes several parameters so you can tailor it exactly to your app's brand:

FlareBottomBar(
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
  barColor: Colors.black.withValues(alpha: 0.3), // The base frosted glass color
  blurSigma: 20.0, // How blurry the background content gets
  indicatorColor: Colors.white.withValues(alpha: 0.15), // The sliding pill color
  activeIconColor: Colors.white,
  inactiveIconColor: Colors.white54,
  margin: const EdgeInsets.all(24.0), // The margin around the floating bar
  animationDuration: const Duration(milliseconds: 500),
  animationCurve: Curves.elasticOut,
  items: [...],
)

---

🤝 Contributing

We welcome any contributions to the Flare ecosystem! Open an issue or submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/awesome-updates)
3. Ensure strict lints run properly (flutter analyze)
4. Open a Pull Request

---

📄 License

This framework is licensed under the MIT License — see the LICENSE file for details.

Made with ❤️ by ErsanQ