NavigationBar indicatorColor blips when changing the NavigationDestination

Question

I am implementing NavigationBar widget as bottomNavigationBar: inside Scaffold. I have three NavigationDestination items in the Navigation Bar.

Two of the items has colorful indicatorColor: and one of them is transparent. So, I added a condition based on the index of the items to handle the color.

However When the item with transparent indicatorColor is selected and any of the items with colorful indicatorColor is tapped on there is a blip of Color on the transparent item like the video below:

Demo Video

I am using go_router for route management. The navigationShell in the body: section comes from go_router

Here is my code snippet:

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key, required this.navigationShell})
      : super(key: key ?? const ValueKey('ScaffoldWithNestedNavigation'));

  final StatefulNavigationShell navigationShell;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: navigationShell,
      bottomNavigationBar: NavigationBar(
          height: 80.h,
          selectedIndex: navigationShell.currentIndex,
          indicatorColor: navigationShell.currentIndex == 0
              ? Colors.transparent
              : AppColors.bottomNavIconGreen,
          surfaceTintColor: Colors.white,
          backgroundColor: Colors.white,
          destinations: [
            NavigationDestination(
                label: 'Chat',
                icon: Icon(
                  Icons.chat_bubble_outline,
                  size: 24.h,
                )),
            NavigationDestination(
                label: 'History',
                icon: Icon(
                  Icons.access_time,
                  size: 24.h,
                )),
            NavigationDestination(
                label: 'Account',
                icon: Icon(
                  CupertinoIcons.person_crop_circle,
                  size: 24.h,
                )),
          ],
          onDestinationSelected: (index) {
            index != 0
                ? navigationShell.goBranch(
                    index,
                    initialLocation: index == navigationShell.currentIndex,
                  )
                : context.pushNamed('chat');
          }
         ),
    );
  }
}

How can I solve the problem?

*** And also I want to make the label: of the selected NavigationDestination item bold.

I really would appreciate your kind help.

Answer 1

NavigationBar has a default animationDuartion: of 500 milliseconds

animationDuration: Duration.zero

Making animation duration to zero solved my issue.