Super Animated Navigation Bar 🚀

A Flutter package for creating stunning bottom navigation bars with animated pre-made indicator styles. Fully customizable and easy to implement!.

Installation 📦

Add this to your pubspec.yaml:

dependencies:
  super_animated_navigation_bar: ^1.0.2

Features ✨

• 🎨 built-in indicator styles (Wave, Lamp, Line, etc.) or you can use your own indicator
• ⚡ Smooth animated transitions
• 🌟 Customizable glow effects
• 📌 Multiple indicator positions (top, center, bottom)
• 🖌️ Custom painter support
• ↔️ RTL support
• 🎚️ Fully customizable colors and sizes
• 🔧 Flexible icon configuration

Examples 🛠

Ultimate Example 🔥 Showcase all features in one:

SuperAnimatedNavBar(
  currentIndex: _currentIndex,
  indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.wave,
    indeicatorColor: Colors.deepPurple.shade900,
    glowEnable: true,
    glowColor: Colors.deepPurple,
    glowRadius: 24,
    indicatorPosition: IndicatorPosition.bottom,
    curve: Curves.easeInOutBack,
    animateDuration: const Duration(milliseconds: 800),
  ),
  items: [
    NavigationBarItem(
      selectedIcon: Icon(Icons.home_filled,
          size: 28, color: Colors.deepPurple.shade900),
      unSelectedIcon: Icon(Icons.home_outlined,
          size: 28, color: Colors.deepPurple.shade900),
    ),
    NavigationBarItem(
      selectedIcon:
          Icon(Icons.star, size: 28, color: Colors.deepPurple.shade900),
      unSelectedIcon: Icon(Icons.star_border,
          size: 28, color: Colors.deepPurple.shade900),
    ),
    NavigationBarItem(
      selectedIcon: Icon(Icons.shopping_cart,
          size: 28, color: Colors.deepPurple.shade900),
      unSelectedIcon: Icon(Icons.shopping_cart_outlined,
          size: 28, color: Colors.deepPurple.shade900),
    ),
  ],
  onTap: (index) => setState(() => _currentIndex = index),
  barHeight: 70,
  backgroundColor: Colors.grey.shade100,
)

 indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.lamp,
    indicatorPosition: IndicatorPosition.bottom,
    ),

 indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.lamp,
    indicatorPosition: IndicatorPosition.top,
    ),

 indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.none,
    ),

Custom Indicator Example 🎨 Using custom painter:

class MyStarIndicator extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // ... draw a star shape
  }
  @override bool shouldRepaint(covariant CustomPainter old) => false;
}

// Usage:
SuperAnimatedNavBar(
  currentIndex: _currentIndex,
  indeicatorDecoration: IndeicatorDecoration(
    indeicator: MyStarIndicator(), //this will override the built in indeicator
    indeicatorColor: Colors.amber,
    indicatorPosition: IndicatorPosition.top,
  ),
  items: [
    NavigationBarItem(
      selectedIcon: Icon(Icons.home_filled, size: 28, color: Colors.deepPurple),
      unSelectedIcon: Icon(Icons.home_outlined, size: 28),
    ),
     NavigationBarItem(
      selectedIcon: Icon(Icons.star, size: 28, color: Colors.amber),
      unSelectedIcon: Icon(Icons.star_outline, size: 28),
    ),
    // more items...
  ],
  onTap: (index) => setState(() => _currentIndex = index),
)

Center Background Indicator Example ⚡ Using indicator as icon background:

SuperAnimatedNavBar(
  currentIndex: _currentIndex,
  indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.circle,
    indicatorPosition: IndicatorPosition.center, // works as icon background
    indeicatorColor: Colors.blue.shade600,
    ),
    items: [
     NavigationBarItem(
       selectedIcon: const Icon(Icons.home_filled,
           size: 28, color: Colors.deepPurple),
       unSelectedIcon: const Icon(Icons.home_outlined, size: 28),
     ),
     NavigationBarItem(
       selectedIcon: const Icon(Icons.shopping_cart_rounded,
           size: 28, color: Colors.deepPurple),
       unSelectedIcon:
           const Icon(Icons.shopping_cart_outlined, size: 28),
     ),
     NavigationBarItem(
       selectedIcon:
           const Icon(Icons.star, size: 28, color: Colors.deepPurple),
       unSelectedIcon: const Icon(Icons.star_outline, size: 28),
     ),
    // more items...
  ],
  onTap: (index) => setState(() => _currentIndex = index),
)

Support 🙏

If you find Super Animated Navigation Bar useful, please consider giving it a 👍 — it helps others discover the package and motivates further development!

Customization Options 🛠

Property	Description	Default
indicatorType	Built-in indicator style	IndicatorType.wave
indeicatorColor	Primary indicator color	Colors.blue
glowEnable	Enable halo glow effect	false
glowColor	Glow effect color	Colors.blue
indicatorPosition	Position relative to icons	IndicatorPosition.bottom
animateDuration	Animation duration	500ms