Copyright 2024 - Custom text here

วิธีการใช้งาน Cached Network Image

Screen Shot 2563 03 27 at 131753

ไปที่นี่ครับ https://pub.dev/packages/cached_network_image

Screen Shot 2563 03 27 at 131815

เพิ่มโค้ด

cached_network_image: ^2.2.0

 Screen Shot 2563 03 27 at 131824

 กดปุ่ม Ctrl + s จะเห็นหน้าต่าง flutter packages get:running ทำงาน

Screen Shot 2563 03 27 at 133039

การใช้งาน ส่ิงแรก import Package ซะก่อน

Screen Shot 2563 03 27 at 133023

ตัวอย่างการโค้ด CachedNeworkImage จะมี สามส่วน คือ 

  1. imageUrl: คือ String ที่เป็น url ของรูปที่ต้องการแสดง
  2. placeholder: คือ Widget ที่จะแสดงถ้ารูปยังไม่โหลด จากตัวอย่าง มาสเตอร์ใช้ CircularProgressIndicator
  3. errorWidget: คือ Widget  ที่แสดงถ้าโหลด รูปไม่ได้

Screen Shot 2563 03 27 at 133028

ผลลัพธ์ จะเป็นแบบนี้ครับ

Screen Shot 2563 03 27 at 135650

 

ภาพรวมทั้งหมดครับ 

 

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

privateProject2019v1

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

privateAndroid2019v1

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

privateIos2019V1

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

privateFlutter2019v1

f t g