Print
Details: Category: บทความ Flutter | Published: 07 June 2020 | Hits: 3732

มาดูตัวอย่าง การสร้าง GridView กันครับ

Screen Shot 2563 03 06 at 150336

 แบบนี่ครับ เรามาเริ่มกันเลย

Screen Shot 2563 03 07 at 030945

ประกาศตัวแปร ระดับ Array ก่อน

Screen Shot 2563 03 07 at 030952

ที่เมธอด initState กำหนดให้ ไปทำงานที่ readData ก่อน

Screen Shot 2563 03 07 at 030923

 

เมธอด readData จะอ่านข้อมูลจาก API และ Build ไปเป็น array

Screen Shot 2563 03 06 at 154303

เมธอด createCard จะสร้าง Card จาก Model ผ่าน index

Screen Shot 2563 03 06 at 154256

ส่วนของ showTextGridView

Screen Shot 2563 03 06 at 154247

ส่วนของการแสดง Image

Screen Shot 2563 03 06 at 154235

Widget ที่แสดง Grid

Screen Shot 2563 03 06 at 150333

 

ลองทดสอบโค้ดได้มาละ ไม่ยากนะครับ ลองทำดู แต่ถ้าไม่ได้อย่างไร์ ถามมาสเตอร์ ได้ทุกเวลาครับ