Custom Widget: Membuat Widget Reusable

Penjelasan

Untuk kombinasi widget yang dipakai berulang (mis. kartu produk), sebaiknya diekstrak jadi class widget custom sendiri (turunan StatelessWidget atau StatefulWidget) — mirip component di React/Vue. Data dikirim lewat parameter constructor (required this.namaParameter), dibaca di method build().

Contoh Konsep

class KartuProduk extends StatelessWidget {
    final String nama;
    final int harga;

    const KartuProduk({super.key, required this.nama, required this.harga});

    @override
    Widget build(BuildContext context) {
        return Card(
            child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                    children: [
                        Text(nama, style: const TextStyle(fontWeight: FontWeight.bold)),
                        Text('Rp $harga'),
                    ],
                ),
            ),
        );
    }
}

// Pemakaian: const KartuProduk(nama: 'Kaos', harga: 99000)

Praktikum

Buat class KartuArtikel (StatelessWidget) dengan parameter required judul dan penulis (keduanya String), tampilkan dalam Card berisi Column dengan dua Text. Pakai widget itu minimal 2 kali dengan data berbeda.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Konstruktor const (seperti const KartuProduk(...)) HANYA valid kalau SEMUA properti widget-nya juga final dan nilainya diketahui saat compile-time — kalau salah satu properti butuh nilai yang dihitung saat runtime, hapus kata const dari constructor call-nya, jangan dipaksakan.