mindinventory / animated_notch_bottom_bar

Tabbar component for Flutter

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.

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.
• notchGradient - Add Gradient to notch.
• showTopRadius - If set false the top corner radius will be removed.
• showBottomRadius - If set false the top corner radius will be removed.
• elevation - Set elevation of bottom bar.
• bottomBarHeight - To set height of bottom bar.

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.

animated_notch_bottom_bar's Issues

Is there a way to set height of bottom bar

I want to set height. I tried to add Container above it but It has error
Error:

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.yml

When the exception was thrown, this was the stack
#2      AnimationController.stop
animation_controller.dart:772
#3      AnimationController.value=
animation_controller.dart:361
#4      AnimationController.reset
animation_controller.dart:382
#5      _AnimatedNotchBottomBarState.initState.<anonymous closure>
notch_bottom_bar.dart:106
#6      ChangeNotifier.notifyListeners
change_notifier.dart:403
#7      NotchBottomBarController.jumpTo
notch_bottom_bar_controller.dart:12
#8      _AnimatedNotchBottomBarState.build.<anonymous closure>.<anonymous closure>
notch_bottom_bar.dart:218
#9      BottomBarInActiveItem.build.<anonymous closure>
bottom_bar_inactive_item.dart:35
#10     GestureRecognizer.invokeCallback
recognizer.dart:275
#11     TapGestureRecognizer.handleTapUp
tap.dart:654
#12     BaseTapGestureRecognizer._checkUp
tap.dart:311
#13     BaseTapGestureRecognizer.handlePrimaryPointer
tap.dart:244
#14     PrimaryPointerGestureRecognizer.handleEvent
recognizer.dart:630
#15     PointerRouter._dispatch
pointer_router.dart:98
#16     PointerRouter._dispatchEventToRoutes.<anonymous closure>
pointer_router.dart:143
#17     _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:625:13)
#18     PointerRouter._dispatchEventToRoutes
pointer_router.dart:141
#19     PointerRouter.route
pointer_router.dart:127
#20     GestureBinding.handleEvent
binding.dart:488
#21     GestureBinding.dispatchEvent
binding.dart:468
#22     RendererBinding.dispatchEvent
binding.dart:333
#23     GestureBinding._handlePointerEventImmediately
binding.dart:413
#24     GestureBinding.handlePointerEvent
binding.dart:376
#25     GestureBinding._flushPointerEventQueue
binding.dart:323
#26     GestureBinding._handlePointerDataPacket
binding.dart:292
#27     _invoke1 (dart:ui/hooks.dart:186:13)
#28     PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:424:7)
#29     _dispatchPointerDataPacket (dart:ui/hooks.dart:119:31)
(elided 2 frames from class _AssertionError)
The NotchBottomBarController sending notification was: Instance of 'NotchBottomBarController'
════════════════════════════════════════════════════════════════════════════════

can't find margin field and borderRadius field.

I want to remove the margins that are around the bottom nav bar.

Developer branch missing

Hello,
I would like to open a new PR but there is no developer branch.
Could you please create it?

Thanks

AnimationController.stop() called after AnimationController.dispose()

I'm getting this error whenever I try to change items

The following assertion was thrown while dispatching notifications for NotchBottomBarController:
AnimationController.stop() called after AnimationController.dispose()
AnimationController methods should not be used after calling dispose.
'package:flutter/src/animation/animation_controller.dart':
Failed assertion: line 772 pos 7: '_ticker != null'

My code logic is:

