GitLocker: The Coding Marketplace

Description:

dot curved bottom nav

Stunning Curved Bottom Navigation #

Preview #

Optional Hide On Scroll #

Getting Started #
Add the dependency at pubspec.yaml:
dependencies:
dot_curved_bottom_nav: ^0.0.1
copied to clipboard
Basic Usage #
bottomNavigationBar: DotCurvedBottomNav(
scrollController: _scrollController,
hideOnScroll: true,
indicatorColor: Colors.blue,
backgroundColor: Colors.black,
animationDuration: const Duration(milliseconds: 300),
animationCurve: Curves.ease,
selectedIndex: _currentPage,
indicatorSize: 5,
borderRadius: 25,
height: 70,
onTap: (index) {
setState(() => _currentPage = index);
},
items: [
Icon(
Icons.home,
color: _currentPage == 0 ? Colors.blue : Colors.white,
),
Icon(
Icons.notification_add,
color: _currentPage == 1 ? Colors.blue : Colors.white,
),
Icon(
Icons.color_lens,
color: _currentPage == 2 ? Colors.blue : Colors.white,
),
Icon(
Icons.person,
color: _currentPage == 3 ? Colors.blue : Colors.white,
),
],
),
copied to clipboard
Properties #

Property
Description

scrollController
Used to listen when the user scrolls and hides the bottom navigation

hideOnScroll
Used to enable or disable hide on scroll behavior. (NOTE: scrollController must be provided when hideOnScroll is TRUE)

indicatorColor
Color of the indicator displayed on currently selected item

backgroundColor
Configures the background color of the bottom navigation

animationDuration
Configures animation duration of hiding and indicator movement between items

animationCurve
Configures curve of the animation of indicator movement and hide on scroll animation

selectedIndex
Configures currently selected item / page

indicatorSize
Configures the size of indicator displayed on top of the item

borderRadius
Configures border radius of border DotCurvedBottomNav

height
Configures height of DotCurvedBottomNav

onTap
Configures callback function that is invoked whenever user taps on an item

items
Configures list of items of bottom nav

TODO: #

Add More Indicator shapes e.g diamond shape with diamond cut out and more.

Contributions #
Feel free to create an issue if you find a bug or if you need new features. Of course PRs are welcome!
If you want to connect with me on LinkedIn: Muzammil Hussain

If you like this work, please consider 👍 the package and ⭐ the repo. It is appreciated.