fancy_bottom_navigation_plus

A highly customizable, smooth, and animated bottom navigation bar for Flutter. The icon animates elegantly into place when selected, providing a premium feel to your application UI.

🚀 Key Features

Smooth Animation: Iconic "bubble-up" animation for active tabs.
Highly Customizable: Change colors, sizes, and styles to match your brand.
Easy Theming: Inherits from your app's ThemeData automatically.
Lightweight: Minimal dependencies, focus on performance.
Responsive: Adapts perfectly to different screen sizes.

📸 Preview

Fancy Animation

📦 Installation

Add the dependency to your pubspec.yaml:

flutter pub add fancy_bottom_navigation_plus

Or manually:

dependencies:
  fancy_bottom_navigation_plus: ^1.0.3

🛠️ Basic Usage

import 'package:fancy_bottom_navigation_plus/fancy_bottom_navigation_plus.dart';

// ... inside your Scaffold
bottomNavigationBar: FancyBottomNavigationPlus(
    tabs: [
        TabData(icon: Icon(Icons.home), title: "Home"),
        TabData(icon: Icon(Icons.history), title: "History"),
        TabData(icon: Icon(Icons.search), title: "Search"),
        TabData(icon: Icon(Icons.settings), title: "Settings"),
    ],
    onTabChangedListener: (position) {
        setState(() {
            currentPage = position;
        });
    },
)

⚙️ Properties & Customization

FancyBottomNavigationPlus

Property	Description	Default
`tabs`	List of `TabData` objects (Required)	-
`onTabChangedListener`	Callback function when active tab changes (Required)	-
`initialSelection`	The index of the initially selected tab	`0`
`circleColor`	Color of the floating circle	`Theme.primaryColor`
`activeIconColor`	Color of the icon when active	`Theme.canvasColor`
`inactiveIconColor`	Color of the icon when inactive	`Theme.primaryColor`
`textColor`	Color of the tab title text	`Theme.primaryColor`
`barBackgroundColor`	Background color of the navigation bar	`Theme.canvasColor`
`barHeight`	Total height of the navigation bar	`60.0`
`circleRadius`	Radius of the animated circle	`60.0`
`shadowRadius`	Radius of the shadow behind the bar	`10.0`
`circleOutline`	Width of the circle's outline	`10.0`
`titleStyle`	`TextStyle` for the tab titles	-

TabData

Property	Description
`icon`	The icon `Widget` to display (Required)
`title`	The label `String` for the tab (Required)
`onClick`	Optional callback when the active tab circle is clicked
`activeIconColor`	Optional color for the icon when the tab is active
`inactiveIconColor`	Optional color for the icon when the tab is inactive

🎨 Theming

The bar attempts to use your current ThemeData out of the box. You can override specific colors globally using your theme or locally via the widget's properties.

ThemeData(
  primaryColor: Colors.deepPurple,
  canvasColor: Colors.white,
)

☕ Support the Project

If you find this package helpful, consider supporting the development!

💡 Inspiration

This package is an enhanced version of the original fancy_bottom_navigation.

🐛 Issues & Contributing

Found a bug or have a feature request? Please raise an issue. Contributions are welcome! If you'd like to help improve the package, please follow the steps below.

🤝 How to Contribute

Fork the repository: Click the Fork button at the top right of the GitHub page.

Clone your fork:

git clone https://github.com/YOUR_USERNAME/fancy_bottom_navigation_plus.git

Create a new branch:

git checkout -b feature/your-feature-name

Make your changes: Ensure your code is well-documented (using DartDoc) and follows the project's style.
Commit your changes:
```
git commit -m "Add some feature"
```

Push to your fork:

git push origin feature/your-feature-name

Submit a Pull Request: Go to the original repository and click New Pull Request. Describe your changes clearly!

Fancy Bottom Navigation Plus