Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Projeto] Faça como eu fiz - Widget contra ataca

Referente ao curso Flutter: Widgets, Stateless, Stateful, Imagens e Animações, no capítulo Explorando Stateless vs Stateful e atividade Faça como eu fiz: o Widget contra ataca

por Miguel Nobre de Souza Frederico
| 19.3k xp | 32 posts
Desenvolvedor de aplicativos 
class DesafioTela extends StatefulWidget {
  const DesafioTela({super.key});

  @override
  State<DesafioTela> createState() => _DesafioTelaState();
}

class _DesafioTelaState extends State<DesafioTela> {
  String playlist = "";
  String playlist2 = "";
  double playlistProgress = 0.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.shade800,
      width: 100,
      height: 100,
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 0, 0, 130),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              alignment: Alignment.center,
              width: 350,
              height: 50,
              color: Colors.black,
              child: const Text(
                "Escolha seu Ritímo",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  decoration: TextDecoration.underline,
                  decorationColor: Colors.black,
                ),
              ),
            ),
``` Text(
              playlist,
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                decoration: TextDecoration.underline,
                decorationColor: Colors.grey.shade800,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      playlist2 = "Você escolheu forró";
                      playlistProgress++;
                    });
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 70,
                    height: 70,
                    color: Colors.yellow,
                    child: const Text(
                      "Forró",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        decoration: TextDecoration.underline,
                        decorationColor: Colors.yellow,
                      ),
                    ),
                  ),
                ),

GestureDetector( onTap: () { setState(() { playlist2 = "Você escolheu Pagode"; playlistProgress++; }); }, child: Container( alignment: Alignment.center, width: 70, height: 70, color: Colors.orange, child: const Text( "Pagode", style: TextStyle( color: Colors.black, fontSize: 10, decoration: TextDecoration.underline, decorationColor: Colors.orange, ), ), ), ), GestureDetector( onTap: () { setState(() { playlist2 = "Você escolheu Sertanejo"; playlistProgress++; }); }, child: Container( alignment: Alignment.center, width: 70, height: 70, color: Colors.red, child: const Text( "Sertanejo", style: TextStyle( color: Colors.black, fontSize: 10, decoration: TextDecoration.underline, decorationColor: Colors.red, ), ), ), ) ], ),

4 respostas
por Miguel Nobre de Souza Frederico
| 19.3k xp | 32 posts
Desenvolvedor de aplicativos 
  Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      playlist2 = "Você escolheu Samba";
                      playlistProgress++;
                    });
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 70,
                    height: 70,
                    color: Colors.green,
                    child: const Text(
                      "Samba",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        decoration: TextDecoration.underline,
                        decorationColor: Colors.green,
                      ),
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      playlist2 = "Você escolheu Pop";
                      playlistProgress++;
                    });
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 70,
                    height: 70,
                    color: Colors.blue,
                    child: const Text(
                      "Pop",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        decoration: TextDecoration.underline,
                        decorationColor: Colors.blue,
                      ),
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      playlist2 = "Você escolheu Rock";
                      playlistProgress++;
                    });
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 70,
                    height: 70,
                    color: Colors.blueGrey,
                    child: const Text(
                      "Rock",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        decoration: TextDecoration.underline,
                        decorationColor: Colors.blueGrey,
                      ),
                    ),
                  ),
                )
              ],
            ),
por Miguel Nobre de Souza Frederico
| 19.3k xp | 32 posts
Desenvolvedor de aplicativos 
 Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                GestureDetector(
                  onTap: () {
                    setState(() {
                      playlist2 = "Você escolheu Eletronico";
                      playlistProgress++;
                    });
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 70,
                    height: 70,
                    color: Colors.grey,
                    child: const Text(
                      "Eletronico",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        decoration: TextDecoration.underline,
                        decorationColor: Colors.grey,
                      ),
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      playlist2 = "Você escolheu Funk";
                      playlistProgress++;
                    });
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 70,
                    height: 70,
                    color: Colors.pink,
                    child: const Text(
                      "Funk",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        decoration: TextDecoration.underline,
                        decorationColor: Colors.pink,
                      ),
                    ),
                  ),
                ),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      playlist2 = "Você escolheu Reggae";
                      playlistProgress++;
                    });
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 70,
                    height: 70,
                    color: const Color.fromARGB(255, 0, 255, 8),
                    child: const Text(
                      "Reggae",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        decoration: TextDecoration.underline,
                        decorationColor: Color.fromARGB(255, 0, 255, 8),
                      ),
                    ),
                  ),
                ),
              ],
            ),

 Text(
              playlist2,
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                decoration: TextDecoration.underline,
                decorationColor: Colors.grey.shade800,
              ),
            ),
            SizedBox(
              width: 185,
              child: Padding(
                padding: const EdgeInsets.all(2.0),
                child: LinearProgressIndicator(
                  backgroundColor: Colors.black,
                  color: Colors.white,
                  value: playlistProgress / 3,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 50, 0, 0),
              child: GestureDetector(
                onTap: (() {
                  setState(() {
                    playlist = " Você criou sua playlist";
                  });
                }),
                child: Container(
                  alignment: Alignment.center,
                  width: 200,
                  height: 30,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: const BorderRadius.only(
                      topLeft: Radius.circular(10),
                      bottomLeft: Radius.circular(5),
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(5),
                    ),
                    border: Border.all(width: 2, color: Colors.white),
                  ),
                  child: const Text(
                    "Criar playlist",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 10,
                      decoration: TextDecoration.underline,
                      decorationColor: Colors.black,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
por Miguel Nobre de Souza Frederico
| 19.3k xp | 32 posts
Desenvolvedor de aplicativos

tive que dividir pois ficou muito grande kk

solução!
por Lorena Garcia
| 8364.6k xp | 12215 posts
Alura Scuba Team Suporte Educacional

Oi Miguel, tudo bem?

Muito obrigada por compartilhar com a gente o seu resultado da atividade! Fico feliz em ver que você está praticando, pois é fundamental para o seu aprendizado. Parabéns por se dedicar e colocar em prática o que foi visto nas aulas.

Continue assim e os resultados virão!

Um abraço.