Category Navigator
A flutter ui package for cool navigation bar with a lot of customization options
Features
- navigation bar customization like color, elevation, shape, border radius, axis, etc
- unselected and highlighted item customization like background color, text color, shape, shadow, elevation, etc
- animate to default active item
- can use icons, or labels, or both
Check out changelog for updates on features and fixes.
Getting started
To start using this package, add category_navigator
dependency to your pubspec.yaml
dependencies:
category_navigator: "<latest_release>"
Usage
Here's a basic example to get started with the package.
final List<String> itemsList = const ['All', 'Android', 'ML', 'Python', 'Flutter', 'Text', 'iOS', 'Web', 'Windows'];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CategoryNavigator(
items: itemsList,
navigatorController: NavigatorController(),
scrollController: ScrollController(),
onChange: (value) {}
)
)
));
}
To get the navigator's current position at any time, initialize an object using NavigatorController()
, pass the controller object to navigatorController
parameter of the constructor and then use _navigatorController.activeItemIndex
to get the selected item's index
Take a look at code examples.
CategoryNavigator parameters
labels
and icons
paramters both cannot be null
, you have to provide atleast one of them.
Additional parameters include all the parameters of CategoryNavigatorItem class. See CategoryNavigatorItem parameters for more details.
S. No. | Parameter | Description | Value Type | Default Value |
---|---|---|---|---|
1 | labels | List of strings to display in the navigation menu | List<String> | optional |
2 | icons | List of icons to display in the navigation menu | List<IconData> | optional |
3 | expand | Whether the navigation menu should expand in direction of axis | bool | true |
4 | scrollController | An instance of the ScrollController class to handle the scrolling of navigation bar | ScrollController? | optional |
5 | navigatorController | An instance of the NavigatorController class to handle the active item | NavigatorController? | optional |
6 | defaultActiveItem | Index of the default active item in the list | int | 0 |
7 | navigatorBackgroundColor | Background color of the navigation bar | Color | Colors.black |
8 | margin | Margin around the navigation bar | EdgeInsets | EdgeInsets.symmetric(horizontal: 16) |
9 | padding | Padding inside the navigator | EdgeInsets | EdgeInsets.symmetric(horizontal: 8.0, vertical: 0) |
10 | axis | Axis direction of the navigation bar | Axis | Axis.horizontal |
11 | shape | Shape of the navigation bar | ShapeBorder | RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))) |
12 | navigatorElevation | Elevation of the navigator bar | int | 5 |
CategoryNavigatorItem parameters
labels
and iconData
paramters both cannot be null
, you have to provide atleast one of them.
S. No. | Parameter | Description | Value Type | Default Value |
---|---|---|---|---|
1 | label | String to display in the navigation menu | String? | optional |
2 | iconData | Icon to display in the navigation menu | IconData? | optional |
3 | navigatorController | An instance of the NavigatorController class to handle the active item | NavigatorController? | optional |
4 | highlightBackgroundColor | Background color of the highlighted item | Color | Colors.white |
5 | unselectedBackgroundColor | Background color of the unselected item | Color | Colors.black |
6 | highlightTextStyle | Text style for the highlighted item | TextStyle | TextStyle(color: Colors.black) |
7 | unselectedTextStyle | Text style for unselected items | TextStyle | TextStyle(color: Colors.white) |
8 | shadow | Shadows for the navigation bar | List<BoxShadow> | BoxShadow(color: Colors.black) |
9 | itemElevation | Elevation of the highlighted navigation item | int | 0 |
10 | borderRadius | Border radius of the navigation items | BorderRadius | BorderRadius.all(Radius.circular(10)) |
11 | itemPadding | Padding for the navigation items | EdgeInsets | EdgeInsets.symmetric(horizontal: 12, vertical: 12) |
12 | itemMargin | Margin for the navigation items | EdgeInsets | EdgeInsets.symmetric(horizontal: 8) |
TODO
- Fix vertical navigation bar
- working on passing complete widgets as items
Bugs or Requests
If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.
License
category_navigator is licensed under MIT license
. View license.
Libraries
- Category Navigator is fully customizable ui library for navigation menu