Learn
← Previous Next →

Hari 18: ListView & GridView

60 min Last updated 09 Apr 2026

ListView

import "package:flutter/material.dart";

class ProdukItem {
  final String nama;
  final double harga;
  final String emoji;
  ProdukItem(this.nama, this.harga, this.emoji);
}

class TokoProduk extends StatelessWidget {
  final List produk = [
    ProdukItem("Laptop Gaming", 15000000, "💻"),
    ProdukItem("Smartphone", 8000000, "📱"),
    ProdukItem("Headphone", 500000, "🎧"),
    ProdukItem("Keyboard", 750000, "⌨️"),
    ProdukItem("Mouse", 300000, "🖱️"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Toko Digital")),
      body: ListView.builder(
        itemCount: produk.length,
        itemBuilder: (context, index) {
          final p = produk[index];
          return ListTile(
            leading: Text(p.emoji, style: TextStyle(fontSize: 32)),
            title: Text(p.nama),
            subtitle: Text("Rp ${p.harga.toStringAsFixed(0)}"),
            trailing: ElevatedButton(
              onPressed: () {},
              child: Text("Beli"),
            ),
          );
        },
      ),
    );
  }
}

GridView

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 1.5,
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
  ),
  itemCount: items.length,
  itemBuilder: (context, index) => Card(
    child: Center(child: Text(items[index])),
  ),
)

💡 Notice: fold() seperti reduce tapi bisa menentukan nilai awal (initial value).

Assignment

Filter, sort, dan cetak produk elektronik, lalu hitung total nilai stok.

Expected output:

=== Produk Elektronik ===
1. Mouse — Rp 300000 (stok: 15)
2. Headphone — Rp 500000 (stok: 8)
3. Laptop — Rp 15000000 (stok: 5)
Total nilai stok: Rp 83600000
Dart main.dart
Solution
Output