dynamic GapPosition have an unexpected effect

[zmm2tysu]

When I toggle tab bar, I need the FAB show and hide dynamically, meanwhile I set gapPosition dynamically. But it has splash effect, that's weird, so I wonder if it has some solution for this effect.

Here is the video for effect.

https://user-images.githubusercontent.com/20849786/195794605-9ac5de6a-ae8e-4adc-a543-1c06877c2e66.mov

Part of code:

AnimatedBottomNavigationBar.builder(
  itemCount: icons.length,
  notchSmoothness: NotchSmoothness.softEdge,
  tabBuilder: (int index, bool isActive) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(icons.elementAt(index)[isActive ? 1 : 0], width: isActive ? 34.w : 22.w, height: isActive ? 34.w : 22.w),
      ],
    );
  },
  backgroundColor: Colors.white,
  activeIndex: _bottomNavIndex,
  splashColor: Colors.black,
  splashSpeedInMilliseconds: 200,
  notchAndCornersAnimation: borderRadiusAnimation,
  gapLocation: _bottomNavIndex == 2 ? GapLocation.center : GapLocation.none,
  leftCornerRadius: 24,
  rightCornerRadius: 24,
)

[vizhan-lanars]

Thanks for your report. I'll take a look into it soon

[chris-herring]

Hitting the same issue. Found any solutions?

I'm working around this atm by duplicating the package and commenting out the gapLocation errors in circular_notched_and_cornered_shape.dart. I assume the problem is this builder method is not quite in sync with the changes to the FloatingActionButton so this error is thrown until it all catches up.