Bir Oluşturucudan Izgara

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

Yüz fotoğraftan oluşan bir ızgarada da uzun bir listedekiyle aynı sorun vardır: Her kutucuğu tek tek yazamazsın ve hepsini aynı anda oluşturmak yavaştır. GridView.builder, ListView.builder gibi, kutucukları ekrana kaydırıldıkça oluşturur:

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

Uzun adı SliverGridDelegateWithFixedCrossAxisCount olan bu yapı, ızgaranın düzenini belirler: her satırdaki kutucuk sayısı sabittir. Doğrudan GridView.count'a verilen crossAxisCount ve aralık değerlerini alır.

itemCount ve itemBuilder, listedekiyle aynı şekilde çalışır: oluşturucu, 0'dan başlayarak her kutucuğun index değerini alır.

Görev

Kolay

Takvim, elle yazılmış Haziran ayının yalnızca ilk haftasını gösteriyor. GridView.count öğesini, 30 günün tamamını gösteren ve her satırda yedi gün olacak şekilde 1'den başlayarak numaralandıran bir GridView.builder ile değiştir.

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