Descrição da solução
Primeiramente defini algumas variáveis na classe _TaskState
para controle do level e da cor, além de uma lista de cores:
class _TaskState extends State<Task> {
int level = 0;
int maxLevel = 5;
int colorLevel = 0;
List listColors = [
Colors.blue,
Colors.green,
Colors.yellow,
Colors.orange,
Colors.pinkAccent,
Colors.black
];
{...}
}
Criei uma função para controle do incremento do level, onde toda vez que o level máximo for alcançado, a variável level
é reiniciada com valor 1 e incrementa o colorLevel
para selecionar a próxima cor.
void incrementLevel() {
if (level < (widget.dificuldade * maxLevel)) {
level = level + 1;
} else {
level = 1;
if (colorLevel < listColors.length - 1) {
colorLevel++;
}
}
}
E outra função para controle o incremento da barra de progresso
double incrementProgressIndicator() {
return (widget.dificuldade > 0)
? level / (widget.dificuldade * maxLevel)
: 0;
}
No onPressed do botão de level up utilizo a função criada acima:
child: ElevatedButton(
onPressed: () {
setState(() {
incrementLevel();
});
},
No Container da barra de progresso adicionei a lista de cores, cujo índice é obtido na variável colorLevel
:
Container(
color: listColors[colorLevel],
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 200,
child: LinearProgressIndicator(
color: Colors.white,
value: incrementProgressIndicator(),
),
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
'Nível: $level',
style:
const TextStyle(color: Colors.white, fontSize: 16),
),
),
],
Resultado
O resultado por ser acessado em: https://drive.google.com/file/d/1Yj2eTUoqG0msXR_dqNP_AYFFFDj_YWXc/view?usp=sharing