Döşemelerden Oluşan Bir Izgara

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 10 / 33.

Bir fotoğraf galerisi veya bir uygulamanın ana ekranı, öğeleri tek bir uzun sütunda değil, satırlar halinde yan yana gösterir. GridView.count, alt öğelerini bir ızgara düzeninde yerleştirir ve bir liste gibi kaydırılır:

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

crossAxisCount, her satıra kaç karenin yerleşeceğini belirtir. Kareler satırları soldan sağa doldurur, ardından yeni bir satıra geçer. Her kare karedir ve aynı satırdaki kareler satırın genişliğini paylaşır.

mainAxisSpacing, satırlar arasındaki boşluktur; crossAxisSpacing ise bir satırdaki kareler arasındaki boşluktur.

Görev

Kolay

Altı renk, her satırda bir tane olacak şekilde bir ListView içinde üst üste dizilmiştir. Bunun yerine renkleri, her satırda iki kutucuk olacak şekilde bir ızgarada göster: crossAxisCount: 2 değerine sahip bir GridView.count. Kutucuklar arasında 8 piksel boşluk bırak.

Kendin dene

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