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

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

Flutter: Change Color of Circular Progress Indicator on a certain value

colors

flutter

flutter-circularprogressindicator