CNav

A custom navigation bar a.k.a CNav with bubble click effect.

pub package License: MIT GitHub stars GitHub forks GitHub issues

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:
  cnav: <latest version>

Documentation

CNavItem(
      {@required this.icon,
      Widget selectedIcon,
      this.title,
      Text selectedTitle,
      this.badgeCount = 0,
      this.showBadge = false})
      : selectedIcon = selectedIcon ?? icon,
        selectedTitle = selectedTitle ?? title;

  ///
  /// The icon of the item
  /// Typically the icon is an [Icon].
  ///

  final Widget icon;      

You can customize these attributes in the navigation bar.

AttributesTypeDescriptionDefault
scaleFactordoublescale factor for the icon scale animation.0.2
elevationdoubleThe z-coordinate of this CNav8.0
itemsListitem data in CNavrequired
selectedColorColorColor when CNavItem is selectedblueAccent
unSelectedColorColorColor when CNavItem is not selected.grey600
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 CNavColors.white
strokeColorColorstroke colorblueAccent
bubbleCurveCurveanimation curve of bubble effectlinear
scaleCurveCurveanimation curve of scale effectlinear
borderRadiusRadiusborder radius of navigation barRadius.zero
isFloatingboolcontrol if CNav is floatingfalse
blurEffectboolcontrol if CNav show blur effectfalse
opacitydoublecontrol CNav blur effect opacity when blurEffect is true0.8

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

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

CNav(
        ...
        items: [
          CNavItem(
          icon: Icon(Icons.home),
          title: Text("hello"),
        ),
        CNavItem(
          icon: Icon(Icons.shopping_cart),
        ),
        CNavItem(
          icon: Icon(Icons.lightbulb_outline),
        ),
        CNavItem(
          icon: Icon(Icons.search),
        ),
        CNavItem(
          icon: Icon(Icons.account_circle),
        ),
        ],
        ...
      )

If you want add notification badge, just use like this

CNav(
        ...
        items: [
        CNavItem(
          icon: Icon(Icons.home),
          badgeCount: _badgeCounts[0],
          showBadge: _badgeShows[0],
        ),
        CNavItem(
          icon: Icon(Icons.shopping_bag),
          badgeCount: _badgeCounts[1],
          showBadge: _badgeShows[1],
        ),
        CNavItem(
          icon: Icon(Icons.lightbulb_outline),
          badgeCount: _badgeCounts[2],
          showBadge: _badgeShows[2],
        ),
        CNavItem(
          icon: Icon(Icons.search),
          badgeCount: _badgeCounts[3],
          showBadge: _badgeShows[3],
        ),
        CNavItem(
          icon: Icon(Icons.account_circle),
          badgeCount: _badgeCounts[4],
          showBadge: _badgeShows[4],
        ),
      ],
        ...
      )

To clear a badge, set showBadge to false

If you want add title under icon, just use like this

CNav(
      iconSize: 30.0,
      selectedColor: Color(0xff040307),
      strokeColor: Color(0x30040307),
      unSelectedColor: Color(0xffacacac),
      backgroundColor: Colors.white,
      items: [
        CNavItem(
          icon: Icon(Icons.home),
          title: Text("Home"),
        ),
        CNavItem(
          icon: Icon(Icons.shopping_cart),
          title: Text("Cart"),
        ),
        CNavItem(
          icon: Icon(Icons.lightbulb_outline),
          title: Text("Explore"),
        ),
        CNavItem(
          icon: Icon(Icons.search),
          title: Text("Search"),
        ),
        CNavItem(
          icon: Icon(Icons.account_circle),
          title: Text("Me"),
        ),
      ],
      currentIndex: _currentIndex,
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
    );

Example

Check example app for more details.

Contribute

Issues and pull requests are welcomed!!

Future Plans

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

Libraries

cnav