Muzammil-Bit/dot_curved_bottom_nav

Stunning Curved Bottom Navigation

Title Image

Preview

Preview

Optional Hide On Scroll

Preview

Getting Started

Add the dependency at pubspec.yaml:

dependencies:
  dot_curved_bottom_nav: ^0.0.1

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,
    ),
    ],
),

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:

1. 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.