Google Flutter

Flutter 3 นาที กับ FadeInImage: จัดการภาพที่โหลดไม่เสร็จจาก Server ง่ายๆ สวยด้วย

เรื่องที่เกี่ยวข้อง - ,
google flutter FadeInImage

Google Flutter วันละนิดกับโค้ชพลวันนี้ เราจะมาพูดถึง FadeInImage ซึ่งเป็น Widget ที่จะจัดการปัญหาระดับอมตะนิรันดร์กาลสำหรับคนทำแอพ หรือ Front-end ที่ว่า

ถ้าแอพยังโหลดภาพมาจาก server ไม่ทัน/ไม่เสร็จ จะทำไง?

โดยทั่วไป แล้วไฟล์ภาพทั้งหมดมักจะถูกเก็บไว้ที่ฝั่ง Server ของเรา และปล่อยให้แอพของผู้ใช้เป็นฝ่ายเรียกตัวรูปมาตอนที่ต้องใช้งานจริง ซึ่งขั้นตอนนี้ตัวแปรสำคัญตัวหนึ่งก็คือความเร็วอินเตอร์เน็ต

ความเร็วของอินเตอร์เน็ตเครื่องลูกค้านั้น ไม่แน่นอน เหมือนเราเรียก Grab ให้ซื้อข้าวมาส่ง บางทีพี่ Grab ก็ขยัน บางทีได้พี่ Grab เถลไถล ทำให้เราไม่สามารถคาดการณ์เวลาที่แน่นอนที่จะได้ของที่ต้องการได้

ทำให้เกิดโจทย์ 2 ข้อ

  1. ถ้ารูปยังไม่มา โหลดยังไม่เสร็จ จะแสดงรูปชั่วคราวก่อนได้ไหม?
  2. ถ้ารูปมาแล้ว จะสลับรูปชั่วคราวเป็นรูปจริงยังไง?

เจ้า FadeInImage เป็นหนึ่งในคำตอบที่สมบูรณ์แบบของโค้ชพลเลยล่ะ และเชื่อว่าพวกเราก็น่าจะชอบ เพราะมันจัดการให้เสร็จ ตอบโจทย์ทั้ง 2 ข้อ

พร้อมแล้ว ลุย!

เรื่องที่เราจะคุย และทำกันในคลิปวิดีโอ

  • เข้าใจปัญหาในการใช้ Image Widget โหลดภาพจากอินเตอร์เน็ต หรือ Web server ของเรา
  • แนวคิดการใช้งาน FadeInImage
  • การกำหนดภาพตัวตายตัวแทน (placeholder) ในกรณีที่ภาพจริงยังโหลดไม่เสร็จ หรือโหลดมาไม่ได้
  • การกำหนดภาพจริงใน FadeInImage โดยเฉพาะส่วนของ NetworkImage

จัดโปรเจคมาทำตามด้วยกันเลย

https://github.com/teerasej/nextflow-widget-today-fade-in-image

ดูวิดีโอทั้งหมดในซีรี่ย์ Flutter 3 นาที

และยังสามารถกดดูวิดีโอทั้งหมดในซีรี่ส์ Flutter 3 นาที ได้ที่นี่เลย อย่าลืมกด subscribe พร้อมเปิดกระดิ่งแจ้งเตือนล่ะ

เริ่มต้นเรียนรู้สร้างแอพ iOS และ Android ด้วย Google Flutter ไปกับโค้ชพล

เหมาะสำหรับผู้เริ่มต้น

เขียนครั้งเดียว ใช้ได้ทั้งระบบ iOS และ Android ประหยัดเวลา

เรียนได้ทุกเวลา ไม่มีวันหมดอายุ

ได้รู้ตั้งแต่วิธีติดตั้งโปรแกรม จนเอาขึ้นApp Store และ Play Store

ได้ทำแอพของจริง เริ่มต้นจาก 0 ทุกโปรเจค มีระบบถามตอบ กรณีติดปัญหา

 

Loading Facebook Comments ...
Menu