Thursday 17 September 2020

A custom navigation bar with bubble click effect in Flutter

 

custom_navigation_bar

A custom navigation bar with bubble click effect.

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

Dribbble:

68747470733a2f2f63646e2e6472696262626c652e636f6d2f75736572732f323131343538342f73637265656e73686f74732f373133343834392f6d656469612f39366534613630303261343736626164376264383039616337316532383639382e676966
Implemented:

screenshot

1--1-

2--1-

3--1-

4--1-

5--1-

6--1-

How to install

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

dependencies:
  custom_navigation_bar: ^0.3.0
YAML

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,
          ),
        ],
        ...
      )
Dart

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

  • [x] Code format
  • [x] Make it more like native navigation bar in Flutter.
  • [x] Better documentation
  • [ ] More customizations!!

GitHub

A custom navigation bar with bubble click effect in Flutter — Read More

Latest commit to the master branch on 9-16-2020
Download as zip