1
resposta

[Dúvida] Desafio respondido

Preciso de uma ajuda.

No meu código, quando o nível chega a 10 e eu aperto novamente o botão 'Up', o nível vira 0. Até aí não há problema. Só que a cor do container muda apenas quando eu aperto outra vez o botão, ou seja, quando o nível vira 1.

Segue o trecho com a lógica que implementei:

class _TaskState extends State<Task> {
  int nivel = 0;
  int maestria = 0;

  double progresso() {
    if ((nivel / widget.dificuldade) / 10 > 1 && maestria < 6) {
      nivel = 0;
      maestria++;
    }
    return (widget.dificuldade > 0) ? (nivel / widget.dificuldade) / 10 : 1;
  }

  Color coresMaestria() {
    if (maestria == 1) {
      return Colors.green;
    } else if (maestria == 2) {
      return Colors.yellow;
    } else if (maestria == 3) {
      return Colors.orange;
    } else if (maestria == 4) {
      return Colors.red;
    } else if (maestria == 5) {
      return Colors.purple;
    } else if (maestria >= 6) {
      return Colors.black;
    }
    return Colors.blue;
  }

Mesmo que eu atribua nivel = 1 dentro da condicional, a cor do container só mudaria quando eu apertasse o botão de novo: quando o nível virasse 2.

Agradeço!

1 resposta

Olá, Murilo! Tudo bem?

Desculpa a demora. Estou respondendo esse tópico para ajudar você e outras pessoas com dúvidas como essa, e para organizar o nosso fórum de Flutter.

Muito obrigado por compartilhar o seu desafio e parabéns por tentar resolver e conseguir evoluir a idéia.

Pelo trecho de código que você compartilhou, parece que a cor do container só é atualizada quando o nível é incrementado novamente. Isso acontece porque a função coresMaestria() é chamada apenas quando o botão é pressionado novamente, ou seja, quando o nível vira 2.

Para resolver esse problema, você pode chamar a função coresMaestria() sempre que o nível for atualizado, não apenas quando o botão é pressionado novamente. Uma forma de fazer isso é utilizando o método setState() para atualizar o estado do widget e acionar a reconstrução da interface.

Aqui está um exemplo de como você pode fazer essa alteração no seu código:

class _TaskState extends State<Task> {
  int nivel = 0;
  int maestria = 0;

  void atualizarNivel() {
    if ((nivel / widget.dificuldade) / 10 > 1 && maestria < 6) {
      nivel = 0;
      maestria++;
    } else {
      nivel++;
    }
    setState(() {}); // Atualiza o estado do widget
  }

  double progresso() {
    return (widget.dificuldade > 0) ? (nivel / widget.dificuldade) / 10 : 1;
  }

  Color coresMaestria() {
    if (maestria == 1) {
      return Colors.green;
    } else if (maestria == 2) {
      return Colors.yellow;
    } else if (maestria == 3) {
      return Colors.orange;
    } else if (maestria == 4) {
      return Colors.red;
    } else if (maestria == 5) {
      return Colors.purple;
    } else if (maestria >= 6) {
      return Colors.black;
    }
    return Colors.blue;
  }
}

Dessa forma, sempre que o nível for atualizado, a função setState() será chamada e a interface será reconstruída, atualizando assim a cor do container.

Espero ter ajudado e bons estudos!