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

Faça como eu fiz: o retorno do Widget

Boa tarde, fiz dessa forma, foi a maneira que achei pra fazer....

fariam de outra maneira???

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          leading: Container(),
          title: const Text("Desafio"),
        ),
        body: ListView(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                padding: const EdgeInsets.all(15.0),
                width: 400,
                height: 250,
                color: Colors.blue,
                child: const Catalogo(
                    icone: Icon(Icons.add_circle_outline_outlined),
                    cor1: Colors.yellow,
                    cor2: Colors.brown,
                    cor3: Colors.redAccent,
                    cor4: Colors.purple),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                padding: const EdgeInsets.all(15.0),
                width: 400,
                height: 250,
                color: Colors.yellow,
                child: const Catalogo(
                    icone: Icon(Icons.account_circle_sharp),
                    cor1: Colors.blue,
                    cor2: Colors.orange,
                    cor3: Colors.redAccent,
                    cor4: Colors.purple),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                padding: const EdgeInsets.all(15.0),
                width: 400,
                height: 250,
                color: Colors.brown,
                child: const Catalogo(
                    icone: Icon(Icons.ac_unit_rounded),
                    cor1: Colors.pink,
                    cor2: Color.fromARGB(255, 159, 163, 70),
                    cor3: Colors.redAccent,
                    cor4: Colors.purple),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Card extends StatelessWidget {
  final Color cor;
  final Icon? icone;
  const Card({this.icone, required this.cor, super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Container(
        width: 140,
        height: 200,
        decoration: BoxDecoration(
            color: cor,
            borderRadius: const BorderRadius.all(Radius.circular(20)),
            border: Border.all(
              color: Colors.black,
              width: 2,
            ),
            boxShadow: const [
              BoxShadow(
                  color: Colors.black,
                  blurRadius: 2,
                  spreadRadius: 2,
                  offset: Offset(2, 0))
            ]),
        child: icone,
      ),
    );
  }
}

class Catalogo extends StatelessWidget {
  final Color cor1;
  final Color cor2;
  final Color cor3;
  final Color cor4;
  final Icon? icone;

  const Catalogo(
      {this.icone,
      required this.cor1,
      required this.cor2,
      required this.cor3,
      required this.cor4,
      super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          Card(icone: null, cor: cor1),
          Card(icone: icone, cor: cor2),
          Card(icone: icone, cor: cor3),
          Card(icone: null, cor: cor4),
        ],
      ),
    );
  }
}

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

1 resposta
solução!

Oi Pedro, tudo bem?

Sua implementação está muito boa! É importante lembrar que existem diversas formas de se implementar um mesmo recurso em Flutter, então é possível que outras pessoas tenham feito de maneiras diferentes.

No entanto, o importante é que a sua implementação esteja funcionando corretamente e atendendo às suas necessidades.

Um abraço e bons estudos.