Siatka kafelków

Część sekcji Listy i ekrany ścieżki Flutter w Coddy. Lekcja 10 z 33.

Galeria zdjęć lub ekran główny aplikacji wyświetla elementy obok siebie w wierszach, a nie w jednej długiej kolumnie. GridView.count układa elementy podrzędne w siatkę i przewija ją jak listę:

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

crossAxisCount określa, ile kafelków mieści się w każdym wierszu. Kafelki wypełniają wiersze od lewej do prawej, a następnie zaczyna się nowy wiersz. Każdy kafelek jest kwadratem, a kafelki w wierszu mają taką samą szerokość.

mainAxisSpacing określa odstęp między wierszami, a crossAxisSpacing — odstęp między kafelkami w wierszu.

Wyzwanie

Łatwy

Sześć kolorów jest ułożonych jeden pod drugim w widoku ListView, po jednym w każdym wierszu. Zamiast tego wyświetl je w siatce z dwoma kafelkami w każdym wierszu: użyj widoku GridView.count z wartością crossAxisCount: 2. Zachowaj 8 pikseli odstępu między kafelkami.

Spróbuj swoich sił

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