1
resposta

Resposta do exercicio!

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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 50,
              height: 50,
              color: Colors.pink,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.brown,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.green,
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 50,
              height: 50,
              color: Colors.white,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.purple,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.greenAccent,
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: 50,
              height: 50,
              color: Colors.yellow,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.red,
            ),
          ],
        )
      ]),
    );
  }
}

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

1 resposta

Olá, Vitor!

Pelo que pude entender, você está tentando replicar o exemplo dado na atividade, certo? Seu código parece estar correto e você seguiu a ideia de criar Containers com cores distintas e organizá-los em Rows dentro de uma Column, muito bem!

O que notei é que seu layout está um pouco diferente do exemplo dado na atividade. No exemplo, os Containers estão dispostos de forma que parecem formar uma grade 3x3, enquanto no seu código, eles estão organizados em uma coluna com três linhas, cada uma com três Containers.

Se você quiser replicar exatamente o exemplo da atividade, você pode tentar usar o widget GridView ao invés de usar Rows e Columns. O GridView permite que você organize seus widgets em uma grade, o que parece ser o objetivo do exemplo.

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

GridView.count(
  crossAxisCount: 3,
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.pink,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.brown,
    ),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
    // Continue com os demais Containers aqui...
  ],
)

Note que o parâmetro crossAxisCount define o número de colunas na grade. No seu caso, você quer 3 colunas, então definimos o valor como 3. Em seguida, você pode adicionar seus Containers à lista de children do GridView.

Espero ter ajudado e bons estudos!