<!--
This README describes the package. If you publish this package to pub.dev,
this README's contents appear on the landing page for your package.

For information about how to write a good package README, see the guide for
[writing package pages](https://dart.dev/tools/pub/writing-package-pages).

For general information about developing packages, see the Dart guide for
[creating packages](https://dart.dev/guides/libraries/create-packages)
and the Flutter guide for
[developing packages and plugins](https://flutter.dev/to/develop-packages).
-->
# 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`:
```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:
![Demo Animation](https://gitlab.com/MuhammedKhalid/super_animated_nav_bar/-/raw/main/assets/glow_indecator.gif)
```dart
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,
)
```

![Demo Animation](https://gitlab.com/MuhammedKhalid/super_animated_nav_bar/-/raw/main/assets/lamb_indecator.gif)
```dart
 indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.lamp,
    indicatorPosition: IndicatorPosition.bottom,
    ),
```

![Demo Animation](https://gitlab.com/MuhammedKhalid/super_animated_nav_bar/-/raw/main/assets/top_lamb_indecator.gif)
```dart
 indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.lamp,
    indicatorPosition: IndicatorPosition.top,
    ),
```

![Demo Animation](https://gitlab.com/MuhammedKhalid/super_animated_nav_bar/-/raw/main/assets/no_indecator.gif)
```dart
 indeicatorDecoration: IndeicatorDecoration(
    indicatorType: IndicatorType.none,
    ),
```

Custom Indicator Example 🎨
Using custom painter:

```dart
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:

![Demo Animation](https://gitlab.com/MuhammedKhalid/super_animated_nav_bar/-/raw/main/assets/center_indecator.gif)
```dart
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`                    |

