custom_navigation_bar 0.2.1 copy "custom_navigation_bar: ^0.2.1" to clipboard
custom_navigation_bar: ^0.2.1 copied to clipboard

outdated

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

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.1

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...
492
likes
0
pub points
96%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on custom_navigation_bar