Kisi dari Builder

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 11 dari 33.

Grid dengan seratus foto memiliki masalah yang sama seperti list panjang: kamu tidak bisa menulis setiap petak, dan membuat semuanya sekaligus membutuhkan waktu lama. GridView.builder membuat petak saat digulir hingga terlihat, seperti ListView.builder:

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

Nama panjang, SliverGridDelegateWithFixedCrossAxisCount, adalah tata letak grid: jumlah petak tetap per baris. Nama ini menerima crossAxisCount dan jarak yang diterima langsung oleh GridView.count.

itemCount dan itemBuilder bekerja sama seperti pada list: builder menerima index setiap petak, dimulai dari 0.

Tantangan

Mudah

Kalender hanya menampilkan minggu pertama bulan June, yang ditulis dengan tangan. Ganti GridView.count dengan GridView.builder yang menampilkan semua 30 hari, bernomor mulai dari 1, tujuh hari per baris.

Coba sendiri

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