จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #2

มาต่อกับชาเลนจ์ฝึกเขียน Flutter ช่วง WFH กันเลยครับ บทความนี้ผมเขียนเรื่อง Widget เหมือนเดิมครับ

บทความต่อจาก

จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #1

Contents

• ListView
• ListView builder
• Grid View
• Stack Layout

ListView

เป็น 1 ใน Scrolling widgets ที่ทำให้ผู้ใช้ scroll ขึ้นลงซ้ายขวาได้นั้นเอง
*สำหรับจำนวนข้อมูลคงที่

ขึ้นลง

padding

ทำให้ text ไม่ขอบข้างใน ListView *หาอ่านเพิ่มเติมได้ที่ตอน#1

children

ก็จะเป็น array สามารถใส่อะไรก็ได้ text , container , image อื่นๆ

scrollDirection

ทำให้สามารถขยับซ้ายขวาได้

scrollDirection: Axis.horizontal

ListView.builder

เป็น ListView ที่เหมาะสำหรับโชว์ค่าที่ดึงมาจาก database

itemCount: // จำนวนที่ต้องการจะวน
itemBuilder:(BuildContext context, int index){...} // ของที่อยากจะสร้าง

โดยผมต้องการจะสร้าง Container ไว้เก็บข้อมูลและ itemBuilder ต้องการ parameter context กับ index โดย index เป็นตัววนลูปให้เรา

Grid View

เป็น 1 ใน Scrolling widgets ให้ผู้อ่านลองนึกถึงแอปรูปภาพที่เป็นช่อง 4 เหลี่ยมหลายๆช่องนั้นละเรียกว่า Grid view ครับ

children

ก็จะเป็น array สามารถใส่อะไรก็ได้ text , container , image อื่นๆ
โดยผมจะใช้ Image.network เพื่อโหลดรูปภาพมาใส่ใน card

crossAxisCount

ถ้าเรากำหนด GridView.count จะต้องประกาศ crossAxisCount เพื่อเป็นตัวกำหนดว่าเราจะแบ่ง grid เป็นกี่ column

maxCrossAxisExtent

ถ้าเรากำหนด GridView.extent จะต้องประกาศ maxCrossAxisExtent เพื่อเป็นตัวกำหนดว่าเราจะแบ่ง grid เป็นกี่ pixel

childAspectRatio

ทำให้ข้อมูลข้างใน children ถูกยืด

https://miro.medium.com/max/11400/1*lS9ZqdEGZrRiTcL1JUgt9w.jpeg

Stack Layout

เป็นการซ้อนวัตถุ โดย children[1,2,3,4] วัตถุ 1 จะอยู่ล่างสุดไล่ขึ้นไปจนถึง 4 จะอยู่บนสุดครับ

วันนี้ขอจบบทความเท่านี้นะครับ ถ้ามีอะไรติชมเขียนมาได้เลยนะครับ ผมจะได้เอาไปปรับปรุงในบทความต่อไป ขอบคุณที่อ่านจนจบครับ

• จากเด็กจบใหม่ที่ต้องติดบ้านเพราะโควิดสู่นักพัฒนา Flutter #3