Widget: Fondasi Semua UI di Flutter

Widget adalah segalanya

Di Flutter tidak ada konsep "view" atau "komponen HTML" yang terpisah. Semua yang tampil di layar, bahkan yang tidak tampil seperti Padding atau Center, adalah widget. Widget itu immutable, artinya sekali dibuat tidak bisa diubah. Kalau UI perlu berubah, Flutter membuat widget baru dan mengganti yang lama.

Tiga tree di balik layar

Secara internal Flutter memakai tiga tree yang bekerja sama:

1. Widget tree: konfigurasi UI yang kamu tulis di kode. Ringan dan sering dibuat ulang.
2. Element tree: penghubung antara widget dan objek render. Element ini yang menyimpan state dan bertahan antar rebuild.
3. Render tree: objek yang benar-benar menghitung layout dan menggambar piksel.

Kamu tidak perlu menghafal detailnya, tapi pemahaman ini menjelaskan kenapa Flutter cepat: yang direbuild hanya widget tree (murah), sedangkan element tree yang mahal dipertahankan selama tipe widget dan key-nya sama.

Widget bawaan yang sering dipakai

Beberapa widget akan kamu pakai setiap hari:

Scaffold(
  appBar: AppBar(title: const Text('Widget Dasar')),
  body: const Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Baris pertama'),
        Text('Baris kedua'),
        Icon(Icons.star, color: Colors.amber),
      ],
    ),
  ),
)

Di sini Scaffold memberi kerangka layar, AppBar memberi bar atas, Center menengahkan isi, Column menyusun vertikal, dan Text serta Icon adalah kontennya.

const: performa gratis

Perhatikan kata kunci const di contoh. Widget yang dibuat dengan const hanya dibuat sekali saat compile dan dipakai ulang, sehingga rebuild lebih murah. Biasakan menambahkan const di widget yang tidak punya data berubah. Analyzer Flutter bahkan akan mengingatkanmu lewat lint prefer_const_constructors.

Catatan teknis: const hanya bisa dipakai kalau semua argumennya juga konstan. Kalau kamu memberi nilai dari variabel biasa ke widget const, compiler akan protes. Solusinya: biarkan widgetnya non-const, atau ubah variabelnya menjadi const juga. Jangan memaksa const dengan menghapus data dinamis yang sebenarnya dibutuhkan.