Day 2/100 — Flutter coding
เริ่มต้นการเรียนรู้อีกครั้ง ก่อนหน้านี้ผมเองเคยได้สัมผัสการเรียนแอปพลิเคชันด้วยภาษา flutter framework มาแล้วบ้าง แต่ก็ไปได้ไม่ถึงฝัน อาจจะด้วยปัญหาต่าง ๆ นา ๆ ครั้งนี้เอาใจช่วยผมด้วยนะครับทุกคน …
Table of content
สร้าง List
สวัสดีวันที่สอง วันนี้มาต่อกันเลย จากในหนังสือ เราจะเริ่มสร้าง recipe list กัน
สร้าง data model โดยที่ผมจะสร้างโฟลเดอร์ model ภายใต้โฟลเดอร์ที่ชื่อว่า lib และสร้างไฟล์ชื่อว่า recipe.dart ใน data model นี้จะมี label และ imageUrl
จากที่เราสร้าง model จะเห็นว่ามีการใช้ image ด้วย ส่วนนี้สำคัญ ให้เราไปสร้างโฟลเดอร์ assets ใน path ที่เราต้องการ ในที่นี้ผมสร้างไว้ที่ project root path หลังจากที่เราสร้างแล้วให้ไป update ใน pubspec.yaml ด้วยนะครับ เพื่อประกาศให้ flutter รู้ว่าเราจะมีการเรียกใช้ assets ที่อยู่ใน path ดังกล่าว
หลังจากเตรียมข้อมูลเรียบร้อยแล้วนั้นเรามาลองสร้าง list อย่างง่ายกันก่อน วิธีการก็ง่ายมาก เราสามารถใช้ ListView.builder ในการสร้างได้เลย โดยที่ตอนนี้ UI จะครอบคลุมไปทั้งหน้าจอ เนื่องจากเราใส่ตัว list ลงไปใน child ของ body แค่ 1 ตัวเท่านั้น อนาคตเราคงไปเรียนรู้วิธีการใช้ layout อีกครั้ง
ทำ Card view
หลังจากที่ทำ list view มาแล้ว ผมจะเพิ่มเติมในส่วนของการแสดงผลให้มัน cool หน่อย โดยเราจะใช้ widget ที่ชื่อว่า Card นำมาจาก Materail design
ให้เราสร้างฟังก์ชันในการสร้าง card แยกออกมาเลย โดยที่ฟังก์ชันนั้นจะ return widget กลับมา โดยที่ในส่วนของ ui ผมได้ใส่ column layout ครอบด้านนอกสุด ภายใน column รับ children เป็น array widget แบบนี้เราก็สามารถใส่ ui ที่เราอยากได้ลงไปเลย
ผมใส่ image widget และนำรูปมาจาก AssetImage โดยที่ url เราเอามาจาก data model ก่อนหน้านี้ที่เราได้สร้างเอาไว้
หลังจากที่สร้างฟังก์ชันสร้าง card เรียบร้อยให้ย้อนกลับไปที่ list view ในส่วนของ item builder ก่อนหน้านี้เรา return เป็น text widget ให้เปลี่ยนเป็นฟังก์ชันที่เราได้สร้างขึ้นมาใหม่
ทะด๊าาาาาาา
ปรับหน้าตาให้เป็น card สักนิด ภายใน card มีการเพิ่ม elevation เพื่อนูนของ card ถ้าพูดภาษาทางคณิตศาสตร์ก็คือปรับแกน Z ให้มันสูงขึ้นนิดนึง ต่อมาเปลี่ยน shape ให้ขอบของ card มัน มนๆ หน่อยโดยการเพิ่ม RoundedRectangleBorder ลงไป กำหนดขอบว่าจะมนสักกี่ radius ก็จัดไป ปล… มี border อื่นให้เล่นอีกนะ ลองไปเล่นกันดู
เพิ่ม Padding ให้กับ ก้อน view ที่รวมของ image และ text
เพิ่มเว้นระยะระหว่าง image และ text ด้วย SizedBox
สุดท้ายเปลี่ยน text style ให้กับชื่ออาหาร
ทำหน้าจอ Recipe detail
เพิ่มความสามารถ tap gesture detector บน item ของ list ฉะนั้นจุดที่เราจะเข้าไปแก้ก็คือส่วนของการสร้าง item หรือ item builder จากในภาพจะเห็นว่าเราจะ return GestureDetector ไว้บน layer นอกสุด และยังสามารถเลือก gesture อื่นๆได้อีกด้วยตามภาพ
กลับมาเจาะส่วนของ GeatureDetector กันต่อ จากในภาพ เมื่อ user กด card ใด ๆ จะมี trigger มาที่ฟังก์ชัน onTap ภายในฟังก์ชันนี้จะเรียกใช้ lib ที่ชื่อว่า Navigator เพื่อนำพาไปในหน้าถัดไป เจ้า Navigator นี้จะมีฟังก์ชันให้เล่นอีกนิดหน่อย ไม่ใช่แค่ push ที่หมายถึงพลักไปอีกหน้า แต่จะมี pop, replace, remove, restore หรืออื่นๆอีก ไว้เรามาเล่นกันทีหลัง
ต่อมาก็คือการสร้าง page route ในขั้นตอนนี้เราจะแปะ text ธรรมดาไปก่อน
และสุดท้ายคือ child เพื่อให้แสดง ui ที่มี gesture detector นั้นครอบอยู่
ตอนนี้เราก็มี tap gesture point แล้ว ต่อมาเราจะไปสร้างหน้า detail กันแล้ว ลุย! 🚀
วิธีการขึ้นหน้าใหม่ง่าย ๆ สร้างไฟล์ใหม่ขึ้นมาชื่อว่า recipe_detail.dart แล้วเขียน class ที่เป็น statefulwidget ไว้เลย โดย 1 ในพารามิเตอร์ที่เราต้องเก็บก็คือ data model : Recipe
หลังจากสร้าง statefulwidget แล้ว อย่าลืมสร้างหน้า ui ด้วย ในที่นี้เราใช้ชื่อว่า _RecipeDetailState จากใน code จะเห็นว่าทุกอย่างคล้ายเดิม ไม่ว่าจะเป็นเจ้า Scaffold, App bar, Body แต่ที่แปลกใหม่ที่สุดคือการสร้าง SizedBox() ครอบเจ้า Image นั้นเอง เป็นการ wrapping ตัว image ui ให้อยู่ภายใต้ size ที่เรากำหนด ในส่วนของ width ที่ใช้ตัวแปรจาก double.infinity ตัว flutter จะคำนวณมาให้เองเลย ง่ายสุด ๆ
ทำหน้า Ingredients
สร้าง data model ใหม่ขึ้นมาเพื่อเก็บของ จากนั้นเพิ่มตัวแปรใน Recipe data model เพื่อเก็บ จำนวน servings และ ingredient ของอาหารเมนูนั้น
มาทำ UI ต่อกันเลย ใส่ Expanded widget เป็น widget ใหม่ที่เราได้เริ่มใช้กันใน workshop นี้เลย อีกทั้งยังมี string interpolation (เข้าถึงตัวแปรภายใน string) มาให้รู้จักกันอีกด้วย แบบนี้ง่ายเลยใช่ไหมละ!
ต่อมาเป็น slider widget อันนี้ต้องทำความใจนิดหนึ่งในส่วนของ value มันคือการดึงข้อมูลจากในตัวแปลนั้นมาใส่ และในส่วนของ onChanged หมายถึงเมื่อ slider ถูก trigger ให้เปลี่ยนค่าจะถูกเรียกเข้าฟังชั่นนั้น
และที่สำคัญตัวหนึ่งคือ setState() { } เมื่อใดที่ตัวแปลถูก re-assign อยู่ภายใต้ฟังก์ชันนี้ ตัว flutter จะไปออกคำสั่งให้ widget ที่มีความเกี่ยวข้องกับตัวแปลนี้ทำการวาด widget ใหม่
ฉะนั้นเมื่อไรที่เรา slide ตัว slider ไปมา จะทำให้ text refresh ค่าตลอด
สรุป
จบกันไปแล้วสำหรับวันนี้ Day 2/100 กับ flutter challenge ในวันพรุ้งนี้ผมจะเริ่มเรียนรู้ในบทที่ 3 section 2 เกี่ยวกับเรื่อง widget ต่างๆ แล้วมาสนุกไปด้วยกันครับ 🤯
สำหรับโค๊ตผมจะอัพไว้ที่ Github repo
