Flutter – Water Drop Navigation Bar
BottomNavigationBar widget provides extra links to navigate between different views. When an item is tapped, the onTap callback is invoked with an index of the tapped item. Depending on the number of items, there can be different ways to show these items. In the Waterdrop Bottom navigation bar, it has a unique water drop effect. When a water droplet falls it marks the selected item. A sample video is given below to get an idea about what we are going to do in this article.
Step by Step Implementation
Adding dependency into the pubspec.yaml file
Don’t forget to get the packages.
Add this line to import the package
Properties of Water Drop NavigationBar
|barItems → List<BarItem>||List of bar items that shows horizontally, Minimum 2 and maximum 4 items.|
|onItemSelected → OnButtonPressCallback||Callback When individual barItem is pressed.|
|selectedIndex → int||Current selected index of the bar item.|
|backgroundColor → Color||Background Color of the bar.|
|waterDropColor → Color||Color of water drop which is also the active icon color.|
|inactiveIconColor → Color||Inactive icon color by default it will use water drop color.|
|bottomPadding → double||Additional padding at the bottom of the bar. If nothing is provided the it will use [MediaQuery.of(context).padding.bottom] value.|
|iconSize → double||Each active & inactive icon size, default value is 28 don’t make it too big or small.|
How to use it?
Add WaterDropNavBar() as bottomNavigationBar of Scaffold() and body would be PageView() with NeverScrollableScrollPhysics() don’t try to update the selected index from onPageChanged or will see some weird behaviour. Instead of PageView() You can use Stack() or AnimatedSwitcher for custom page transition animation.
How to add drop shadow?
Wrap WaterDropNavBar with DecoratedBox or Container and pass BoxDecoration to decoration property. BoxDecoration takes a list of boxShadow there you can pass your drop shadow.
How to change the corner radius of the navigation bar?
Wrap WaterDropNavBar with ClipRRect and pass BorderRadius to borderRadius property.