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 and height

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     bottomBarWidth: 500.0,     
     bottomBarHeight: 62.0,     
     ...
)

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

Set Notch's gradient

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     notchGradient: const LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
        colors: [
          Colors.red,
          Colors.green,
        ],
     ),     
     ...
)

Hide top and bottom corner radius

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     showBottomRadius = false,
     showTopRadius = false,
     ...
)

Customize elevation

bottomNavigationBar:  AnimatedNotchBottomBar(
     ...
     elevation = 2.0,
     ...
)

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.