Flutter: Lazy loading แค่ไถก็ไหลเพิ่ม

Lazy loading เป็นเทคนิคหนึ่งในการทำแอฟของเราแสดงผลได้ไวขึ้น (แค่ไถก้โหลดเพิ่ม) หลักการคือ แทนที่จะส่ง request ไปเรียกไฟล์ assets ทั้งหมดที่ใช้ในแอฟพร้อมกันตั้งแต่ตอนโหลด ก็เปลี่ยนเป็นการส่ง request ออกไปเมื่อ “จำเป็น” เท่านั้น

แล้วใน Flutter ทำได้ยังไง ไปดูกันเลยคับ

1. เริ่มแรก สร้าง Flutter project standard ขึ้นมาก่อน
2. จากนั้นให้ เรียกไปยังหน้าที่จะทำเป็น lazy_loading ในที่นี้สร้างไฟล์ชื่อว่า lazying_loading.dart

โดยใน workshop นี้จะสร้าง ListTile() ขึ้นมาเป็น Widget ที่ return ออกมาจาก ListView.builder() และจะทำการสร้าง data ขึ้นใหม่เพิ่มใน List เรื่อยๆทีละ 10 ชุด เมื่อตรวจสอบเจอว่า ค่า double ที่ได้จากการ scroll down ลงมา มีค่าเท่ากับ ค่า double ของค่า maximum ของหน้าจอที่ได้ render ไปแล้ว

งงไหมคับ มาต่อข้อ 3 กันเลยละกันคับ เด๋วจะเห็นภาพเอง

3. สร้าง stateful ขึ้นมา + เพิ่ม explicit กับ method เข้าไปตามนี้

ประกาศค่าตัวแปรต่างๆ พร้อมกับ functions

_scrollController.position.pixels 
หรือ
_scrollController.position.maxScrollExtent 
คือ ค่า double ที่ได้จากการ scroll up นะคับ เราสามารถนำมาตรวจสอบว่ามีการ scroll มาจนสุดขอบ phone เมื่อค่าทั้งสองนี้มีค่าเท่ากัน

4. จากนั้นให้ระบุในส่วนของ ui ที่จะ build ดังนี้

ใช้ ListView.builder() มาทำการ render ออกมา

5. ผลลัพธ์จะได้แบบนี้คับ

จะ render ออกมาครั้งละ 10 items นะคับ และมาจบที่ 11, 21, 31, 41 ลักษณะนี้ จากนั้นจะไปเรียก function เพื่อ โหลดเพิ่มอีกครั้งละ 10

Code.

แล้วพบกันใหม่คับ

References:
https://www.youtube.com/watch?v=JaVjHDdoVOg&t=395s