Una cuadrícula creada con un constructor

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

Una cuadrícula de cien fotos tiene el mismo problema que una lista larga: no puedes escribir cada celda, y crearlas todas a la vez es lento. GridView.builder crea las celdas a medida que aparecen al desplazarte, como ListView.builder:

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

El nombre largo, SliverGridDelegateWithFixedCrossAxisCount, define la disposición de la cuadrícula: un número fijo de celdas por fila. Recibe crossAxisCount y el espaciado que GridView.count recibía directamente.

itemCount y itemBuilder funcionan igual que en una lista: el creador recibe el index de cada celda, empezando en 0.

Desafío

Fácil

El calendario muestra solo la primera semana de junio, escrita a mano. Reemplaza GridView.count por un GridView.builder que muestre los 30 días, numerados del 1 en adelante, siete por fila.

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