Ein Raster aus Kacheln

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

Eine Fotogalerie oder der Startbildschirm einer App zeigt Elemente nebeneinander in Reihen statt in einer langen Spalte. GridView.count ordnet seine Elemente in einem Raster an und lässt sich wie eine Liste scrollen:

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

crossAxisCount gibt an, wie viele Kacheln in jede Reihe kommen. Die Kacheln füllen die Reihen von links nach rechts und beginnen dann eine neue Reihe. Jede Kachel ist quadratisch, und die Kacheln einer Reihe teilen sich deren Breite.

mainAxisSpacing ist der Abstand zwischen den Reihen und crossAxisSpacing der Abstand zwischen den Kacheln einer Reihe.

Aufgabe

Einfach

Die sechs Farben sind in einer ListView untereinander angeordnet, eine pro Zeile. Zeige sie stattdessen in einem Raster mit zwei Kacheln pro Zeile an: mit einer GridView.count mit crossAxisCount: 2. Lass zwischen den Kacheln 8 Pixel Abstand.

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