widget ใน Flutter คืออะไร?

Question

Accepted Answer

ใน Flutter **ทุกอย่างคือ widget** — องค์ประกอบ UI (ปุ่ม ข้อความ รูปภาพ) โครงสร้างเลย์เอาต์ (แถว คอลัมน์ padding) และแม้แต่ตัวแอปเองก็เป็น widget ทั้งหมด widget คือ building block ที่ไม่เปลี่ยนแปลง (immutable) ซึ่งประกอบกันเป็นอินเทอร์เฟซผู้ใช้ทั้งหมด

## ทุกอย่างคือ 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).
```

## ประกอบ widget เป็น 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 ซ้อนกันเพื่อสร้าง **widget tree** — การประกอบ (composition) คือรูปแบบหลัก (รวม widget ง่าย ๆ ให้เป็น UI ที่ซับซ้อน)

## widget ไม่เปลี่ยนแปลง; เป็นการกำหนดค่า

```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
```

## ทำไมจึงสำคัญ

การเข้าใจ widget เป็นพื้นฐานของ Flutter เพราะ **ทุกอย่างใน Flutter คือ widget** — UI ทั้งหมดถูกสร้างจากมัน — ดังนั้นการเข้าใจโมเดล widget จึงเป็นความรู้พื้นฐานที่จำเป็นสำหรับการพัฒนา Flutter ใด ๆ

แนวคิดหลัก — ที่ว่าองค์ประกอบที่มองเห็นได้ (ข้อความ ปุ่ม รูปภาพ) โครงสร้างเลย์เอาต์ (แถว คอลัมน์ padding) โครงสร้างหน้า และแม้แต่ตัวแอปเอง ล้วนเป็น **widget ทั้งหมด** — คือคุณลักษณะที่นิยามวิธีการทำงานของ Flutter และการเข้าใจมันเป็นจุดเริ่มต้นสำหรับการสร้าง UI ของ Flutter ใด ๆ

การเข้าใจว่า UI ถูกสร้างขึ้นโดยการ **ประกอบ widget เป็น tree** (การซ้อน widget การรวม widget ง่าย ๆ ให้เป็นอินเทอร์เฟซที่ซับซ้อน) เป็นรูปแบบพื้นฐานของการพัฒนา Flutter — composition over inheritance การสร้าง UI ที่ซับซ้อนจาก building block ที่เรียบง่ายและนำกลับมาใช้ใหม่ได้

การเข้าใจว่า **widget เป็นคำอธิบายที่ไม่เปลี่ยนแปลง (immutable)** ของ UI (เป็นการกำหนดค่ามากกว่าเป็นวัตถุที่เรนเดอร์จริง โดย Flutter จะ rebuild พวกมันอย่างมีประสิทธิภาพเมื่อ state เปลี่ยน) เป็นสิ่งสำคัญต่อการทำความเข้าใจว่าโมเดล UI แบบ declarative ของ Flutter ทำงานอย่างไร — คุณอธิบายว่า UI ควรมีหน้าตาอย่างไร แล้ว Flutter จัดการการเรนเดอร์อย่างมีประสิทธิภาพ

โมเดล widget-and-composition นี้อยู่เบื้องหลังทุกอย่างใน Flutter: เลย์เอาต์ การจัดสไตล์ การจัดการ state และโครงสร้างล้วนทำงานผ่าน widget

เนื่องจาก widget เป็นหน่วยพื้นฐานที่สุดของ Flutter (ทุกอย่างคือ widget UI คือ widget tree ที่สร้างด้วยการประกอบ) และการเข้าใจโมเดลนี้เป็นรากฐานที่แท้จริงสำหรับการสร้าง UI ของ Flutter การเข้าใจ widget — ที่ว่าทุกอย่างคือ widget การประกอบเป็น tree และธรรมชาติ declarative ที่ไม่เปลี่ยนแปลงของมัน — จึงเป็นความรู้พื้นฐานที่จำเป็นของ Flutter ซึ่งเป็นแนวคิดหลักที่ทุกแง่มุมของการพัฒนา Flutter สร้างขึ้นบนนั้น และเป็นสิ่งแรกที่ต้องเข้าใจเมื่อเรียนรู้ Flutter