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

Output