Flutter: Pull to refresh ทำยังไงให้เท่

ถ้าเป็น PC การ refresh เปรียบเสมือนการกด F5 นั่นเอง

ปกติการ swipe up (ไถขึ้น) จะเป็นการ load more data ตาม Article นี้นะคับ แต่ถ้าเราต้องการจะ refresh เพื่อ fetch data ใหม่ เราจะใช้วิธีการ swipe down หรือ การไถลง ซึ่งใน Flutter เราสามารถใช้ built-in widget ที่เรียกว่า RefreshIndicator ได้เลย
แต่จะใช้ยังไงมาดูกันดีกว่า

1. เราจะใช้ api จาก endpoint นี้
   https://randomuser.me/api/?results=8
ซึ่งจะเป็นการ random data ออกมาครั้งละ 8 ชุด
2. สร้าง Flutter project standard ขึ้นมาเลยคับ
3. เริ่ม implement โดยเริ่มจาก

เรียก API ก่อนที่จะ build UI ขึ้นมา

4. เมื่อได้ data _users แล้วให้สร้าง UI ในส่วนที่จะแสดงขึ้นมา โดยเป็น Container() และมี _buildList()อยู่ภายใน

โดยใน _buildList() จะเป็นการจัดการ UI พร้อมกับกำหนดเงื่อนไขเมื่อมีการ refresh ลักษณะนี้

จิงๆแล้ว เป็นแค่การ wrap ด้วย RefreshIndicator() เท่านั้น ก็สามารถทำให้ ​ListView.builder() สามารถไถลงเพื่อ refresh ได้แล้ว

5. แค่เท่านั้น App ของเราก็จะ refresh ได้เรื่อยๆแล้ว

Refresh UI ง่ายนิดเดียว

Code:

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

References:
https://maffan.medium.com/implementing-pull-to-refresh-in-flutter-59dd31239624