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
Dart
dependencies: water_drop_nav_bar: |
Don’t forget to get the packages.
Import
Add this line to import the package
Dart
import 'package:water_drop_nav_bar/water_drop_nav_bar.dart' ; |
Properties of Water Drop NavigationBar
Property |
Description |
---|---|
barItems → List<BarItem> | List of bar items that shows horizontally, Minimum 2 and maximum 4 items. required |
onItemSelected → OnButtonPressCallback | Callback When individual barItem is pressed. required |
selectedIndex → int | Current selected index of the bar item. required |
backgroundColor → Color | Background Color of the bar. optional [Colors.white] |
waterDropColor → Color | Color of water drop which is also the active icon color. optional [Color(0xFF5B75F0)] |
inactiveIconColor → Color | Inactive icon color by default it will use water drop color. optional [waterDropColor] |
bottomPadding → double | Additional padding at the bottom of the bar. If nothing is provided the it will use [MediaQuery.of(context).padding.bottom] value. optional |
iconSize → double | Each active & inactive icon size, default value is 28 don’t make it too big or small. optional [28] |
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.
Dart
DecoratedBox( decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.2), offset: Offset(0, 4), blurRadius: 8.0) ], ), child: WaterDropNavBar() ) |
How to change the corner radius of the navigation bar?
Wrap WaterDropNavBar with ClipRRect and pass BorderRadius to borderRadius property.
Dart
ClipRRect( borderRadius: const BorderRadius.vertical( top: Radius.circular(16), ), child: WaterDropNavBar( ) |
Code Example
Dart
import 'package:flutter/material.dart' ; import 'package:water_drop_nav_bar/water_drop_nav_bar.dart' ; // main method that runs the myapp application void main() { runApp( const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // MaterialApp with debugShowCheckedModeBanner false and title return MaterialApp( title: 'Water Drop Nav Bar' , debugShowCheckedModeBanner: false , theme: ThemeData( primarySwatch: Colors.teal, ), // MyHomePage as a home property home: MyHomePage(), ); } } // MyHomePage class class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final Color navigationBarColor = Colors.red; int selectedIndex = 0; late PageController pageController; @override void initState() { super.initState(); pageController = PageController(initialPage: selectedIndex); } @override Widget build(BuildContext context) { // [AnnotatedRegion<SystemUiOverlayStyle>] only for android // black navigation bar. 3 button navigation control (legacy) return Scaffold( body: PageView( physics: const NeverScrollableScrollPhysics(), controller: pageController, children: [ Container( alignment: Alignment.center, child: Text( "Page 1" ), ), Container( alignment: Alignment.center, child: Text( "Page 2" ), ), Container( alignment: Alignment.center, child: Text( "Page 3" ), ), Container( alignment: Alignment.center, child: Text( "Page 4" ), ), ], ), bottomNavigationBar: DecoratedBox( decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.2), offset: Offset(0, 4), blurRadius: 8.0) ], ), // waterdrop widget to show the drop effect child: WaterDropNavBar( backgroundColor: navigationBarColor, onItemSelected: ( int index) { setState(() { selectedIndex = index; }); pageController.animateToPage(selectedIndex, duration: const Duration(milliseconds: 400), curve: Curves.easeOutQuad); }, selectedIndex: selectedIndex, // nav bar items barItems: <BarItem>[ BarItem( filledIcon: Icons.home_rounded, outlinedIcon: Icons.home_outlined, ), BarItem( filledIcon: Icons.phone_android_rounded, outlinedIcon: Icons.phone_android_outlined), BarItem( filledIcon: Icons.trending_flat_rounded, outlinedIcon: Icons.trending_flat_outlined, ), BarItem( filledIcon: Icons.favorite_rounded, outlinedIcon: Icons.favorite_border_rounded), ], ), )); } } |