category_navigator 1.1.5
category_navigator: ^1.1.5 copied to clipboard
A flutter ui package for cool navigation bar with a lot of customization options
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.