[Projeto] Desafio: cores dinâmicas para tarefas concluídas | Flutter: Widgets, Stateless, Stateful, Imagens e Animações

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Henrique Araújo de Pontes

| 20k xp | 3 posts

Desenvolvedor Mobile

Para realizar o desafio, utilizei um if e um switch case para criar a função corLevel, acredito que não seja a melhor forma de realizar o desafio.

Essas são as variáveis e a função:

  int nivel = 0;
  int maestria = 0;
  Color colorLevel = Colors.purpleAccent;

  Color corLevel() {
    if (nivel >= widget.dificuldade * 10 && maestria < 6) {
      maestria++;
      nivel = 0;
    }
    switch (maestria) {
      case 1:
        colorLevel = Colors.green;
        break;
      case 2:
        colorLevel = Colors.yellow;
        break;
      case 3:
        colorLevel = Colors.orange;
        break;
      case 4:
        colorLevel = Colors.red;
        break;
      case 5:
        colorLevel = Colors.blue;
        break;
      case 6:
        colorLevel = Colors.black;
        break;
    }
    return colorLevel;
  }

No Container onde fica a cor da tarefa, eu chamei a função:

Container(
            decoration: BoxDecoration(
              color: corLevel(), //<-- Onde chamei a corLevel
              borderRadius: BorderRadius.circular(4),
            ),

Esse foi o Resultado:

Gif do código funcionando.

2 respostas

solução!

por Natan Souza

| 2095.3k xp | 3689 posts

Instrutor Product Design Lead na Alura

24/12/2023

Olá Henrique!

Pelo que você descreveu e pelo código que você compartilhou, parece que você está no caminho certo para resolver o desafio proposto. A utilização de if e switch case é uma abordagem comum para alterar valores com base em condições específicas, como você fez para mudar as cores.

Agora se você está buscando uma forma mais curta/eficiente de realizar essa tarefa, você poderia considerar o uso de um mapa (Map) para associar cada nível de maestria a uma cor específica. Isso poderia simplificar o seu código ao eliminar a necessidade do switch case.

Aqui está um exemplo de como você poderia refatorar a função corLevel usando um Map:

Map<int, Color> coresMaestria = {
  0: Colors.purpleAccent,
  1: Colors.green,
  2: Colors.yellow,
  3: Colors.orange,
  4: Colors.red,
  5: Colors.blue,
  6: Colors.black,
};

Color corLevel() {
  if (nivel >= widget.dificuldade * 10 && maestria < 6) {
    maestria++;
    nivel = 0;
  }
  return coresMaestria[maestria] ?? Colors.purpleAccent; // Retorna a cor correspondente ou a cor padrão
}

Neste exemplo, o Map coresMaestria associa cada nível de maestria a uma cor. Dentro da função corLevel, após incrementar a maestria se necessário, você simplesmente retorna a cor correspondente ao nível de maestria atual. O operador ?? serve para fornecer um valor padrão caso a chave não esteja presente no mapa, o que é uma boa prática para evitar erros.

Espero ter ajudado e um ótimo Natal!

por Henrique Araújo de Pontes

| 20k xp | 3 posts

Desenvolvedor Mobile

24/12/2023

Muito mais simples e limpo, sem dúvidas. Muito obrigado e um ótimo Natal.