rotary_navbar 1.0.2
rotary_navbar: ^1.0.2 copied to clipboard
A customizable navigation bar with a curved design for Flutter applications.Which also rotates
CustomNavBar #
A sleek, customizable navigation bar with a curved design for Flutter applications.

Features #
- 🌊 Elegant curved design with customizable arc radius
- 🎨 Fully customizable colors for background, selected and unselected items
- 📐 Adjustable height and item spacing
- 🚀 Smooth animations when switching between items
- 🧩 Easy to integrate and customize
Installation #
Add this to your package's pubspec.yaml file:
dependencies:
rotary_navbar: ^1.0.0
Then run:
$ flutter pub get
Usage
Import the package in your Dart file:
import 'package:rotary_navbar/rotary_navbar.dart';
Implement the CustomNavBar in your widget tree:
Scaffold(
body: YourPageContent(),
bottomNavigationBar: CustomNavBar(
items: [
NavBarItem(icon: Icons.home, label: 'Home'),
NavBarItem(icon: Icons.search, label: 'Search'),
NavBarItem(icon: Icons.person, label: 'Profile'),
NavBarItem(icon: Icons.settings, label: 'Settings'),
],
onItemSelected: (index) {
// Handle item selection
},
),
)
Customization
The CustomNavBar widget offers various customization options:
ParameterTypeDefaultDescriptionitemsList<NavBarItem>RequiredList of navigation itemsbackgroundColorColorColors.blackBackground color of the navbarselectedItemColorColorColor(0xFF7C4DFF)Color of the selected itemunselectedItemColorColorColors.greyColor of unselected itemsarcRadiusdouble95.0Radius of the curved archeightdouble96.0Height of the navigation baritemSpacingdouble0.35Spacing between items (as a fraction of screen width)onItemSelectedValueChanged<int>nullCallback function when an item is selected
Example
Here's a more detailed example of how to use CustomNavBar:
import 'package:flutter/material.dart';
import 'package:custom_nav_bar/custom_nav_bar.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
final List<Widget> _pages = [
Center(child: Text('Home Page')),
Center(child: Text('Search Page')),
Center(child: Text('Profile Page')),
Center(child: Text('Settings Page')),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('CustomNavBar Demo')),
body: _pages[_selectedIndex],
bottomNavigationBar: CustomNavBar(
items: [
NavBarItem(icon: Icons.home, label: 'Home'),
NavBarItem(icon: Icons.search, label: 'Search'),
NavBarItem(icon: Icons.person, label: 'Profile'),
NavBarItem(icon: Icons.settings, label: 'Settings'),
],
backgroundColor: Colors.black,
selectedItemColor: Colors.blue,
unselectedItemColor: Colors.grey,
arcRadius: 95,
height: 96,
itemSpacing: 0.35,
onItemSelected: (index) {
setState(() {
_selectedIndex = index;
});
},
),
);
}
}
For a complete example, please check the example folder in the package repository.
Contributing
Contributions are welcome! If you find a bug or want a feature, please open an issue.
License
This project is licensed under the MIT License - see the LICENSE file for details.