Une grille générée par un constructeur

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

Une grille de cent photos présente le même problème qu’une longue liste : tu ne peux pas écrire chaque vignette, et les créer toutes en même temps est lent. GridView.builder crée les vignettes au fur et à mesure du défilement, comme ListView.builder :

GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemCount: photos.length,
  itemBuilder: (context, index) {
    return Image.network(photos[index]);
  },
)

Le long nom SliverGridDelegateWithFixedCrossAxisCount définit la disposition de la grille : un nombre fixe de vignettes par rangée. Il prend en paramètres crossAxisCount et l’espacement, que GridView.count prenait directement.

itemCount et itemBuilder fonctionnent comme pour une liste : le générateur reçoit l’index de chaque vignette, en commençant à 0.

Défi

Facile

Le calendrier n’affiche que la première semaine de juin, écrite à la main. Remplace GridView.count par GridView.builder pour afficher les 30 jours, numérotés de 1 à 30, à raison de sept par ligne.

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('June')),
        body: GridView.count(
          padding: const EdgeInsets.all(8),
          crossAxisCount: 7,
          mainAxisSpacing: 4,
          crossAxisSpacing: 4,
          children: [
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('1'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('2'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('3'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('4'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('5'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('6'),
            ),
            Container(
              alignment: Alignment.center,
              color: Colors.teal.shade100,
              child: const Text('7'),
            ),
          ],
        ),
      ),
    );
  }
}