dot_curved_bottom_nav

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.