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