Animated Notch Bottom Bar

A Flutter package for animating the position of selected item in bottomNavigationBar with notch like design. Inspired by react-native-tabbar-interaction plugin.

Features :

• Supports any widget as as a bottom bar children.
• Animates the notch toward selected item.
• Create an optimized bottom navigation bar with beautiful animation.
• Supports blur effect like iOS Tab View.

Getting Started

Add the dependency in pubspec.yaml:

dependencies:
  ...
  animated_notch_bottom_bar: ^1.0.0

Basic Usage

Place AnimatedNotchBottomBar in the bottomNavigationBar parameter of a Scaffold widget and provide NotchBottomBarController to AnimatedNotchBottomBar.

bottomNavigationBar:  AnimatedNotchBottomBar(
  notchBottomBarController: _controller,
  ...
)

Use any Widget as bottom bar item

You can also set any animated widget.

bottomNavigationBar:  AnimatedNotchBottomBar(
  pageController: _pageController,
  bottomBarItems: [
    const BottomBarItem(
        inActiveItem: Icon(
           Icons.home_filled,
            color: Colors.blueGrey,
        ),
        activeItem: Icon(
          Icons.home_filled,
          color: Colors.blueAccent,
        ),
        itemLabel: 'Page 1',
  ),
    const BottomBarItem(
        inActiveItem: Icon(
            Icons.star,
            color: Colors.blueGrey,
          ),
        activeItem: Icon(
            Icons.star,
            color: Colors.blueAccent,
        ),
        itemLabel: 'Page 2',
  ),

     ///svg item
    BottomBarItem(
        inActiveItem: SvgPicture.asset(
          'assets/search_icon.svg',
           color: Colors.blueGrey,
       ),
       activeItem: SvgPicture.asset(
          'assets/search_icon.svg',
           color: Colors.black,
       ),
       itemLabel: 'Page 3',
    ),
     ...
)

Remove margins

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     removeMargins: true,     
     ...
)

Set bottom bar width

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     bottomBarWidth: 500,     
     ...
)

Add animation duration

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     durationInMilliSeconds: 300,     
     ...
)

Show/hide item label and style

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     showLabel: true,
     itemLabelStyle: TextStyle(
                      color: Colors.black,
                      fontSize: 16.0
                    ),
     ...
)

Set Notch's color

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
      notchColor: Colors.black87,     
     ...
)

Customized Blur Effect (iOS Tab View)

bottomNavigationBar:  AnimatedNotchBottomBar(
    ...
    showBlurBottomBar: true,
    blurOpacity: 0.2,
    blurFilterX: 5.0,
    blurFilterY: 10.0,
    ...
)

Migrating to 1.0.0+

Starting with version 1.0.0 of the package, NotchBottomBarController have been added for control the animation instead of PageController. The pageController field has been removed and notchBottomBarController is required now.

AnimatedNotchBottomBar

• notchBottomBarController - the controller which allows you to control the page.
• bottomBarItems - navigation items, required more than one item and less than six.
• onTap - required to listen when an item is tapped it provides the selected item's index.
• color - the bottom bar's background color.
• removeMargins - To remove side and bottom margins by default it's false.
• bottomBarWidth - To provide width for web and desktop app.
• durationInMilliSeconds - To set duration time in MilliSeconds.
• showLabel: To show or hide the label under bottom bar item.
• itemLabelStyle - the bottom bar's item text style.
• showShadow - if false the bottom bar's elevation will be removed.
• showBlurBottomBar - if true the bottom bar will look blur.
• blurOpacity - to set opacity of blur effect.
• blurFilterX - Creates an image filter that applies a Gaussian blur at x axis.
• blurFilterY - Creates an image filter that applies a Gaussian blur at y axis.
• notchColor - Customizable notch's color.

BottomBarItems

• title - the bottom bar item label
• activeItem - the selected item.
• inActiveItem - the inactive item.

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the main branch only.

LICENSE!

Animated Notch Bottom Bar is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] and do let us know if you have any questions or suggestion regarding our work.