Una griglia di tessere

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 10 di 33.

Una galleria fotografica o la schermata iniziale di un'app mostra gli elementi affiancati in righe, non in un'unica lunga colonna. GridView.count dispone i suoi elementi in una griglia e scorre come un elenco:

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

crossAxisCount indica quanti riquadri ci sono in ogni riga. I riquadri riempiono le righe da sinistra a destra, poi inizia una nuova riga. Ogni riquadro è un quadrato e i riquadri di una riga condividono la sua larghezza.

mainAxisSpacing è lo spazio tra le righe e crossAxisSpacing è lo spazio tra i riquadri di una riga.

Sfida

Facile

I sei colori sono disposti in uno ListView, uno per riga. Mostrali invece in una griglia con due riquadri per riga: un GridView.count con crossAxisCount: 2. Mantieni 8 pixel di spazio tra i riquadri.

Provalo tu

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