• I have one class, in which I have a list that contains 3 sub pages and it handles those pages. Like after the click on of one the bottom bar items, the page will change accordingly
• Code

  final List<Widget> _items = const <Widget>[
    CrossingView(),
    DiscussionPage(),
    AccountView(),
  ];

  late PageController _pageController;
  late NotchBottomBarController _notchBottomBarController;

  @override
  void initState() {
    _pageController = PageController();
    _notchBottomBarController = NotchBottomBarController();
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
  
  Scaffold(
        restorationId: ...,
        body: PageView(
          scrollDirection: Axis.vertical,
          controller: _pageController,
          physics: const NeverScrollableScrollPhysics(),
          children: List<Widget>.generate(
            _items.length,
            (int index) => Container(
              margin: const EdgeInsets.only(
                bottom: ThemeConstants.xLargePadding,
              ),
              child: _items[index],
            ),
          ),
        ),
        extendBody: true,
        bottomNavigationBar: AnimatedNotchBottomBar(
          durationInMilliSeconds: 400,
          notchBottomBarController: _notchBottomBarController,
          showLabel: false,
          bottomBarItems: <BottomBarItem>[
            _homeBottomBarItem,
            _discussionBottomBarItem,
            _accountBottomBarItem,
          ],
          onTap: (int value) async => _changeBottomBarItem(value),
        ),
      );
      
        Future<void> _changeBottomBarItem(int index) async {
    _pageController.animateToPage(index,
        duration: const Duration(milliseconds: 400), curve: Curves.easeInOut);
  }

Flutter details

Flutter 3.13.1 • channel [user-branch] • unknown source
Framework • revision e1e47221e8 (5 months ago) • 2023-08-22 21:43:18 -0700
Engine • revision b20183e040
Tools • Dart 3.1.0 • DevTools 2.25.0

I have done so much research about this problem but was unable to find any clue thats why I came here to open a new issue

No arguments to set bar item margin(or padding)

kCircleMargin, kTopMargin in code is using for set margin of bar items.
but it's defined under constants, there's no arguments to change

Can i remove the navbar from another page that's not listed in the bottomBarPages list

Layout goes up too far when keypad showing

Hi, please fix this issue.

I am trying to create a form input and add a navbar. However, when the keypad is displayed, the layout goes up too far.

With Navbar :

with.navbar.mp4

Without Navbar :

without.navbar.mp4

The Code form input :

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Column(
          children: [
            Container(
              width: screenWidth,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25.0),
                color: const Color(0xfffba1b7),
              ),
              child: Column(
                children: [
                  const SizedBox(height: 60.0),
                  Row(
                    children: [
                      const SizedBox(width: 40.0),
                      const Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(height: 30.0),
                            Text(
                              'INPUT,',
                              style: TextStyle(
                                fontSize: 16.0,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                            SizedBox(height: 8.0),
                            Text(
                              'REKAM MEDIS',
                              style: TextStyle(
                                fontSize: 20.0,
                                fontWeight: FontWeight.w300,
                              ),
                            ),
                            SizedBox(height: 8.0),
                          ],
                        ),
                      ),
                      Image.asset(
                        "assets/illustrations/input.png",
                        width: 120,
                        height: 120,
                      ),
                      const SizedBox(width: 40.0),
                    ],
                  ),

                  const SizedBox(height: 20.0),
                ],
              ),
            ),

            const SizedBox(height: 40.0),

            Padding(
              padding: const EdgeInsets.only(left: 20.0, right: 20.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  
                  TextField(
                    decoration: InputDecoration(
                      labelText: 'Nomor Rekam Medis',
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(5.0),
                      ),
                      fillColor: Colors.white,
                      filled: true,
                    ),
                    style: const TextStyle(
                      
                    ),
                  ),

                  const SizedBox(height: 20.0),
                ],
              ),
            ),


          ],
        ),
    );
  }

Functionality to use the widget without the dependency of the pageview

As the title says is there a way to use the AnimatedNotchBottomBar without the use PageView?
Since the user can tend to use different widget to render the body of the scaffold.

Safe Area!

if you want to use safe area in the Subset page all over content hide

Default first BottomBarItem

How can I set a default BottomBarItem?

Elevation

Please add the functionality to control the elevation of bottom bar and selected item

Expected a value of type 'JavaScriptObject', but got one of type 'Null' Error for web?

I've got no problem getting this to work on mobile, but when I try to run it in web, I get this error:

The following TypeErrorImpl was thrown building AnimatedBuilder(animation:
AnimationController#d6079(⏮ 0.000; paused), dirty, state: _AnimatedState#24b94):
Expected a value of type 'JavaScriptObject', but got one of type 'Null'
The relevant error-causing widget was:
AnimatedNotchBottomBar

Can showShadow be separated from roundedEdges?

Currently, when showShadow is set to true, the bottom left and bottom right sides are rounded and the shadow shows.

Is it possible to have another property for roundedEdges or for the borderRadius of each edge, while keeping the showShadow (or permitting its customisation)?

So that one can have the shadow without the roundedEdges.

NotchBottomBarController jumpTo cause of no animation

NotchBottomBarController().jumpTo(index) still work to navigate to change to index of bottomBarItems.
But it's no animation when i call jumpTo() function of NotchBottomBarController.
If i don't use this jumpTo() function, animation work well

Please help to fix, because i have usecase that i wanna jumpTo specify index after i receive index number from bloc

remove right-bottom and left bottom radius

First of all, thanks for widget.

How can I remove right-bottom and left-bottom corners radius?

Make BottomBarItem.itemLabel of type Text

If temLabel were of type Text, we could utilize custom properties such as overflow and maxLines. This would enable us to truncate text if it exceeds a certain length, among other possibilities.

 itemLabel: Text(
   "Settings",
    maxLines = 1,
    overflow: TextOverflow.ellipsis,
  )

bar background image

hi. how i can paint bg image;

right to left align dosent work when use locale: const Locale('fa', 'IR'),

Hi
i use locale: const Locale('fa', 'IR'), in my code but
the direction of bottim navigation dosent change when scroll its pages.

[Feature Request] Gradient "notchColor"

We need to add gradient in notch, but it seems not possible for now, can we do that in upcoming updates?
and thanks for this wonderful navigation bar.

Functionality to use it upside down for tabbar

Please make it possible to use it as a tabbar but upside down. I know that I can do it with Flip or Rotation but having this inside the package will make it cooler. Thanks

Change icon size

How can I change icon size?

Functionality to limit the width of AnimatedNotchBottomBar for wider screens like macOS, web, tabs, etc

Functionality to limit the width of AnimatedNotchBottomBar for wider screens like macOS, web, tabs, etc. Current the width of AnimatedNotchBottomBar is based on screen size and for wide screens it takes away the whole screen and looks not asthetically pleasing.

Current look on wide screens: https://ibb.co/d7VKd03

[](Current look on wide screens)