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 Inserindo imagens e animações e atividade Faça como eu fiz: o retorno do Widget

por Vitor Freire
| 16k xp | 23 posts
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(
          leading: Icon(Icons.edit_note),
          title: Text('Flutter, Atividade'),
        ),
        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: [
              Padding(
                padding: const EdgeInsets.all(3.0),
                child: Container(
                  child: Icon(Icons.question_mark_sharp),
                  width: 90,
                  height: 150,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    border: Border.all(color: Colors.black, width: 3),
                    color: funcTrade(),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(3.0),
                child: Container(
                  child: Icon(Icons.question_mark_sharp),
                  width: 90,
                  height: 150,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    border: Border.all(color: Colors.black, width: 3),
                    color: funcTrade(),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(3.0),
                child: Container(
                  child: Icon(Icons.question_mark_sharp),
                  width: 90,
                  height: 150,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    border: Border.all(color: Colors.black, width: 3),
                    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 acessibilidade

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

Olá, Vitor! Parece que você está fazendo um ótimo trabalho com seu projeto Flutter!

Pelo que entendi, você está tentando alterar a cor dos containers quando o botão é pressionado, certo? No entanto, parece que a função funcTrade() está sendo chamada apenas uma vez quando o widget é construído e o valor retornado é usado para definir a cor do container. Quando o botão é pressionado, a função funcTrade() é chamada novamente, mas o valor retornado não está sendo usado para nada.

Uma possível solução seria armazenar a cor retornada pela função funcTrade() em uma variável de estado e usar essa variável para definir a cor do container. Quando o botão é pressionado, você pode chamar funcTrade() novamente e atualizar a variável de estado com o novo valor. Isso fará com que o widget seja reconstruído com a nova cor.

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

class _ParamState extends State<Param> {
  Color _color; // Variável de estado para armazenar a cor

  @override
  void initState() {
    super.initState();
    _color = funcTrade(); // Inicializa a cor quando o widget é criado
  }

  @override
  Widget build(BuildContext context) {
    // ...
    Container(
      color: _color, // Usa a variável de estado para definir a cor
      // ...
    ),
    ElevatedButton(
      onPressed: () {
        setState(() {
          _color = funcTrade(); // Atualiza a cor quando o botão é pressionado
        });
      },
      child: Icon(Icons.restart_alt_sharp),
    )
    // ...
  }

  Color funcTrade() {
    // ...
  }
}

Espero que isso ajude a resolver o problema! Lembre-se de que esta é apenas uma sugestão e pode ser necessário fazer alguns ajustes para se adequar ao seu código. Espero ter ajudado e bons estudos!