Kisi Ubin

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

Galeri foto atau layar beranda aplikasi menampilkan berbagai item berdampingan dalam baris, bukan dalam satu kolom panjang. GridView.count menata anak-anaknya dalam grid dan dapat digulir seperti list:

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

crossAxisCount menentukan jumlah ubin di setiap baris. Ubin mengisi baris dari kiri ke kanan, lalu memulai baris baru. Setiap ubin berbentuk persegi, dan ubin-ubin dalam satu baris berbagi lebar baris tersebut.

mainAxisSpacing adalah jarak antara baris, sedangkan crossAxisSpacing adalah jarak antara ubin dalam satu baris.

Tantangan

Mudah

Enam warna ditumpuk dalam ListView, satu warna per baris. Tampilkan semuanya dalam kisi dengan dua ubin per baris: gunakan GridView.count dengan crossAxisCount: 2. Beri jarak 8 piksel di antara ubin.

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