Ein Raster mit einem Builder

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 11 von 33.

Ein Raster mit hundert Fotos hat dasselbe Problem wie eine lange Liste: Du kannst nicht jede Kachel einzeln schreiben, und sie alle auf einmal zu erstellen, ist langsam. GridView.builder erstellt Kacheln, während sie beim Scrollen ins Bild kommen, genau wie ListView.builder:

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

Der lange Name SliverGridDelegateWithFixedCrossAxisCount bezeichnet das Layout des Rasters: eine feste Anzahl von Kacheln pro Zeile. Er übernimmt crossAxisCount und den Abstand, die GridView.count direkt entgegennahm.

itemCount und itemBuilder funktionieren genauso wie bei einer Liste: Der Builder erhält den index jeder Kachel, beginnend bei 0.

Aufgabe

Einfach

Der Kalender zeigt nur die erste Juniwoche, die von Hand eingetragen wurde. Ersetze GridView.count durch ein GridView.builder, das alle 30 Tage anzeigt, nummeriert von 1 an, mit sieben Tagen pro Zeile.

Probier es selbst

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