custom_bottom_nav 1.0.2+2
custom_bottom_nav: ^1.0.2+2 copied to clipboard
A customizable bottom navigation bar with animated transitions.
Custom Bottom Navigation Bar #
A customizable bottom navigation bar widget for Flutter with animated transitions between navigation items.
[Custom Bottom Navigation Bar Demo]
Installation #
Add the following to your pubspec.yaml
file:
dependencies:
custom_bottom_nav: ^1.0.0
Usage #
Import the package in your Dart code:
import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_bar.dart';
Use CustomBottomNavigationBar and CustomNavItem widgets in your app:
Please don't forget to extend TickerProviderStateMixin
in your
It helps you to add animation to your navigation bar
HomePage state class.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{
int _currentIndex = 0;
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Bottom Navigation Bar Example'),
),
body: Center(
child: Text(
'Current Page: $_currentIndex',
style: TextStyle(fontSize: 24),
),
),
bottomNavigationBar: CustomBottomNavigationBar(
currentIndex: _currentIndex,
onTabTapped: onTabTapped,
items: [
CustomNavItem(icon: Icons.home, label: "Home"),
CustomNavItem(icon: Icons.search, label: "Search"),
CustomNavItem(icon: Icons.person, label: "Profile"),
CustomNavItem(icon: Icons.settings, label: "Settings"),
CustomNavItem(icon: Icons.more_horiz, label: "More"),
],
vsync: this,
),
);
}
}
Customization Options #
- Animation Types: Choose from slide, fade, or scale animations for navigation items.
- Icon and Label Styling: Customize the appearance of icons and labels based on selected and unselected states.
- Navigation Callback: Implement a callback function to handle navigation item taps.
Examples #
Slide Animation #
CustomBottomNavigationBar(
currentIndex: _currentIndex,
onTabTapped: onTabTapped,
items: [
CustomNavItem(icon: Icons.home, label: "Home"),
CustomNavItem(icon: Icons.search, label: "Search"),
CustomNavItem(icon: Icons.person, label: "Profile"),
CustomNavItem(icon: Icons.settings, label: "Settings"),
CustomNavItem(icon: Icons.more_horiz, label: "More"),
],
)
Fade Animation #
CustomBottomNavigationBar(
currentIndex: _currentIndex,
onTabTapped: onTabTapped,
items: [
CustomNavItem(icon: Icons.home, label: "Home"),
CustomNavItem(icon: Icons.search, label: "Search"),
CustomNavItem(icon: Icons.person, label: "Profile"),
CustomNavItem(icon: Icons.settings, label: "Settings"),
CustomNavItem(icon: Icons.more_horiz, label: "More"),
],
animType: AnimationType.fade,
)
Scale Animation #
CustomBottomNavigationBar(
currentIndex: _currentIndex,
onTabTapped: onTabTapped,
items: [
CustomNavItem(icon: Icons.home, label: "Home"),
CustomNavItem(icon: Icons.search, label: "Search"),
CustomNavItem(icon: Icons.person, label: "Profile"),
CustomNavItem(icon: Icons.settings, label: "Settings"),
CustomNavItem(icon: Icons.more_horiz, label: "More"),
],
animType: AnimationType.scale,
)
Author #
License #
This project is licensed under the MIT License. See the LICENSE file for details.