Day 4/100 — Flutter coding

เริ่มต้นการเรียนรู้อีกครั้ง ก่อนหน้านี้ผมเองเคยได้สัมผัสการเรียนแอปพลิเคชันด้วยภาษา flutter framework มาแล้วบ้าง แต่ก็ไปได้ไม่ถึงฝัน อาจจะด้วยปัญหาต่าง ๆ นา ๆ ครั้งนี้เอาใจช่วยผมด้วยนะครับทุกคน …

เมื่อวานนี้เราได้เรียนรู้กับการใช้ theme และสร้าง navigation bar ไปแล้ว ในวันนี้จะมาสร้าง UI ให้กับ 3 tab ที่เราได้ทำไปเมื่อวาน

Table of content

• ทำ Card 1

ทำ Card 1

Card 1

วิเคราะห์ UI กันหน่อย ถ้ามองจากภาพมี component อะไรบ้าง ?

• กล่อง view ด้านนอก shape เป็น rounded corner
• ภายในมี stack view มี padding จากขอบกล่อง view
• มี Text, Image widget

code สำหรับสร้างกล่อง view ในที่จะใช้ Container(…) สำหรับสร้างกล่อง ภายใน class นี้มีพารามิเตอร์ให้ custom เยอะแยะเลย แต่ใน card ที่กำลังทำ หลักๆที่ใช้คือ padding, constraints (กำหนด width x height), decoration , borderRadius

ส่วนที่น่าสนใจคือ BoxDecoration ตัวนี้สามารถ custom กล่องได้เยอะมากๆ

Container ของ Card 1

พารามิเตอร์ชื่อ child ของ object Container นั้นสามารถนำ widget อื่นๆมาใส่ในกล่องนี้ได้ ในที่นี้เราจะมาทดลองใช้ Stack ในการใส่ข้อความ แต่จะแตกต่างจาก project ก่อน ๆ ตรงที่ stack สามารถ position ตัว widget ได้ อันนี้ทำผม งง มาก มาลองดู code กัน

Stack view with positioned text view

ขอเจาะรายละเอียดตรงนี้หน่อย Positioned class เป็น class สำหรับ control ตัว widget ที่อยู่ใน stack ย้ำว่าใน stack เท่านั้น ถ้าจะให้มองง่าย ๆ มันคือ constraint ใน iOS เพียงแต่ว่าอันนี้มันล้ำไปอีกขั้นตรงที่เราไปคุมของใน stack อาจจะฟังดูแปลก ๆ สำหรับผม เพราะความเข้าใจก่อนหน้าเกี่ยวกับ Stack class คือการเรียง view แบบ vertical หรือ horizontal แต่ของ Flutter สามารถ custom ได้หลากหลายมาก

Positioned สามารถกำหนด ระยะได้ทั้ง 4 ด้านอีก ปรับขนาด width, height (**Stack view สามารถใช้ positioned พลัก view ออกนอกตัว stack ได้ด้วย 🤯,
Stack view เวลาใส่ children ลงไป จะถูกจัดเรียงจากล่างขึ้นบน 🤯) สมองระเบิดกันไปเลย อะไรครับเนี่ย!

Complete card 1

ทำ Card 2