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