custom_navigation_bar 0.2.4

A custom navigation bar with bubble click effect. Inspired by The Boring Flutter Development Show EP. 35.

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:

How to install

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

dependencies:
  custom_navigation_bar: ^0.2.4

Documentation

You can customize these attributes in the navigation bar.

Attributes	Type	Description	Default
scaleFactor	double	scale factor for the icon scale animation.	0.2
elevation	double	The z-coordinate of this CustomNavigationBar	8.0
items	List	item data in CustomNavigationBar	required
selectedColor	Color	[Color] when [CustomNavigationBarItem] is selected	[blueAccent]
unSelectedColor	Color	[Color] when [CustomNavigationBarItem] is not selected.	grey[600]
onTap	Function(int)	callback function when item tapped	null
currentIndex	int	current index of navigation bar.	0
iconSize	double	size of icon. also represent the max radius of bubble effect animation.	24.0
backgroundColor	Color	Background color of [CustomNavigationBar]	Colors.white
strokeColor	Color	stroke color	blueAccent
bubbleCurve	Curve	animation curve of bubble effect	linear
scaleCurve	Curve	animation curve of scale effect	linear

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

Example

Check example app for more details.

Future Plans

• ✅ Code format
• ✅ Make it more like native navigation bar in Flutter.
• ❌ Better documentation
• ❌ More customizations!!
• ❌ Support Flame widget maybe?
  And more...