Une grille de tuiles

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 10 sur 33.

Une galerie de photos ou l’écran d’accueil d’une application présente les éléments côte à côte, en rangées, et non dans une longue colonne. GridView.count dispose ses enfants en grille et défile comme une liste :

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

crossAxisCount indique combien de tuiles se trouvent dans chaque rangée. Les tuiles remplissent les rangées de gauche à droite, puis une nouvelle rangée commence. Chaque tuile est carrée, et les tuiles d’une rangée se partagent sa largeur.

mainAxisSpacing correspond à l’espace entre les rangées et crossAxisSpacing à l’espace entre les tuiles d’une rangée.

Défi

Facile

Les six couleurs sont empilées dans un ListView, à raison d’une par ligne. Affiche-les plutôt dans une grille de deux cases par ligne : un GridView.count avec crossAxisCount: 2. Garde un espacement de 8 pixels entre les cases.

Essayez vous-même

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