ก่อนเริ่มโปรเจ็คควรรู้จัก InheritedWidget และ Key ก่อนนะ

มาต่อกับชาเลนจ์ จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #7

บทความต่อจาก

รวมวิธีเปลี่ยน Page ไปยัง Page ต่างๆของ Flutter

Contents

• InheritedWidget
• Key

InheritedWidget

Inherited Widget ความสามารถก็ตามชื่อเลยครับ คือการสืบทอดและสามารถใช้เป็นที่เก็บข้อมูลกลางได้ แต่ความสามารถพิเศษที่ทำให้ InheritedWidget มันดีมากๆก็คือ มันสามารถทำให้ทุกๆ Widget ใน sub-tree สามารถติดต่อกันได้ และเมื่อมีการอัพเดตข้อมูลใน State ภายใต้ InheritedWidget ตัว Flutter จะไม่บังคับให้ทุกๆ Widget rebuild ใน tree แต่จะ rebuild แค่เฉพาะ Widget ที่ต้องอัพเดตข้อมูลเท่านั้น

สามารถศึกษาเพิ่มเติมได้จาก Youtube ข้างล่างได้เลยครับ

เนื่องจาก inheritFromWidgetOfExactType มันถูก deprecated Flutter แนะนำให้ใช้ dependOnInheritedWidgetOfExactType แทนครับ

Before:

final widget = context.inheritFromWidgetOfExactType(MyInheritedWidget) as MyInheritedWidget;

After:

final widget = context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();

ไม่จำเป็นต้อง cast แล้วครับ

Key

ในแต่ละ Widget นั่นมี Key เพื่อระบุตัวของ Widget ซึ่งปกติ Flutter จะสร้างขึ้นเองอัตโนมัติและทำการผูก Key กับ widget เองอัตโนมัติ ผู้อ่านน่าจะสงสัยว่า flutter ทำให้แล้วจะไปยุ่งกับมันทำไมละ? เดียวผู้อ่านอ่านจบแล้วจะได้คำตอบเองครับ 😜

รูปแบบของ Key

จากรูปข้างบนผู้อ่านน่าจะทราบแล้วว่า Key มี 2 แบบ คือ Local Key , Global Key

ตัวอย่างเช่น App To do list มี Collection ซึ่งเก็บ data type เดียวกันไว้ข้างใน Widget แล้ว User ทำการ Update state เช่น Adding, Removing, ReOrdering จะเกิดปัญหาคือ Widget จะไม่ถูกอัพเดต เพราะว่าหลักการอัพเดตของ Flutter จะเช็คจากแค่ type เท่านั้น

Type เช็ค

เมื่อ type มันซ้ำกันแล้วก็ต้องหาค่าอะไรสักอย่างมาเช็คแทน type ซึ่งก็คือ Key นั้นเอง

Key เช็ค(1)

Key เช็ค(2)

สามารถศึกษาเพิ่มเติมได้จาก Youtube ข้างล่างได้เลยครับ

บทความนี้อ้างอิงจากวันนี้ขอจบบทความเท่านี้นะครับ ถ้ามีอะไรติชมเขียนมาได้เลยนะครับ ผมจะได้เอาไปปรับปรุงในบทความต่อไป ขอบคุณที่อ่านจนจบครับ

• จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #8