Flutter技术问题：无法修改CircularProgressIndicator组件颜色

哈哈，我一眼就看出问题所在啦——你搞混了参数对应的作用！你设置的backgroundColor其实是进度条背景灰色环的颜色，而你看到的蓝色是进度条的主进度环，这个得用专门的参数来改，Theme的用法也没找对地方，给你两个靠谱的解决方案：

方案一：直接在组件内指定主颜色 #

直接给CircularProgressIndicator加上valueColor参数，用AlwaysStoppedAnimation传入你想要的颜色就行：

CircularProgressIndicator(
  backgroundColor: Colors.grey[100], // 这是你要的背景浅灰环
  strokeWidth: 2.0,
  // 这里设置主进度环的颜色，替换成你需要的颜色
  valueColor: const AlwaysStoppedAnimation<Color>(Colors.orange),
)

方案二：通过Theme统一配置 #

如果想在多个地方统一修改进度条样式，要修改Theme里的progressIndicatorTheme，而不是直接改backgroundColor：

Theme(
  data: Theme.of(context).copyWith(
    progressIndicatorTheme: ProgressIndicatorThemeData(
      color: Colors.purple, // 主进度环颜色
      circularTrackColor: Colors.grey[100], // 背景环颜色
    ),
  ),
  child: CircularProgressIndicator(strokeWidth: 2.0),
)

小补充：如果你的进度条是动态变化的（比如设置了value属性），valueColor还可以配合AnimationController做颜色渐变动画，但如果只是静态颜色，用AlwaysStoppedAnimation就完全够用啦～

内容的提问来源于stack exchange，提问作者Farhana Naaz Ansari