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.