如何在活动时将底部导航栏的标签设置为渐变颜色？

Question

在此输入图片描述

NavigationBarTheme(
          data: NavigationBarThemeData(
            indicatorColor: Colors.transparent,
            labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
            labelTextStyle: WidgetStateProperty.all(
              const TextStyle(
                  color: AppColors.secondary,
                  fontFamily: 'Pretendard',
                  fontSize: 10,
                  fontWeight: FontWeight.w500),
            ),
          ),
          child: Container(
            decoration: const BoxDecoration(
              border:
                  Border(top: BorderSide(color: Color(0x33FDD0FF), width: 1)),
              gradient: AppColors.backgroundGradientBottomTab,
              borderRadius: BorderRadius.vertical(
                top: Radius.circular(24),
              ),
            ),
            child: NavigationBar(
              elevation: 0,
              backgroundColor: Colors.transparent,
              selectedIndex: selectedIndex,
              destinations: [
                NavigationDestination(
                  label: 'HOME',
                  icon: SvgPicture.asset(
                    selectedIndex == 0 ? AppSvgs.homeActive : AppSvgs.home,
                  ),
                ),
                NavigationDestination(
                  label: 'EVENT',
                  icon: SvgPicture.asset(
                    selectedIndex == 1 ? AppSvgs.eventActive : AppSvgs.event,
                  ),
                ),
                NavigationDestination(
                  label: 'COMMUNITY',
                  icon: SvgPicture.asset(
                    selectedIndex == 2
                        ? AppSvgs.communityActive
                        : AppSvgs.community,
                  ),
                ),
                NavigationDestination(
                  label: 'PROFILE',
                  icon: SvgPicture.asset(
                    selectedIndex == 3
                        ? AppSvgs.profileActive
                        : AppSvgs.profile,
                  ),
                ),
              ],
              onDestinationSelected: (int index) {
                log("index:$index");
                onDestinationSelected(context, index);
              },
            ),
          )),
    );

Answer 1

1. 您可以使用 BottomAppBar 和 Row 创建自己的版本，而不是使用默认的 BottomNavigationBar。
2. 使用 ShaderMask 对活动标签的文本应用渐变。

为了更好的解决方案，请检查此链接 代码在这里