Flutter circular_bottom_navigation 2.4.0选中图标颜色修改问题

针对你遇到的问题，这个版本的circular_bottom_navigation确实没有selectedIconColor属性，但不需要自定义包，用以下两种方案就能解决：

方案一：自定义Tab渲染（推荐） #

利用组件提供的renderTab参数完全自定义每个标签的UI，直接根据选中状态控制图标颜色：

int selectedPos = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: // 你的页面内容
    bottomNavigationBar: CircularBottomNavigation(
      tabs: [
        TabItem(icon: Icons.home, title: "首页", color: Colors.blue),
        TabItem(icon: Icons.search, title: "搜索", color: Colors.orange),
        TabItem(icon: Icons.person, title: "我的", color: Colors.green),
      ],
      selectedPos: selectedPos,
      onTabChangedListener: (pos) {
        setState(() => selectedPos = pos);
      },
      // 自定义Tab渲染逻辑
      renderTab: (tabItem, isSelected, context) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              tabItem.icon,
              // 这里直接设置选中/未选中的图标颜色
              color: isSelected ? Colors.cyan : Colors.grey.shade600,
              size: isSelected ? 32 : 26,
            ),
            if (isSelected)
              Text(
                tabItem.title!,
                style: TextStyle(color: tabItem.color, fontSize: 12),
              ),
          ],
        );
      },
    ),
  );
}

这种方式不需要修改包源码，完全由你控制UI，灵活性最高，也不会因为包版本更新受影响。

方案二：修改本地包源码 #

如果你更倾向于用原生的TabItem参数控制，可以修改本地缓存的包文件：

1. 找到本地pub缓存中circular_bottom_navigation 2.4.0的目录（一般在~/.pub-cache/hosted/pub.dev/circular_bottom_navigation-2.4.0）
2. 打开lib/tab_item.dart，给TabItem类添加selectedIconColor属性：

final Color? selectedIconColor;

const TabItem({
  required this.icon,
  this.title,
  required this.color,
  this.selectedIconColor,
});

3. 打开lib/circular_bottom_navigation.dart，找到_defaultTabRenderer方法，修改图标的颜色逻辑：

Icon(
  tabItem.icon,
  color: isSelected 
      ? (tabItem.selectedIconColor ?? tabItem.color) 
      : _unselectedIconColor ?? Colors.grey.shade600,
  size: isSelected ? widget.selectedIconSize : widget.iconSize,
)

4. 回到你的项目，重新运行即可使用selectedIconColor参数：

TabItem(icon: Icons.home, title: "首页", color: Colors.blue, selectedIconColor: Colors.cyan)

注意：这种方法会修改本地包文件，如果你之后执行pub get或者切换环境，修改会被覆盖，需要重新操作。

内容的提问来源于stack exchange，提问作者Antonio Mazzaro