如何为BottomNavigationBar的选中标签设置渐变色样式？

要实现选中状态下标签文字的渐变色效果，默认的TextStyle无法直接支持，我们可以通过ShaderMask结合NavigationBar的labelBuilder来自定义文本样式，具体实现如下：

步骤说明 #

• 移除NavigationBarThemeData中的labelTextStyle配置，避免与自定义label样式冲突
• 通过NavigationBar的labelBuilder回调，根据选中状态分别返回普通文本和带渐变的文本组件
• 利用ShaderMask包裹选中状态的文本，通过渐变Shader实现文字颜色渐变

修改后的完整代码 #

NavigationBarTheme(
  data: NavigationBarThemeData(
    indicatorColor: Colors.transparent,
    labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
    // 移除原labelTextStyle配置，改用labelBuilder自定义
  ),
  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,
      // 新增labelBuilder自定义标签样式
      labelBuilder: (context, destination, isSelected) {
        if (isSelected) {
          // 选中状态：用ShaderMask实现渐变色文字
          return ShaderMask(
            shaderCallback: (bounds) => LinearGradient(
              // 替换成你需要的渐变色，比如AppColors中的渐变配置
              colors: [Color(0xFFFF6B9D), Color(0xFFC44569)],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ).createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height)),
            child: Text(
              destination.label,
              style: const TextStyle(
                color: Colors.white, // 此处需设为白色，ShaderMask会覆盖该颜色
                fontFamily: 'Pretendard',
                fontSize: 10,
                fontWeight: FontWeight.w500,
              ),
            ),
          );
        } else {
          // 未选中状态：保持原文本样式
          return Text(
            destination.label,
            style: const TextStyle(
              color: AppColors.secondary,
              fontFamily: 'Pretendard',
              fontSize: 10,
              fontWeight: FontWeight.w500,
            ),
          );
        }
      },
      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);
      },
    ),
  ),
);

注意事项 #

• 替换代码中的渐变色数组为你项目中定义的AppColors渐变配置
• ShaderMask包裹的文本颜色需设为白色（或其他不透明颜色），这样渐变Shader才能正常显示效果

内容的提问来源于stack exchange，提问作者Văn Thuận Lê