rotary_navbar

Description:

rotary navbar

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.3
copied to clipboard
Then run:
$ flutter pub get
copied to clipboard
Usage #
Import the package in your Dart file:
import 'package:rotary_navbar/rotary_navbar.dart';
copied to clipboard
Implement the RotaryNavBar in your widget tree:
Scaffold(
body: YourPageContent(),
bottomNavigationBar: RotaryNavBar(
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
},
),
)
copied to clipboard
Customization #
The RotaryNavBar widget offers various customization options:



Parameter
Type
Default
Description




items
List<NavBarItem>
Required
List of navigation items


backgroundColor
Color
Colors.black
Background color of the navbar


selectedItemColor
Color
Color(0xFF7C4DFF)
Color of the selected item


unselectedItemColor
Color
Colors.grey
Color of unselected items


arcRadius
double
95.0
Radius of the curved arc


height
double
96.0
Height of the navigation bar


itemSpacing
double
0.35
Spacing between items (as a fraction of screen width)


onItemSelected
ValueChanged<int>
null
Callback function when an item is selected



Example #
Here's a more detailed example of how to use RotaryNavBar:
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('RotaryNavBar Demo')),
body: _pages[_selectedIndex],
bottomNavigationBar: RotaryNavBar(
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;
});
},
),
);
}
}
copied to clipboard
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.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter