更改导航目标时导航栏指示器颜色会闪烁

Question

我正在将

NavigationBar

小部件实现为

Scaffold

中的 bottomNavigationBar:。我的导航栏中有三个

NavigationDestination

项目。

其中两项具有 多彩

indicatorColor:

，其中一项是透明。因此，我添加了一个基于项目的 index 的条件来处理颜色。

但是，当选择具有 透明 指示器颜色的项目并点击任何具有 彩色 指示器颜色的项目时，透明 项目上会出现一个颜色斑点，如下视频所示：

演示视频

我正在使用

go_router

进行路线管理。 body:部分中的

navigationShell

来自go_router

这是我的代码片段：

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');
          }
         ),
    );
  }
}

我该如何解决这个问题？

*** 我还想将所选

NavigationDestination

项目的 label: 设为粗体。

我真的很感谢您的帮助。

Answer 1

NavigationBar 的默认

animationDuartion:

为 500 毫秒

animationDuration: Duration.zero

将动画持续时间设置为零解决了我的问题。