Uma grade de blocos

Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 10 de 33.

Uma galeria de fotos ou a tela inicial de um app mostra itens lado a lado em linhas, não em uma única coluna longa. GridView.count organiza seus elementos filhos em uma grade e permite rolar como uma lista:

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 8,
  crossAxisSpacing: 8,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

crossAxisCount é a quantidade de blocos em cada linha. Os blocos preenchem as linhas da esquerda para a direita e, em seguida, começam uma nova linha. Cada bloco é um quadrado, e os blocos de uma linha compartilham sua largura.

mainAxisSpacing é o espaço entre as linhas e crossAxisSpacing é o espaço entre os blocos de uma linha.

Desafio

Fácil

As seis cores estão empilhadas em uma ListView, uma por linha. Em vez disso, mostre-as em uma grade com dois blocos por linha: uma GridView.count com crossAxisCount: 2. Mantenha 8 pixels de espaçamento entre os blocos.

Experimente você mesmo

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Colors')),
        body: ListView(
          padding: const EdgeInsets.all(8),
          children: [
            Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: const Text('Red'),
            ),
            Container(
              color: Colors.orange,
              alignment: Alignment.center,
              child: const Text('Orange'),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: const Text('Yellow'),
            ),
            Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('Green'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('Blue'),
            ),
            Container(
              color: Colors.purple,
              alignment: Alignment.center,
              child: const Text('Purple'),
            ),
          ],
        ),
      ),
    );
  }
}