Day 4/100 — Flutter coding
เริ่มต้นการเรียนรู้อีกครั้ง ก่อนหน้านี้ผมเองเคยได้สัมผัสการเรียนแอปพลิเคชันด้วยภาษา flutter framework มาแล้วบ้าง แต่ก็ไปได้ไม่ถึงฝัน อาจจะด้วยปัญหาต่าง ๆ นา ๆ ครั้งนี้เอาใจช่วยผมด้วยนะครับทุกคน …
เมื่อวานนี้เราได้เรียนรู้กับการใช้ theme และสร้าง navigation bar ไปแล้ว ในวันนี้จะมาสร้าง UI ให้กับ 3 tab ที่เราได้ทำไปเมื่อวาน
Table of content
- ทำ 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 กล่องได้เยอะมากๆ
พารามิเตอร์ชื่อ child ของ object Container นั้นสามารถนำ widget อื่นๆมาใส่ในกล่องนี้ได้ ในที่นี้เราจะมาทดลองใช้ Stack ในการใส่ข้อความ แต่จะแตกต่างจาก project ก่อน ๆ ตรงที่ stack สามารถ position ตัว widget ได้ อันนี้ทำผม งง มาก มาลองดู code กัน
ขอเจาะรายละเอียดตรงนี้หน่อย 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 ลงไป จะถูกจัดเรียงจากล่างขึ้นบน 🤯) สมองระเบิดกันไปเลย อะไรครับเนี่ย!