Skip to content
Related Articles

Related Articles

Flutter – Water Drop Navigation Bar

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 13 Jun, 2022
View Discussion
Improve Article
Save Article

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 → OnButtonPressCallbackCallback When individual barItem is pressed.
required
selectedIndex → intCurrent selected index of the bar item.
required
 
backgroundColor → ColorBackground Color of the bar.
optional [Colors.white]
waterDropColor → ColorColor of water drop which is also the active icon color.
optional [Color(0xFF5B75F0)]
inactiveIconColor → ColorInactive icon color by default it will use water drop color.
optional [waterDropColor]
bottomPadding → doubleAdditional padding at the bottom of the bar. If nothing is provided the it will use [MediaQuery.of(context).padding.bottom] value.
optional
iconSize → doubleEach 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) {
    // MaterailApp 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!