Criei uma variável para acompanhar o nível de maestria e uma pra alterar a cor, como o próprio botão tem um setstate acompanhando as variáveis, fiz algumas checagens com if e usei um switch case pra alterar as cores
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: masteryColor,
),
height: 140,
),
Column(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Colors.white,
),
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Colors.grey,
),
width: 72,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.asset(
widget.image,
fit: BoxFit.cover,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 200,
child: Text(
widget.name,
style: const TextStyle(
fontSize: 24,
overflow: TextOverflow.ellipsis),
)),
Difficulty(difficultyLevel: widget.difficulty),
],
),
SizedBox(
height: 52,
width: 52,
child: ElevatedButton(
onPressed: () {
setState(() {
nivel++;
if (nivel / widget.difficulty == 10){
masteryLvl++;
if(masteryLvl <= 6) {
nivel = 0;
}
}
switch (masteryLvl) {
case 1:
masteryColor = Colors.green;
case 2:
masteryColor = Colors.yellow;
case 3:
masteryColor = Colors.orange;
case 4:
masteryColor = Colors.red;
case 5:
masteryColor = Colors.purpleAccent;
case 6:
masteryColor = Colors.black;
}
});
// print(nivel);
},
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
padding: EdgeInsets.zero,
),
