ในการพัฒนาระบบงานด้วย Flutter
ไม่ว่าจะเป็น web app, mobile app และ native app ก็ตาม
พื้นฐานที่เหมือนกันก็คือ เรื่องของ Widget
หรือถ้าเทียบในฝั่ง web ก็คือ web component
ตามที่คนเขียน ReactJS, Angular และ VueJS ใช้งานกันปกติ
การออกแบบหน้าตาของระบบด้วย Flutter นั้น
จะใช้งานผ่าน widget นี่เอง
แนวคิดหลัก ๆ คือ การแบ่งเป็น widget เล็ก ๆ ตามหน้าที่การทำงาน
จากนั้นนำ widget ต่าง ๆ มารวมกัน เพื่อทำงานตามที่เราต้องการ
หรือจะเรียกว่า composition widget ก็ได้
รูปแบบของ widget ที่รวมกันมักจะอยู่ในรูปแบบของ tree ดังรูป
โดยที่ Widget จะแบ่งออกเป็น 2 ประเภทคือ
- Stateless widget (Immutable)
- Stateful widget (Mutable)
Stateless widget (Immutable)
เป็น widget ที่ไม่มีการเปลี่ยนค่าหรือ state ตอน runtime
โดยทุก ๆ widget จะรับค่าผ่าน property ได้เลย (constructor)
จะทำการ extends จาก class StatelessWidget
ดังนั้นถ้าต้องการเปลี่ยนค่า จะต้องทำการสร้าง instance ของ widget ใหม่เท่านั้น
Stateful widget (Mutable)
เป็นสิ่งที่ตรงข้ามกัย Stateless นั่นก็คือ
ถ้าต้องการเปลี่ยน state หรือ property แล้ว
ต้องเปลี่ยนมาเป็น stateful widget
ซึ่งจะทำการ extends จาก class StatefulWidget
ดังนั้น เมื่อค่าของ state เปลี่ยนแล้ว widget นั้น ๆ จะทำการ re-draw ให้อัตโนมัติทันที
ดังนั้นเรื่องพื้นฐานสำคัญมาก ๆ นะครับ
ของศึกษากันก่อนครับ