Una cuadrícula de mosaicos

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 10 de 33.

Una galería de fotos o la pantalla de inicio de una aplicación muestra elementos uno al lado del otro en filas, no en una sola columna larga. GridView.count organiza sus elementos secundarios en una cuadrícula y se desplaza como una lista:

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

crossAxisCount indica cuántos mosaicos van en cada fila. Los mosaicos llenan las filas de izquierda a derecha y después empiezan una fila nueva. Cada mosaico es un cuadrado y los mosaicos de una fila comparten su ancho.

mainAxisSpacing es el espacio entre las filas y crossAxisSpacing es el espacio entre los mosaicos de una fila.

Desafío

Fácil

Los seis colores están apilados en un ListView, uno por fila. Muéstralos en una cuadrícula con dos mosaicos por fila: un GridView.count con crossAxisCount: 2. Mantén 8 píxeles de espacio entre los mosaicos.

Pruébalo tú mismo

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'),
            ),
          ],
        ),
      ),
    );
  }
}