clickable_animated_bottom_nav_bar 0.0.4

A customizable animated bottom navigation bar for Flutter.

🌀 Animated Bottom Nav Bar

A beautiful and customizable animated bottom navigation bar for Flutter, built using the flutter_animate package.
It provides smooth scale and elevation effects when switching between tabs.

---

🎥 Preview

---

🚀 Installation

Add this to your pubspec.yaml:

dependencies:
clickable_animated_bottom_nav_bar: ^0.0.4

Then run:

flutter pub get

Import the package:

import 'package:clickable_animated_bottom_nav_bar/animated_bottom_nav_bar.dart';

---

💡 Usage Example

import 'package:flutter/material.dart';
import 'package:clickable_animated_bottom_nav_bar/animated_bottom_nav_bar.dart';

class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});

@override
State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
int currentIndex = 0;

final List<Widget> pages = const [
 Center(child: Text("🏠 Home")),
 Center(child: Text("❤️ Favorites")),
 Center(child: Text("👤 Profile")),
];

@override
Widget build(BuildContext context) {
 return Scaffold(
   body: pages[currentIndex],
   bottomNavigationBar: AnimatedBottomNavBar(
     icons: const [Icons.home, Icons.favorite, Icons.person],
     currentIndex: currentIndex,
     onTap: (index) => setState(() => currentIndex = index),
     backgroundColor: Colors.white,
     iconActiveColor: Colors.blue,
     iconInactiveColor: Colors.grey,
     containerActiveColor: Colors.blue.withOpacity(0.1),
     height: 65,
     margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
   ),
 );
}
}

---

⚙️ Parameters

Parameter	Type	Description
icons	List<IconData>	List of icons displayed in the bottom bar.
currentIndex	int	Currently selected tab index.
onTap	ValueChanged<int>	Callback when a tab is tapped.
backgroundColor	Color?	Background color of the navigation bar.
iconActiveColor	Color	Color of the active icon. (default: blue)
iconInactiveColor	Color	Color of inactive icons. (default: grey)
containerActiveColor	Color	Background color for the active item.
height	double	Height of the navigation bar. (default: 60)
margin	EdgeInsetsGeometry	Margin around the navigation bar.

---