Блог

можно ли изменить значение на цвет индикатора CircularProgressIndicator при достижении определенного значения.

Например:
Зеленый, если значение < 30
Оранжевый, если значение < 60
Красный, если значение > 60

Спасибо за помощь! 🙂

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

Вы можете определить функцию, которая будет вычислять соответствующий цвет для вашего индикатора CircularProgressIndicator.

Я создаю для вас панель для дартса, где вы можете просмотреть рабочий виджет.

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