Google Flutter วันละนิดกับโค้ชพลวันนี้ เราจะมาพูดถึง FadeInImage ซึ่งเป็น Widget ที่จะจัดการปัญหาระดับอมตะนิรันดร์กาลสำหรับคนทำแอพ หรือ Front-end ที่ว่า
ถ้าแอพยังโหลดภาพมาจาก server ไม่ทัน/ไม่เสร็จ จะทำไง?
โดยทั่วไป แล้วไฟล์ภาพทั้งหมดมักจะถูกเก็บไว้ที่ฝั่ง Server ของเรา และปล่อยให้แอพของผู้ใช้เป็นฝ่ายเรียกตัวรูปมาตอนที่ต้องใช้งานจริง ซึ่งขั้นตอนนี้ตัวแปรสำคัญตัวหนึ่งก็คือความเร็วอินเตอร์เน็ต
ความเร็วของอินเตอร์เน็ตเครื่องลูกค้านั้น ไม่แน่นอน เหมือนเราเรียก Grab ให้ซื้อข้าวมาส่ง บางทีพี่ Grab ก็ขยัน บางทีได้พี่ Grab เถลไถล ทำให้เราไม่สามารถคาดการณ์เวลาที่แน่นอนที่จะได้ของที่ต้องการได้
ทำให้เกิดโจทย์ 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 ทุกโปรเจค มีระบบถามตอบ กรณีติดปัญหา