1
resposta

Exercício do Faça como eu fiz - Versão Hogwarts

Decidi usar as cores das casas do meu livro favorito. Por usar o meu celular como emulador, não foi possível tirar foto. Mas é só colocar na frente do "home: ":

Antes de colar esse Scaffold depois do home, é preciso apagar todas as linhas que estão abaixo de home. Isso é, até os parenteses, colchetes e chaves

Scaffold(
        appBar: AppBar(
          leading: Container(),
          backgroundColor: Colors.black,
          title: Text('Casas de Hogwarts'),
            ),
          body: Container(
            color: Colors.grey[300],
            child: ListView(
              children: [
                Cores(Colors.amber, Colors.black, Colors.amber, Colors.amber),
                Cores(Colors.red[600], Colors.yellow[600], Colors.red[600], Colors.red[600]),
                Cores(Colors.blue[700], Colors.grey[300], Colors.blue[700], Colors.blue[700]),
                Cores(Colors.green, Colors.grey[300], Colors.green, Colors.green)
              ],
            ),
          ),
          )
    );
  }
}

class Cores extends StatelessWidget {
  final Color? color1;
  final Color? color2;
  final Color? color3;
  final Color? colorIcon;
  const Cores(this.color1,this.color2,this.color3,this.colorIcon,{super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            children: [
              Container(
                height: 140,
                width: 100,
                decoration: BoxDecoration(
                  color: color1,
                  borderRadius: BorderRadius.circular(16),
                  border: Border.all(
                    width: 3.0,
                    color: Colors.black
                  )
                ),
              ),
              Stack(
                alignment: AlignmentDirectional.center,
                children: [
                  Container(
                height: 140,
                width: 100,
                decoration: BoxDecoration(
                  color: color2,
                  borderRadius: BorderRadius.circular(16),
                  border: Border.all(
                    width: 3.0,
                    color: Colors.black
                  )
                ),
              ),
              Icon(Icons.group, size: 30, color: colorIcon,)
                ],
              ),
              Container(
                height: 140,
                width: 100,
                decoration: BoxDecoration(
                  color: color3,
                  borderRadius: BorderRadius.circular(16),
                  border: Border.all(
                    width: 3.0,
                    color: Colors.black
                  )
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}
1 resposta

Adoro suas referencias cara

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software