A custom navigation bar with bubble click effect in Flutter

  Menu, Navigation, Navigation bar, UI

custom_navigation_bar

A custom navigation bar with bubble click effect.

Overview

This project is inspired by this post from Dribbble and The Boring Flutter Development Show, Ep. 35

This package gives you a cute bubble effect when you click on the navigation bar.

Dribbble:

Implemented:

Gallery

How to install

Add this to your package’s pubspec.yaml file:

dependencies:
  custom_navigation_bar: ^0.3.0

Documentation

You can customize these attributes in the navigation bar.

AttributesTypeDescriptionDefault
scaleFactordoublescale factor for the icon scale animation.0.2
elevationdoubleThe z-coordinate of this CustomNavigationBar8.0
itemsListitem data in CustomNavigationBarrequired
selectedColorColor[Color] when [CustomNavigationBarItem] is selected[blueAccent]
unSelectedColorColor[Color] when [CustomNavigationBarItem] is not selected.grey[600]
onTapFunction(int)callback function when item tappednull
currentIndexintcurrent index of navigation bar.0
iconSizedoublesize of icon. also represent the max radius of bubble effect animation.24.0
backgroundColorColorBackground color of [CustomNavigationBar]Colors.white
strokeColorColorstroke colorblueAccent
bubbleCurveCurveanimation curve of bubble effectlinear
scaleCurveCurveanimation curve of scale effectlinear
borderRadiusRadiusborder radius of navigation barRadius.zero
isFloatingboolcontrol if CustomNavigationBar is floatingfalse

And for customize icon in the navigation bar, just put the icons you want in the CustomNavigationBarItem like this.

CustomNavigationBar(
        ...
        items: [
          CustomNavigationBarItem(
            icon: Icons.home,
          ),
          CustomNavigationBarItem(
            icon: Icons.shopping_cart,
          ),
          CustomNavigationBarItem(
            icon: Icons.lightbulb_outline,
          ),
          CustomNavigationBarItem(
            icon: Icons.search,
          ),
          CustomNavigationBarItem(
            icon: Icons.account_circle,
          ),
        ],
        ...
      )

Attention: If you set isFloating to true, I would recommand you to set extendBody to true in Scaffold for a better performance.

Example

Check example app for more details.

Future Plans

  •  Code format
  •  Make it more like native navigation bar in Flutter.
  •  Better documentation
  •  More customizations!! And more…

Download custom navigation bar ui source code on GitHub

https://github.com/rickywen911/custom_bubble_navigation_bar