Flutter: How to custom widgets (DIY)

ในการ implement ถ้าเราจะเขียน code ทุกอย่างโดยไม่จัดการ code ที่ซ้ำกันเลย แน่นอน code เราจะเยอะและยุ่งเหยิงมาก ฉะนั้น widgets ไหนที่มี property เยอะๆ และต้องเรียกใช้บ่อยๆ ลองมาใช้วิธีการ extract กันดีกว่า

https://tenor.com/view/typing-jim-carrey-fast-busy-gif-4903969

ในตัวอย่างนี้จขออนุญาตใช้ TextFormField() ซึ่งเป็น widget มาตรฐานในการรับค่า input ของ Flutter มาทำการแปลงเป็น DIY widget ของเราเองไว้เรียกใช้ดูนะคับ

จากตัวอย่าง TextFormField() 2 ชุดด้านล่าง มีส่วนที่ต่างกันเพียง 5 จุดเท่านั้น ฉะนั้นตามหลักการแล้ว เราจะไม่เขียน code ที่ซ้ำกัน

Flutter code to show TextFormField()

เราสามารถ handle ได้ 2 วิธีคือ

• Extract to method (ทำเป็น Function)
• Extract to widget (ทำเป็น Class)

แต่จากตัวอย่างนี้เราจะมาทดลอง Extrat to widget กันนะคับ เพราะแบบเป็น method คิดว่าทำได้ง่ายกว่า

ให้ทำการ drag mouse ให้ครอบ widget ที่เราต้องการจะ extract และทำการคลิกที่ดวงไฟสีเหลือง และเลือก Extract Widget.

มี 2 ตัวเลือกให้ใช้ Method or Widget

จากนั้นให้เราตั้งชื่อ class ตามที่เราต้องการ จากตัวอย่างเราจะตั้งว่า CurrencyFormField

ชื่อ class ต้องขึ้นต้นด้วย Capital นะคับ และชื่อควรสื่อถึงสิ่งที่กำลังทำ

จากนั้น vscode จะสร้าง class ตามชื่อที่เราได้ตั้งขึ้นมาให้เราตามนี้

Class ใหม่ที่ vscode สร้างมาให้

ต่อไปเราจะมาทำการ customize เพื่อให้ class นี้สามารถมา reuse ใช้ได้กับ TextFormField ทั้ง 2 แบบ

custom DIY class และนำไปใช้งาน

เราสามารถเพิ่มคีย์เวิร์ด “@required” ที่ constructor เพื่อบังคับให้ dev ที่นำ widget นี้ไปใช้จะต้องไม่ลืมใส่ค่า property ต่างๆที่ต้องการเข้ามาด้วย ถ้าตัวไหนเป็นเพียง optional ก็ไม่ต้องใส่

Adde ‘@required’ to force to fill all the propertys.

เมื่อใช้งานจริงจะเห็นว่าสามารถไปใช้งานได้โดยกรอกเฉพาะ preperty ที่เราต้องการจริงๆเท่านั้น

DIY widgets

PS: datatype สามารถเป็นอะไรก็ได้นะคับ แม้กระทั่งเป็น function,
ภาพด้านล่างคือการพาส validator: ออกมา เพื่อให้เรียกใช้งานได้จาก ​DIY widget.

ตัวอย่างการพาส validate ออกมาใช้ (ด้วย Stateless)

ตัวอย่างการสร้าง common widget class ออกมาด้วย Stateful widget.

แล้วพบกันใหม่คับ
GRASSROOT ENGINEER