mindinventory/animated_notch_bottom_bar

Tabbar component for Flutter

animated_notch_bottom_bar's Issues

Change icon size

How can I change icon size?

Default first BottomBarItem

How can I set a default BottomBarItem?

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 i remove the navbar from another page that's not listed in the bottomBarPages list

remove right-bottom and left bottom radius

First of all, thanks for widget.

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

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.

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

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

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'
════════════════════════════════════════════════════════════════════════════════

Safe Area!

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

bar background image

hi. how i can paint bg image;

Elevation

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

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

can't find margin field and borderRadius field.

I want to remove the margins that are around the bottom nav 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

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.

Developer branch missing

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

Thanks

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


          ],
        ),
    );
  }