Flutter：在某個值上更改圓形進度指示器的顏色

Question

當達到某個值時，是否可以更改為 CircularProgressIndicator 的 valueColor。

例如：
綠色，如果值 < 30
橙色，如果值 < 60
紅色，如果值 > 60

謝謝您的幫助： ：）

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

Answer 1

您可以定義一個 function，它將為您的 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;
    }
}