Widget — apa itu, jenis dan komposisi di Flutter

Apa itu Widget di Flutter

Widget di Flutter adalah deskripsi yang tidak dapat diubah (immutable) dari bagian antarmuka pengguna. Setiap Widget berisi properti konfigurasi: ukuran, warna, posisi, teks, penangan acara, dan Widget anak. Widget itu sendiri tidak dirender secara langsung — mereka adalah resep (blueprints) yang menjadi dasar Flutter Engine membuat RenderObject — objek grafis nyata di layar.

Filosofi Flutter mengatakan: “Everything is a Widget”. Ini berarti tidak hanya elemen yang terlihat (Text, Image, Button) adalah Widget, tetapi juga blok struktural (Padding, Center, Column, Stack), blok perilaku (GestureDetector, AnimatedBuilder), dan bahkan aplikasi itu sendiri (MaterialApp, CupertinoApp). Pendekatan ini memastikan keseragaman: setiap elemen layar dapat dikombinasikan dengan elemen lain melalui penumpukan sederhana.

Menurut data Google I/O 2024 — Flutter Widgets Deep Dive, aplikasi rata-rata di Flutter mengandung antara 200 hingga 1500 Widget dalam satu waktu. Meskipun jumlah ini besar, Flutter mempertahankan 60 FPS bahkan pada perangkat budget berkat optimalisasi di tingkat mesin C++ Skia/Impeller. Widget adalah objek ringan (40–80 byte masing-masing), sehingga pembuatannya bukanlah hambatan kinerja.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Halo, Flutter!'),
        ),
      ),
    );
  }
}

Tiga pohon Flutter: Widget, Element, dan RenderObject

Untuk memahami cara kerja Widget, Anda perlu mengenal arsitektur Flutter yang terdiri dari tiga pohon yang saling terhubung. Pertama — Widget tree — mendeskripsikan konfigurasi UI. Ini adalah pohon ringan yang dapat dibangun kembali sepenuhnya pada setiap frame (garbage collector menghapus Widget lama dan membuat yang baru). Widget bersifat immutable: jika warna teks berubah — Widget Text baru dengan warna baru dibuat, yang lama dibuang.

Pohon kedua — Element tree — adalah penghubung antara Widget dan RenderObject. Element berisi referensi ke Widget (konfigurasi) dan ke RenderObject (rendering). Ketika Widget berubah, Flutter membandingkan Widget baru dengan Element lama dan memutuskan: memperbarui RenderObject yang ada (jika Widget bertipe sama) atau membuat yang baru (jika tipe Widget berubah). Proses ini disebut Reconciliation dan merupakan analog dari React Virtual DOM.

Pohon ketiga — RenderObject tree — bertanggung jawab untuk rendering aktual di layar. RenderObject berisi ukuran konkret, posisi, dan metode paint. Flutter Engine (C++ Skia atau Impeller) melintasi RenderObject tree dan merender setiap simpul. RenderObject tree adalah pohon terberat, oleh karena itu Flutter meminimalkan perubahannya dengan menggunakan kembali RenderObject saat mengganti Widget dengan tipe yang sama.

StatelessWidget vs StatefulWidget

Flutter membagi Widget menjadi dua tipe fundamental: StatelessWidget dan StatefulWidget. StatelessWidget adalah widget yang tidak mengandung status yang dapat berubah. Tampilan StatelessWidget sepenuhnya ditentukan oleh konstruktornya dan tidak dapat berubah setelah rendering. Contoh: Text, Icon, Divider, Padding. Semua properti StatelessWidget dideklarasikan sebagai final di konstruktor dan bersifat read-only.

StatefulWidget adalah widget dengan status yang dapat berubah. Terdiri dari dua kelas: Widget itu sendiri (konfigurasi tidak berubah, seperti StatelessWidget) dan State (status yang dapat berubah). Pemisahan Widget dari State adalah keputusan arsitektur kunci Flutter. Widget dibuat ulang setiap build, tetapi objek State tetap hidup sepanjang siklus hidup widget di pohon, mempertahankan statusnya.

Ketika setState() dipanggil, Flutter menandai State sebagai “kotor” dan pada frame berikutnya memanggil metode build() untuk membangun ulang subpohon. Penting: setState() tidak membuat ulang Widget itu sendiri — hanya memicu panggilan build() di State yang ada. Ini berarti StatefulWidget dapat memperbarui UI tanpa kehilangan status Widget anak, selama kunci (Key) elemen anak tetap stabil.

// StatelessWidget — tampilan tidak pernah berubah
class GreetingWidget extends StatelessWidget {
  const GreetingWidget({super.key, required this.name});
  final String name;

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

// StatefulWidget — penghitung dengan status yang dapat berubah
class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Hitungan: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Tambah'),
        ),
      ],
    );
  }
}

Jenis Widget: layout, painting, interactive

