For Example:
Green, if value < 30
Orange, if value < 60
Red, if value > 60
Thanks for the help! :)
CircularProgressIndicator(
strokeWidth: 6,
value: amountSpent / budget,
backgroundColor: UiColors.backgroundColor,
valueColor: AlwaysStoppedAnimation<Color>(
UiColors.categoryColors[1]),
),
You can define a function that will calculate the adequate color for your CircularProgressIndicator.
I create you a 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;
}
}