โปรเจคนี้เป็นโปรเจคที่สอง ที่ผมลองใช้ Flutter ทำ Web Application ซึ่งจากวิดีโอตัวอย่าง ใช้เวลาแค่ 35:59 นาที แต่ชีวิตจริงของผม ใช้เวลาไป 3 วัน 5555 บ้ามากๆ กดดูวนไปวนมา
แต่โดยรวมก็ออกมาเป็นดังที่ตั้งใจไว้ครับ ไม่ผิดหวังฮะ
เริ่มต้น
เหตุผลที่เลือก Quiz App เพราะดู Overview ตัวอย่างแล้วน่าสนใจ ไม่ยากเกินไป ไม่ง่ายเกินไป มี Package ใหม่ๆให้ได้ลอง
และ Quiz App เป็นอะไรที่สนุก เพราะเราจะตั้งคำถามกวนๆก็ได้ 5555
ระยะเวลา 35:59 นาที จริงแล้วๆ ตอนเริ่มทำ คิดว่าจะใช้เวลาแค่ 2 วัน แต่เอาเข้าจริงก็ 3+ เพราะเจอปัญหาจุกจิกรายทางตลอด
วิธีการเรียนรู้ก็คือ
- ดูวิดีโอจนจบก่อน ทำความเข้าใจภาพกว้างๆ
- จากนั้นเริ่มทำตาม ซึ่งตอนทำตามก็เจอปัญหาเรื่อง Flutter Version เพราะวิดีโอมันเมื่อ 1 ปีก่อนอะนะ ก็เจอเรื่อง deprecate, null safety ก็ต้องกด Pause แล้วทำความเข้าใจ
- ระหว่างที่ทำตาม ก็กดดู Package เรื่อยๆ ว่าตัวนี้ทำอะไร require อะไรบ้าง หรือมี options อะไรบ้าง
ถ้าคนเคยเขียน Golang มา น่าจะชอบแน่ๆ เพราะมันไม่ต้องไปเปิด Google เลย แค่กดดู Package ก็เข้าใจ - เริ่ม Adapt ให้เข้ากับความเข้าใจตัวเอง เช่น ตัวอย่างมักจะใช้ คำสั่ง
style: Theme.of(context).textTheme.headline5!.copyWith(color: kSecondaryColor))แต่จริงๆแล้วมันสามารถย่อเป็น
style: TextStyle(color: kSecondaryColor))ความต่างก็คือ แบบ 1 จะมี headline ซึ่งแบบ 2 ผมพยายาม add headline เข้าไปใน style แต่ยังทำไม่ได้
- ตอนที่ทำ ผมเริ่มต้นด้วย Web ดังนั้นจะเจอปัญหาว่า background ไม่ cover ทั้งหมด ทำให้ต้องเปลี่ยน Package SVG เลยไม่ตามตัวอย่าง ซึ่งการเลือก Package ผมก็สงสัยว่าทำไมตัวอย่างถึงใช้ Package ที่ star น้อย… ก็ไม่เป็นไรลองของเราเองก็ได้ครับ
ความยาก
ความยากความท้าทาย มันอยู่ที่ เรา Base on Web เราไม่ใช้ Package เหมือนตัวอย่าง เราไม่ Coding เหมือนตัวอย่าง
นั้นแหละครับ ชิบหายยยย 5555 !!! จากที่ต้องทำ 2 วันก็ลากยาวปายย~~~ อย่างแรกคือ
- Background ไม่ cover พื้นหลังทั้งหมด ทำให้ ต้องเปลี่ยน Widget เพื่อ expand background
- พอเป็น Web มัน Expand ตามขนาดหน้าจอแล้วไม่สวย ผมก็ต้องทำให้มัน Center และ ใส่ maxWidth ดังนั้นก็ต้อง Research เองว่า Widget ไหนที่ทำได้บ้าง… ก็ได้คำตอบว่า Center, Container ทำได้ครับ
- Package SVG ที่ตัวอย่างใช้ ผมกำหนด Expand ไม่ได้ ผมเลยเปลี่ยน Package… ดังนั้นก็ต้อง Research อีกว่าอันไหนเข้าท่า และก็เจออันที่คนใช้เยอะครับ
- ตอนที่สร้างโปรเจคผมเลือกแค่ Web แต่ตอนจบผมจะลองรันทั้ง Web, ทั้ง IOS ก็พบว่ามัน Run IOS ไม่ได้! และ IDE ก็บอกว่า คุณมาเพิ่มทีหลังไม่ได้นะ คุณต้อง New Project ใหม่…. ผมก็อ่าว แบบนี้ git ที่ทำมาก็หายสิ
สุดท้ายก็ New Project ใหม่ แล้ว merge branch เอาครับ ใช้ได้อยู่ครับ 5555
สิ่งที่ได้
สนุกมากครับ พอเราเข้าใจ Flutter มากขึ้น จะรู้สึกเลยว่าการเขียน FrontEnd มันมีรูปแบบ มี Docs ให้อ่านตามง่ายๆ
แต่ข้อเสียคือ มัน Fix กับ Package Flutter ไปครับ เช่น ถ้าใช้ Material ที่ App ให้มาแล้วววว ในอนาคตเกิดมี Bootstrap มาแจม ก็อาจจะไม่ Compatible กันครับ
ดังนั้น ถ้าเป็นโปรเจคใหญ่ๆ ใช้ระยะยาวๆ คุณต้องมองให้ไกลๆครับ อะไรที่ไม่ Stable อาจจะไม่นำมาใส่ครับ
Resource / Reference
Video ตัวอย่าง Quiz App – Flutter Complete App – Speed
Package Flutter SVG
Package GetX
GitHub ที่ผมทำ flutter2-web-02
