Copyright 2024 - Custom text here

 อยากลองใช้ GridView แสดงรูปภาพแบบนี่

  

เริ่มต้นจากการเตรียม โปรเจ็คเปล่าๆ ของ Flutter ก่อน (http://androidthai.in.th/android-flutter/120-standart-structure-coding-flutter-app) 

 

และ เอารูปภาพที่เตรียมไว้ ควรเป็นชื่อ คล้ายๆ กันได้ง่ายต่อการพิ่ม ใส่เข้าไปใน โปรเจ็ค Flutter แบบนี่ (ใครทำไม่ได้ไปดูที่ http://androidthai.in.th/android-flutter/121-listview-show-image-on-flutter )

สร้าง Floder เก็บภาพ

 

 Paste รูปภาพที่ต้องการนำมาแสดง ใน GridView ให้พร้อม

เปิดไฟร์ pubspce.yaml

ใจเย็นๆ ค่อยๆ พิมพ์นะครับ ให้ เครื่องหมายลบตรงตัว s นะ

คลิก Get dependencies

ด้านล่างจะ flutter packages get

 มาสเตอร์ หุบ คลาส MyApp(ได้ดูได้ง่ายๆ) และ สร้าง คลาส อีก 3 ตัว จำ http://androidthai.in.th/android-flutter/105-step-1-create-state ได้นะครับ

พิมพ์ sl เลือก stfl ตัว Android Studio จะ Generate Code ให้แบบนี้

เหลือแค่ตั่งชื่อคลาส

มาสเตอร์ ตั่งชื่อว่า MyStatefulWidget ส่วนคลาสล่าง มั่นตั่งเองครับ

 

ที่คลาส _MyStatefulWidgetState

เปลี่ยน return จาก Container() เป็น Object Scaffold ครับ

มาสเตอร์ ให้ โค้ดแสดง  This is Body บน Screen

แก้ไขคลาส MyStatefulWidget 

ส่วนนี่ของ MyApp ทำเหมือนเราเคยทำไปแล้วตอนทำ ListView นะครับ http://androidthai.in.th/android-flutter/105-step-1-create-state

ลองทดสอบโค้ดครับ

ต่อไปมาสเตอร์ สร้างเมธอด ที่ รับค่า มาสร้างภาพ ชื่อว่า _buildGridTitles()

 กำหนดให้ length เป็น numberofTiles คือ จำนวนของรูปภาพ ที่จะนำมาสร้าง GridView

 มาสเตอร์ เปลี่ยน generate เป็นการ Return Object Container ที่ได้จาก child รูปภาพ ตรง name จะต้องใส่แหล่งกำเหนิดภาพ

มาสเตอร์ สร้าง ตัวแปร imageName เกิดจากการประกอบคำของ image/master ต่อกับค่าของ index ที่เพิ่มค่า และ .jpg เอาไปใช้ใน child

กลับมาเปลี่ยน body ในคลาส _MyStatefulWidgetState

ลองทดสอบโค้ดใน Simulator จะได้แบบนี่ครับ

มาสเตอร์ ลองเพิ่ม fit: BoxFix.cover รูปภาพจะขยายเต็มกรอบแบบนี่ครับ

 

   

 

สำหรับใครที่ไม่ทัน ลองโหลด Source Code ที่ https://github.com/masterUNG/gitview_multi_image ครับ

 

 

 

 

 

 

 

 

 

 

 

คอร์ส สอนโปรเจ็คแอนดรอยด์ ตัวต่อตัว

privateProject2019v1

คอร์ส เบสิกแอนดรอยด์ สอน ตัวต่อตัว

privateAndroid2019v1

คอร์ส iOS สอน ตัวต่อตัว

privateIos2019V1

คอร์ส Flutter สอน ตัวต่อตัว

privateFlutter2019v1

f t g