Widget trong Flutter là gì?

Question

Accepted Answer

Trong Flutter, **mọi thứ đều là widget** — các phần tử UI (button, text, image), cấu trúc layout (row, column, padding), và thậm chí cả ứng dụng cũng đều là widget. Widget là các khối xây dựng bất biến (immutable) kết hợp lại để tạo nên toàn bộ giao diện người dùng.

## Mọi thứ đều là widget

```text
Widget mô tả UI. MỌI THỨ đều là widget:
  → phần tử hiển thị: Text, Image, Icon, Button, v.v.
  → layout: Row, Column, Container, Padding, Center, Stack, v.v.
  → cấu trúc: Scaffold (cấu trúc trang), AppBar, v.v.
  → thậm chí cả ứng dụng (MaterialApp) và những thứ trừu tượng (Padding, Theme)
→ Bạn xây dựng UI bằng cách KẾT HỢP các widget thành một cây (widget chứa các widget khác).
```

## Kết hợp widget thành một cây

```dart
// xây dựng UI bằng cách LỒNG các widget (composition)
Scaffold(                       // cấu trúc trang
  appBar: AppBar(title: Text('Home')),   // app bar có text
  body: Center(                 // căn giữa child của nó
    child: Column(              // layout dọc
      children: [
        Text('Hello'),          // widget text
        ElevatedButton(         // một button
          onPressed: () {},
          child: Text('Click'),
        ),
      ],
    ),
  ),
)
// → một CÂY WIDGET: Scaffold > Center > Column > [Text, Button]
```

Các widget lồng vào nhau để tạo thành một **cây widget** — composition là mẫu cốt lõi (kết hợp các widget đơn giản thành UI phức tạp).

## Widget là immutable; cấu hình

```text
→ Widget là các mô tả BẤT BIẾN của UI (cấu hình, không phải đối tượng được render thực sự)
  — Flutter rebuild chúng một cách hiệu quả khi state thay đổi
→ Các phương thức build() trả về cây widget mô tả UI nên trông như thế nào
→ Flutter xử lý việc biến widget thành các pixel được render một cách hiệu quả
```

## Tại sao điều này quan trọng

Hiểu widget là nền tảng của Flutter vì **mọi thứ trong Flutter đều là widget** — toàn bộ UI được xây dựng từ chúng — nên nắm vững mô hình widget là kiến thức nền tảng thiết yếu cho bất kỳ phát triển Flutter nào.

Khái niệm cốt lõi — rằng các phần tử hiển thị (text, button, image), cấu trúc layout (row, column, padding), cấu trúc trang, và thậm chí cả ứng dụng đều là **widget** — là đặc điểm định hình cách Flutter hoạt động, và hiểu nó là điểm khởi đầu để xây dựng bất kỳ UI Flutter nào.

Hiểu rằng UI được xây dựng bằng cách **kết hợp các widget thành một cây** (lồng các widget, kết hợp những widget đơn giản thành giao diện phức tạp) là mẫu cơ bản của phát triển Flutter — composition thay vì kế thừa, xây dựng UI phức tạp từ các khối đơn giản, tái sử dụng được.

Hiểu rằng **widget là mô tả bất biến** của UI (cấu hình thay vì đối tượng được render thực sự, với Flutter rebuild chúng hiệu quả khi state thay đổi) là quan trọng để hiểu cách mô hình UI khai báo (declarative) của Flutter hoạt động — bạn mô tả UI nên trông như thế nào, và Flutter xử lý render một cách hiệu quả.

Mô hình widget-và-composition này nằm dưới mọi thứ trong Flutter: layout, styling, quản lý state và cấu trúc đều hoạt động thông qua widget.

Vì widget là đơn vị nguyên tử của Flutter (mọi thứ đều là widget, UI là các cây widget được xây dựng bằng composition) và hiểu mô hình này là nền tảng tuyệt đối để xây dựng UI Flutter, hiểu widget — rằng mọi thứ đều là widget, kết hợp thành cây, và bản chất khai báo bất biến của chúng — là kiến thức Flutter nền tảng thiết yếu, khái niệm cốt lõi mà mọi khía cạnh của phát triển Flutter đều dựa vào và là điều đầu tiên cần hiểu khi học Flutter.