ใส่รูปใน Flutter แบบ Online และ Offline

บทความนี้สอนวิธีการใส่รูปใน Flutter แบบ Online และ Offline โดย Online คือรูปภาพเก็บอยู่ใน Server มี URL ใน Flutter ใช้คำสั่ง Image.network และ Offline คือรูปภาพเก็บใน Folder Project ของ Flutter ใช้คำสั่ง Image.asset สามารถเขียนโปรแกรมได้ดังนี้

 

ตัวอย่าง ใส่รูปใน Flutter แบบ Online ด้วย Image.network

Image.network('https://www.devdit.com/favicon-16x16.png')

จากโค้ดใช้คำสั่ง Image.network เพื่อใส่รูปภาพ โดยกำหนดค่าพารามิเตอร์คือตำแหน่งที่อยู่ของรูปภาพแบบ Online

 

ตัวอย่าง ใส่รูปใน Flutter แบบ Offline ด้วย Image.asset

1. ใน folder lib ให้สร้าง folder สำหรับเก็บรูปภาพตัวอย่างคือ media และคัดลอกรูปภาพที่ต้องการใส่ไปไว้ใน folder lib/media/

 

2. เปิดไฟล์ pubspec.yaml และเพิ่มโค้ดในส่วนของ flutter:

flutter:
  assets:
    - lib/media/

 

3. เขียนโค้ดใส่รูปใน Flutter ด้วยคำสั่ง Image.asset ซึ่งจะอ้างถึงรูปภาพที่อยู่ใน folder lib/media/ โดยไฟล์รูปชื่อ logo.jpg

Image.asset('lib/media/logo.jpg')

 

สรุป บทความนี้สอนวิธีการใส่รูปใน Flutter ทั้งแบบ Online คือรูปภาพเก็บอยู่ใน Server และเรียกผ่าน URL ของรูปภาพโดยใช้คำสั่ง Image.network และแบบ Offline คือรูปภาพเก็บใน Folder Project โดยใช้คำสั่ง Image.asset โดยทั้ง 2 วิธีมีวัตถุประสงค์ที่แตกต่างกัน โดยปกติแบบ Online จะใช้กับรูปภาพที่มีการเปลี่ยนแปลง ส่วน Offline จะใช้กับรูปภาพที่ไม่มีการเปลี่ยนแปลง หรือเป็นรูปภาพซึ่งเป็นส่วนของตัวโปรแกรม