Konsep Dasar Widget di Flutter: Mengapa Semuanya Dianggap Balok Lego?

Selamat datang di artikel ketiga seri belajar Flutter! Jika di artikel sebelumnya kita sudah berkenalan dengan bahasa Dart sebagai "mesin" penggeraknya, sekarang saatnya kita masuk ke bagian paling seru: Membangun Tampilan (UI).

Di Flutter, ada satu filosofi inti yang wajib Anda pegang erat-erat: Semuanya adalah Widget. Apa maksudnya? Mari kita bedah bersama secara santai.

Apa Itu Widget?

Jika Anda pernah bermain balok Lego sewaktu kecil, Anda pasti tahu bagaimana cara kerja mainan tersebut. Anda punya balok kecil berwarna merah untuk membuat dinding, balok panjang berwarna biru untuk atap, dan figur kecil sebagai penghuni rumahnya. Dengan menggabungkan potongan-potongan balok itu, Anda bisa membentuk sebuah istana yang megah.

Di Flutter, konsep pembuatan aplikasi bekerja tepat seperti itu.

Widget adalah blok bangunan terkecil yang menyusun antarmuka (User Interface) sebuah aplikasi.

Segala sesuatu yang Anda lihat, sentuh, atau rasakan di layar aplikasi Flutter Anda adalah sebuah widget.

• Teks judul di bagian atas? Itu widget.

• Tombol "Login" berwarna biru? Itu widget.

• Garis pembatas tipis? Widget.

• Bahkan spasi atau jarak kosong (padding) di antara dua tombol pun dihitung sebagai widget!

Pohon Widget (Widget Tree)

Karena semuanya adalah widget, aplikasi Flutter pada dasarnya adalah kumpulan widget yang disusun secara bertingkat-tingkat dari yang paling besar (paling luar) hingga yang paling kecil di dalam. Susunan ini dinamakan Widget Tree (Pohon Widget).

Mari kita lihat ilustrasi struktur pohon widget yang paling dasar dalam sebuah aplikasi Flutter:

MaterialApp (Aplikasi Utama)
 └── Scaffold (Kerangka Halaman Dasar)
      └── AppBar (Kepala Halaman / Judul)
           └── Text ("Halo Dunia")

• MaterialApp: Ini adalah widget akar (root) yang membungkus seluruh aplikasi agar mengikuti standar desain modern dari Google (Material Design).

• Scaffold: Berfungsi sebagai kerangka dasar layar HP Anda. Ia menyediakan tempat untuk AppBar, latar belakang layar, tombol melayang (FloatingActionButton), dan area isi utama (body).

• AppBar: Kotak bagian atas tempat menaruh judul halaman.

• Text: Widget untuk menampilkan tulisan huruf di layar.

Dua Kategori Utama Widget: Tampak vs Tidak Tampak

Meskipun semuanya disebut widget, secara garis besar widget di Flutter dibagi menjadi dua jenis fungsi:

1. Widget Visual (Yang Bisa Dilihat)

Widget ini memiliki wujud fisik di layar yang bisa dilihat oleh pengguna. Contohnya:

• Text: Menampilkan tulisan.

• Image: Menampilkan gambar atau foto.

• Icon: Menampilkan simbol kecil (seperti ikon panah, ikon keranjang belanja, dll).

• ElevatedButton: Menampilkan tombol interaktif yang bisa diklik.

2. Widget Struktural / Tata Letak (Yang Mengatur Posisi)

Widget ini tidak terlihat di layar, melainkan berfungsi untuk mengatur posisi, ukuran, atau perataan widget visual lainnya. Contohnya:

• Padding: Memberikan jarak kosong di sekitar widget agar tidak menempel ke pinggir layar.

• Center: Memaksa widget di dalamnya untuk berada tepat di tengah layar.

• SizedBox: Digunakan untuk memberikan kotak kosong dengan ukuran tinggi atau lebar tertentu (biasanya untuk membuat jarak antar tombol).

Contoh Kode Sederhana: Menyusun Balok Widget

Sebagai bayangan awal bagaimana kode Flutter ditulis menggunakan konsep widget ini, perhatikan contoh program di bawah. Jangan khawatir jika belum paham sepenuhnya, kita akan membahasnya perlahan: