Apa itu widget di Flutter?

Question

Accepted Answer

Di Flutter, **semuanya adalah widget** — elemen UI (tombol, teks, gambar), struktur tata letak (baris, kolom, padding) dan bahkan aplikasi itu sendiri semuanya adalah widget. Widget adalah blok bangunan yang tidak dapat diubah yang tersusun untuk membentuk seluruh antarmuka pengguna.

## Semuanya adalah widget

```text
Widgets describe the UI. EVERYTHING is a widget:
  → visible elements: Text, Image, Icon, Button, etc.
  → layout: Row, Column, Container, Padding, Center, Stack, etc.
  → structure: Scaffold (page structure), AppBar, etc.
  → even the app itself (MaterialApp) and abstract things (Padding, Theme)
→ You build UI by COMPOSING widgets into a tree (widgets contain other widgets).
```

## Menyusun widget menjadi pohon

```dart
// build a UI by NESTING widgets (composition)
Scaffold(                       // page structure
  appBar: AppBar(title: Text('Home')),   // app bar with text
  body: Center(                 // centers its child
    child: Column(              // vertical layout
      children: [
        Text('Hello'),          // text widget
        ElevatedButton(         // a button
          onPressed: () {},
          child: Text('Click'),
        ),
      ],
    ),
  ),
)
// → a WIDGET TREE: Scaffold > Center > Column > [Text, Button]
```

Widget bersarang untuk membentuk **pohon widget** — komposisi adalah pola inti (menggabungkan widget sederhana menjadi UI yang kompleks).

## Widget tidak dapat diubah; konfigurasi

```text
→ Widgets are IMMUTABLE descriptions of the UI (configuration, not the actual rendered
  objects) — Flutter rebuilds them efficiently when state changes
→ build() methods return widget trees describing what the UI should look like
→ Flutter handles efficiently turning widgets into rendered pixels
```

## Mengapa ini penting

Memahami widget sangat fundamental untuk Flutter karena **semuanya di Flutter adalah widget** — seluruh UI dibangun darinya — jadi memahami model widget adalah pengetahuan penting dan fundamental untuk pengembangan Flutter apa pun.

Konsep inti — bahwa elemen visual (teks, tombol, gambar), struktur tata letak (baris, kolom, padding), struktur halaman, dan bahkan aplikasi itu sendiri **semuanya widget** — adalah karakteristik khas cara Flutter bekerja, dan memahaminya adalah titik awal untuk membangun UI Flutter apa pun.

Memahami bahwa UI dibangun dengan **menyusun widget menjadi pohon** (bersarang widget, menggabungkan yang sederhana menjadi antarmuka yang kompleks) adalah pola fundamental pengembangan Flutter — komposisi daripada warisan, membangun UI kompleks dari blok bangunan sederhana yang dapat digunakan kembali.

Memahami bahwa **widget adalah deskripsi UI yang tidak dapat diubah** (konfigurasi daripada objek yang sebenarnya dirender, dengan Flutter secara efisien membangun kembali ketika keadaan berubah) penting untuk memahami cara model UI deklaratif Flutter bekerja — Anda mendeskripsikan bagaimana UI seharusnya terlihat, dan Flutter menangani rendering secara efisien.

Model widget-dan-komposisi ini mendasari segalanya di Flutter: tata letak, gaya, manajemen status, dan struktur semuanya bekerja melalui widget.

Karena widget adalah unit atom Flutter (semuanya adalah widget, UI adalah pohon widget yang dibangun melalui komposisi) dan memahami model ini adalah fondasi mutlak untuk membangun UI Flutter, memahami widget — bahwa semuanya adalah widget, komposisi menjadi pohon, dan sifat deklaratif mereka yang tidak dapat diubah — adalah pengetahuan Flutter yang penting dan fundamental, konsep inti yang membangun setiap aspek pengembangan Flutter dan hal pertama yang perlu dipahami saat belajar Flutter.