Widget & Widget Tree

Widget buatan sendiri

Di bab sebelumnya kamu memakai widget bawaan (Text, Center, Scaffold). Kamu juga bisa membuat widget sendiri — ibarat membuat balok Lego baru dari gabungan balok lain. Keuntungannya: bagian tampilan yang sama bisa dipakai berulang tanpa menyalin kode.

StatelessWidget: widget yang tidak berubah sendiri

Stateless berarti "tanpa keadaan yang berubah". Tampilannya hanya bergantung pada data yang diberikan dari luar. Cocok untuk judul, kartu, ikon, dan bagian tampilan lain yang statis.

class KartuSapaan extends StatelessWidget {
  final String nama;
  const KartuSapaan({super.key, required this.nama});

  @override
  Widget build(BuildContext context) {
    return Text('Halo, $nama!');
  }
}

• extends StatelessWidget — menyatakan "ini widget tanpa state".
• final String nama — data yang diterima dari luar. Pada widget, field-nya selalu final.
• const KartuSapaan({super.key, required this.nama}) — constructor. super.key adalah kebiasaan standar Flutter (pengenal internal); biarkan seperti ini.
• build(BuildContext context) — method yang menjelaskan tampilan. Flutter memanggilnya setiap kali widget perlu digambar, dan hasilnya adalah widget lain.

Memakai widget buatan sendiri

Column(
  children: [
    KartuSapaan(nama: 'Sari'),
    KartuSapaan(nama: 'Budi'),
  ],
)

Satu definisi, dua tampilan berbeda. Di layar tampil dua baris: Halo, Sari! dan Halo, Budi!.

Widget tree

Karena widget membungkus widget lain, seluruh layar membentuk pohon: akar di atas (MaterialApp), cabang di tengah (Scaffold, Column), dan daun di bawah (Text). Saat ada yang perlu digambar ulang, Flutter menelusuri pohon ini dari atas. Pecahlah tampilan yang besar menjadi widget-widget kecil agar kode mudah dibaca.

Kata const

const pada widget berarti "tidak akan berubah". Flutter bisa memakai ulang widget itu tanpa menghitung ulang, sehingga aplikasi lebih hemat tenaga. Jika Flutter menyarankan "add const", turutilah.