Semua Widget di Flutter dapat dibagi menjadi tiga kategori utama berdasarkan tujuan fungsionalnya. Layout Widget — bertanggung jawab atas penempatan elemen anak di layar. Row dan Column menempatkan anak dalam satu baris, Stack menumpuk satu di atas yang lain, Expanded dan Flexible mendistribusikan ruang yang tersedia. Layout Widget tidak memiliki representasi visual sendiri — mereka mengelola posisi dan ukuran widget anak.

Painting Widget — bertanggung jawab atas penampilan visual. Container menggabungkan dekorasi (warna, gradien, bayangan, batas) dengan properti layout. Padding menambahkan spasi, DecoratedBox menggambar latar belakang, Transform menerapkan transformasi (rotasi, penskalaan). Painting Widget adalah blok bangunan gaya visual dan sering digunakan bersama dengan layout Widget untuk mencapai tampilan yang diinginkan.

Interactive Widget — memproses masukan pengguna. GestureDetector mendeteksi gerakan (tap, swipe, pinch), InkWell menambahkan efek ripple Material, TextField menerima masukan teks, Slider dan Switch menyediakan kontrol standar. Interactive Widget memunculkan acara melalui fungsi callback yang diteruskan ke konstruktor atau ditangani melalui penyedia status.

Menurut data Flutter Widget of the Week (Google, 2025), komunitas Flutter secara aktif menggunakan kombinasi layout + painting + interactive Widget untuk membangun hampir semua antarmuka. Misalnya, tombol: InkWell (interactive) + Container (painting) + Text (static) + Padding (layout). Modularitas semacam ini memungkinkan penggunaan kembali blok standar dalam konteks berbeda tanpa duplikasi kode.

Komposisi Widget dan BuildContext

Komposisi Widget adalah proses membangun UI dengan menumpuk Widget satu di dalam yang lain. Berbeda dengan pewarisan klasik (extends), di mana kelas anak mewarisi perilaku induk, Flutter menggunakan agregasi: setiap Widget berisi Widget lain melalui parameter child (untuk satu) atau children (untuk banyak). Pendekatan ini memberikan fleksibilitas dan kemampuan penggunaan kembali yang lebih besar.

BuildContext adalah konsep terpenting kedua setelah Widget. BuildContext adalah deskriptor posisi Widget di pohon elemen. Melalui BuildContext, Widget dapat mengakses Widget leluhur (Theme.of(context), MediaQuery.of(context), Navigator.of(context)). BuildContext diteruskan ke metode build() dan digunakan untuk interaksi dengan elemen induk dan anak. Setiap Widget memiliki tepat satu BuildContext yang secara unik mengidentifikasi posisinya di pohon.

Menurut Flutter Architectural Overview (Google, 2025), BuildContext adalah dasar untuk InheritedWidget — mekanisme yang memungkinkan data diteruskan ke bawah pohon tanpa pengiriman eksplisit melalui konstruktor. Theme, MediaQuery, Navigator, dan Provider menggunakan InheritedWidget di bawah tenda. Widget yang ditumpuk dalam dapat mengakses data leluhur melalui BuildContext.dependOnInheritedWidgetOfExactType, yang menjadikan BuildContext kunci arsitektur reaktif Flutter.

// Komposisi Widget melalui penumpukan
Scaffold(
  appBar: AppBar(title: const Text('Aplikasi Saya')),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Selamat datang di Flutter',
          style: TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () { /* nav */ },
          child: const Text('Mulai'),
        ),
      ],
    ),
  ),
)

// Akses tema melalui BuildContext
Text(
  'Teks Bergaya',
  style: Theme.of(context).textTheme.headlineMedium,
)

Kesalahan umum dengan Widget

Kesalahan pertama dan paling umum — menggunakan StatefulWidget di mana StatelessWidget sudah cukup. Banyak pengembang Flutter pemula membuat StatefulWidget untuk semua widget, bahkan jika status disimpan di penyedia eksternal (Provider, Riverpod, BLoC). Ini berlebihan dan menurunkan kinerja. Aturan: gunakan StatelessWidget jika status dikelola dari luar atau jika widget tidak memiliki status yang dapat berubah sendiri.

Kesalahan kedua — membuat Widget di dalam metode build tanpa konstruktor const. Setiap Widget yang dibuat tanpa const dialokasikan ulang setiap build. Jika di dalam build() Widget dibuat dengan konstruktor const, Flutter dapat menggunakan kembali instance yang sama, mengurangi beban pada garbage collector. Tambahkan const di mana pun memungkinkan — terutama untuk Text, Icon, SizedBox, Padding, dan StatelessWidget lainnya.

Kesalahan ketiga — bekerja dengan kunci (Key) yang salah. Flutter menggunakan Key untuk mengidentifikasi Widget saat membangun ulang pohon. Jika daftar Widget dibangun ulang tanpa Key, Flutter dapat mengacaukan urutan elemen, yang menyebabkan animasi yang salah atau hilangnya status. Selalu tambahkan Key (misalnya, ValueKey atau ObjectKey) untuk elemen dalam daftar, terutama saat menggunakan ListView.builder dengan data dinamis.