super_animated_navigation_bar 1.0.0

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

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:super_animated_navigation_bar/super_animated_navigation_bar.dart';

void main() {
  runApp(const MyApp());
}

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[300],
        body: Center(child: Text('Page $_currentIndex')),
        bottomNavigationBar: SuperAnimatedNavBar(
          currentIndex: _currentIndex,
          indeicatorDecoration: IndeicatorDecoration(
            indicatorType: IndicatorType.lamp,
            indicatorPosition: IndicatorPosition.top,
          ),
          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,
        ),
      ),
    );
  }
}