Flutter：在某个值上更改圆形进度指示器的颜色

Posted 2023-02-24

【中文标题】Flutter：在某个值上更改圆形进度指示器的颜色

【英文标题】：Flutter: Change Color of Circular Progress Indicator on a certain value

【发布时间】：2021-06-06 14:20:32

【问题描述】：

当达到某个值时，是否可以更改为 CircularProgressIndicator 的 valueColor。

例如： 绿色，如果值 橙色，如果值 红色，如果值 > 60

感谢您的帮助！ :)

CircularProgressIndicator(
                            strokeWidth: 6,
                            value: amountSpent / budget,
                            backgroundColor: UiColors.backgroundColor,
                            valueColor: AlwaysStoppedAnimation<Color>(
                                UiColors.categoryColors[1]),
                          ),

【参考方案1】：

您可以定义一个函数来为您的 CircularProgressIndicator 计算适当的颜色。

我给你创建一个DartPad where you can preview the working widget.

CircularProgressIndicator(
    strokeWidth: 6,
    value: amountSpent / budget,
    backgroundColor: calculateBackgroundColor(value: amountSpent / budget)
    valueColor: AlwaysStoppedAnimation<Color>(UiColors.categoryColors[1]),
),

// Define a function to calculate the adequate color:
Color calculateBackgroundColor(required double value) 
    if (value > 0.60) 
        return Colors.red;
     else if (value > 0.30) 
        return Colors.orange;
     else 
        return Colors.green;
    

【讨论】：

谢谢老兄，您的解决方案完美运行:)