custom_navigation_bar 0.7.1
custom_navigation_bar: ^0.7.1 copied to clipboard

Flutter Android iOS web

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.

pub package License: MIT Star on Github Star on Github

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: lastest version

Documentation #

Attention #

If you update from version under 0.6.0, there are some breaking changes in the version 0.6.0. The icon in CustomNavigationBarItem has changed from IconData to Widget.

old version

CustomNavigationBarItem(
      {@required this.icon,
      IconData selectedIcon,
      this.selectedTitle,
      this.unSelectedTitle,
      this.badgeCount = 0,
      this.showBadge = true})
      : selectedIcon = selectedIcon ?? icon;

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

new version

CustomNavigationBarItem(
      {@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 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
blurEffectboolcontrol if CustomNavigationBar show blur effectfalse
opacitydoublecontrol CustomNavigationBar blur effect opacity when blurEffect is true0.8

Attention: If you set isFloating to true, I would recommand 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 CustomNavigationBarItem like this.

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

If you want add notification badge, just use like this

CustomNavigationBar(
        ...
        items: [
        CustomNavigationBarItem(
          icon: Icon(Icons.home),
          badgeCount: _badgeCounts[0],
          showBadge: _badgeShows[0],
        ),
        CustomNavigationBarItem(
          icon: Icon(Icons.shopping_bag),
          badgeCount: _badgeCounts[1],
          showBadge: _badgeShows[1],
        ),
        CustomNavigationBarItem(
          icon: Icon(Icons.lightbulb_outline),
          badgeCount: _badgeCounts[2],
          showBadge: _badgeShows[2],
        ),
        CustomNavigationBarItem(
          icon: Icon(Icons.search),
          badgeCount: _badgeCounts[3],
          showBadge: _badgeShows[3],
        ),
        CustomNavigationBarItem(
          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

CustomNavigationBar(
      iconSize: 30.0,
      selectedColor: Color(0xff040307),
      strokeColor: Color(0x30040307),
      unSelectedColor: Color(0xffacacac),
      backgroundColor: Colors.white,
      items: [
        CustomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text("Home"),
        ),
        CustomNavigationBarItem(
          icon: Icon(Icons.shopping_cart),
          title: Text("Cart"),
        ),
        CustomNavigationBarItem(
          icon: Icon(Icons.lightbulb_outline),
          title: Text("Explore"),
        ),
        CustomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text("Search"),
        ),
        CustomNavigationBarItem(
          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...
96
likes
110
pub points
88%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

chaoxiangwen@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on custom_navigation_bar