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

Question

is it possible to change to valueColor of a CircularProgressIndicator when a certain value is being reached.

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]),
                          ),

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