Apakah itu widget dalam Flutter?

Question

Accepted Answer

Dalam Flutter, **segala-galanya ialah widget** — elemen UI (butang, teks, imej), struktur susun atur (baris, lajur, padding), dan juga aplikasi itu sendiri semuanya adalah widget. Widget ialah blok binaan tidak berubah (immutable) yang digubah untuk membentuk keseluruhan antara muka pengguna.

## Segala-galanya ialah 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).
```

## Menggubah widget menjadi pokok (tree)

```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 **pokok widget (widget tree)** — komposisi ialah corak teras (menggabungkan widget mudah menjadi UI yang kompleks).

## Widget tidak berubah (immutable); 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 ia penting

Memahami widget adalah asas kepada Flutter kerana **segala-galanya dalam Flutter ialah widget** — keseluruhan UI dibina daripadanya — jadi memahami model widget adalah pengetahuan asas yang penting untuk sebarang pembangunan Flutter.

Konsep teras — bahawa elemen yang kelihatan (teks, butang, imej), struktur susun atur (baris, lajur, padding), struktur halaman, dan juga aplikasi itu sendiri semuanya adalah **widget** — ialah ciri penentu cara Flutter berfungsi, dan memahaminya ialah titik permulaan untuk membina sebarang UI Flutter.

Memahami bahawa UI dibina dengan **menggubah widget menjadi pokok** (menyarangkan widget, menggabungkan yang mudah menjadi antara muka yang kompleks) ialah corak asas pembangunan Flutter — komposisi mengatasi pewarisan, membina UI kompleks daripada blok binaan yang mudah dan boleh guna semula.

Memahami bahawa **widget ialah penerangan tidak berubah** bagi UI (konfigurasi dan bukannya objek sebenar yang dirender, dengan Flutter membina semula secara cekap apabila state berubah) adalah penting untuk memahami cara model UI deklaratif Flutter berfungsi — anda menerangkan rupa yang sepatutnya UI ada, dan Flutter mengendalikan rendering secara cekap.

Model widget-dan-komposisi ini mendasari segala-galanya dalam Flutter: susun atur, gaya, pengurusan state, dan struktur semuanya berfungsi melalui widget.

Memandangkan widget ialah unit atom Flutter (segala-galanya ialah widget, UI ialah pokok widget yang dibina melalui komposisi) dan memahami model ini adalah asas mutlak untuk membina UI Flutter, memahami widget — bahawa segala-galanya ialah widget, komposisi menjadi pokok, dan sifat deklaratif tidak berubahnya — adalah pengetahuan asas Flutter yang penting, konsep teras yang setiap aspek pembangunan Flutter dibina daripadanya dan perkara pertama yang perlu difahami semasa mempelajari Flutter.