Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] [Projeto] Faça como eu fiz - Stateless Widget

Boa noite!

Criei um widget stateless que recebe os parâmetros width, height e color e os mesmos definem a cor e o tamanho aleatoriamente de um Container dentro de um Center que será renderizado!

O widget renderizado na propriedade home do MaterialApp é um stateful widget.

Este stateful widget renderizará o widget mencionado acima na propriedade body por se tratar de um Scaffold, e também possui um botão com o texto 'Mudar quadrado' que ao ser clicado altera o estado do stateful widget calculando um valor aleatório de cor e tamanho para o stateless widget via parâmetros.

Abraços e obrigado pela aula!

import 'dart:math';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double width = 0;
  double height = 0;
  Color color = Colors.transparent;

  double generateRandomNumber() {
    final random = Random();
    int min = 50;
    int max = 200;
    int rand = random.nextInt(max) + min;
    return rand.toDouble();
  }

  Color generateRandomColor() {
    final Random random = Random();
    return Color.fromARGB(
      255,
      random.nextInt(256),
      random.nextInt(256),
      random.nextInt(256),
    );
  }

  void _change() {
    setState(() {
      width = generateRandomNumber();
      height = generateRandomNumber();
      color = generateRandomColor();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MyWidget(width, height, color),
      floatingActionButton: TextButton(
        child: Text("Mudar quadrado"),
        onPressed: () => {_change()},
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final double width;
  final double height;
  final Color color;
  const MyWidget(this.width, this.height, this.color, {super.key});

  @override
  Widget build(BuildContext context) {
    return Center(child: Container(color: color, width: width, height: height));
  }
}
1 resposta
solução!

Olá Gabriel, tudo bem com você?

Seu código está muito bem estruturado. Inclusive, testei em minha máquina e funcionou corretamente, como mostro no GIF abaixo:

Gif que mostra a execução do projeto do aluno, onde no clique do botão é alterado a cor

Parabéns pelo empenho e por dispor do seu tempo para compartilhar aprendizagens com a comunidade Alura.

Sucesso na sua carreira!