Flutter中如何修改选中NavigationRailDestination的颜色？

直接修改NavigationRail的对应属性即可实现效果，无需自定义组件：

核心配置项说明：

• indicatorColor：设置选中项的背景色为白色
• selectedIconTheme/selectedLabelTextStyle：设置选中态的图标、文字为蓝色，适配白色背景避免对比度不足
• unselectedIconTheme/unselectedLabelTextStyle：设置未选中态的图标、文字为白色，适配蓝色背景
• indicatorShape：自定义选中块的圆角形状，匹配设计稿效果

完整代码示例：

NavigationRail(
  extended: true,
  backgroundColor: Colors.blue,
  // 选中项背景设为白色
  indicatorColor: Colors.white,
  // 自定义选中块圆角，可根据设计稿调整数值
  indicatorShape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  // 选中态图标、文字颜色设为蓝色
  selectedIconTheme: const IconThemeData(color: Colors.blue),
  selectedLabelTextStyle: const TextStyle(color: Colors.blue),
  // 未选中态图标、文字颜色设为白色
  unselectedIconTheme: const IconThemeData(color: Colors.white),
  unselectedLabelTextStyle: const TextStyle(color: Colors.white),
  destinations: const [
    NavigationRailDestination(
      icon: Icon(Icons.dashboard),
      label: Text('Dashboard'),
    ),
    // 其余destination按相同规则添加即可
  ],
)

如果使用的Flutter版本低于3.0，没有内置indicatorColor属性，可在每个destination的icon外层包裹AnimatedContainer，通过监听当前选中的索引值动态切换背景色实现相同效果。

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