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

Question

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

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

谢谢您的帮助！:)

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

Answer 1

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

我为您创建了一个DartPad，您可以在其中预览正在工作的小部件。

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;
    }
}