Entrar Ainda não tem acesso?
1
resposta

Resposta do exercicio!

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 Vitor Freire
| 16k xp | 23 posts

Eu fiz essas paletas de cores e implementei uma função para quando eu clicar no botão, as cores mudarem :)

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Icon(Icons.confirmation_num_sharp),
        ),
        body: Column(
          children: [
            Param(),
            Param(),
            Param(),
            Param(),
          ],
        ),
      ),
    );
  }
}

class Param extends StatefulWidget {
  const Param({super.key});

  @override
  State<Param> createState() => _ParamState();
}

class _ParamState extends State<Param> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Container(
                width: 90,
                height: 150,
                color: funcTrade(),
              ),
              Container(
                width: 90,
                height: 150,
                color: funcTrade(),
              ),
              Container(
                width: 90,
                height: 150,
                color: funcTrade(),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        funcTrade();
                      });
                    },
                    child: Icon(Icons.restart_alt_sharp)),
              )
            ],
          ),
        ),
      ],
    );
  }

  funcTrade() {
    final color0 = Colors.amber;
    final color1 = Colors.yellow;
    final color2 = Colors.blue;
    final color3 = Colors.red;
    final color4 = Colors.purple;
    final color5 = Colors.pink;
    final color6 = Colors.green;

    var random = Random().nextInt(6);

    print(random);

    if (random == 0) {
      return color0;
    } else if (random == 1) {
      return color1;
    } else if (random == 2) {
      return color2;
    } else if (random == 3) {
      return color3;
    } else if (random == 4) {
      return color4;
    } else if (random == 5) {
      return color5;
    } else if (random == 6) {
      return color6;
    }
  }
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Matheus Brandino
| 4803.7k xp | 10196 posts
Alura Scuba Team Mobile Software Engineer

Olá, Vitor! Como vai?

Pelo que pude analisar no seu código, você fez um ótimo trabalho! No entanto, parece que há um pequeno problema na forma como você está usando a função funcTrade().

Atualmente, cada vez que você chama funcTrade(), ela gera uma nova cor aleatória. Isso significa que, quando você chama funcTrade() para definir a cor de cada um dos seus contêineres, cada um deles recebe uma cor diferente. Além disso, quando você chama setState(() { funcTrade(); }); no onPressed do seu botão, você está gerando uma nova cor aleatória, mas não está fazendo nada com ela.

Acredito que o que você quer é que todos os contêineres mudem para a mesma cor aleatória quando você pressiona o botão. Para conseguir isso, você pode armazenar a cor atual em uma variável de estado e usar essa variável para definir a cor dos seus contêineres. Então, quando você pressiona o botão, você pode chamar setState para atualizar a cor atual com uma nova cor aleatória.

Aqui está um exemplo de como você pode fazer isso:

class _ParamState extends State<Param> {
  Color currentColor = Colors.amber;  // Inicializa a cor atual

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Container(
                width: 90,
                height: 150,
                color: currentColor,  // Usa a cor atual
              ),
              Container(
                width: 90,
                height: 150,
                color: currentColor,  // Usa a cor atual
              ),
              Container(
                width: 90,
                height: 150,
                color: currentColor,  // Usa a cor atual
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: ElevatedButton(
                    onPressed: () {
                      setState(() {
                        currentColor = funcTrade();  // Atualiza a cor atual
                      });
                    },
                    child: Icon(Icons.restart_alt_sharp)),
              )
            ],
          ),
        ),
      ],
    );
  }

  // ...
}

Espero ter ajudado e bons estudos!