Everything Is a Widget

แนวคิดเดียว

Flutter มี slogan ว่า everything is a widget — layout, padding, ปุ่ม, ทั้งแอป ล้วนเป็น widget แต่ความจริงที่ลึกกว่านั้นคือ widget คืออะไร: widget คือ description ที่ immutable ของ UI ชิ้นหนึ่ง ณ ช่วงเวลาหนึ่ง ไม่ใช่ของที่อยู่บนจอ แต่เป็นสูตรของของนั้น

เพราะ widget เป็น immutable และถูก คำตอบของ Flutter ต่อ “UI เปลี่ยนแล้ว” จึงสุดโต่ง: ทิ้ง widget เดิมแล้ว build ใหม่ คุณไม่เคย mutate widget เลย คุณแค่บรรยาย state ใหม่ Flutter rebuild description แล้วอัปเดตเฉพาะส่วนที่ต่างจริง ๆ อย่างมีประสิทธิภาพ

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Widgets and the tree	immutable config, composition และ three tree (widget / element / render)
Stateless vs stateful	widget พื้นฐานสองแบบ และทำไม State ถึงเป็น object แยก
build and BuildContext	contract ของ build method และ BuildContext คืออะไรจริง ๆ
Keys	เมื่อไร Flutter ต้องใช้ key เพื่อรักษา state ให้ถูกต้อง

description ที่ถูก แต่ของจริงแพง

ถ้า Flutter rebuild ทุกอย่างบนจอทุกเฟรม จะช้าจนใช้ไม่ได้ ทริกคือ widget เป็นแค่ layer บนสุดที่ถูก:

flowchart TB
  w["Widget
immutable description
(rebuild อิสระ)"] --> e["Element
living instance
(อยู่ต่อเนื่อง, ถือ state)"]
  e --> r["RenderObject
layout และ paint
(ส่วนที่แพง)"]

สาม layer: widget ที่ถูก, element ที่อยู่ต่อเนื่อง, การ render จริง

การ rebuild widget นั้นถูก ส่วน layer element และ render ที่อยู่ข้างล่างจะอยู่ต่อเนื่องและถูกอัปเดตเฉพาะจุดที่ widget ใหม่ต่างจากเดิม การแยกแบบนี้ — description ที่ทิ้งได้อยู่บน machinery ที่ทนทาน — คือเรื่องราวทั้งหมดของ performance และบทเรียนต่อไปจะทำให้เรื่องนี้เป็นรูปธรรม