Flutter: pull_to_refreshใช้ lib เท่กว่า

จากบทความก่อนหน้า ที่แนะนำการ refresh ด้วย built-in widget ที่เรียกว่า RefreshIndicator แต่ UI จะมีเพียงแค่แบบเดียว ในบทความนี้จะมาทดลองใช้ lib กันบ้างนะคับ ว่าแล้วเริ่มกันเลย

ข้อดีของมันคือ สามารถ pull up = load more และ pull down = refresh ได้เลยโดย support ทั้ง Android & iOS ทำขึ้นมาโดยพี่จีนนะคับ.

เป็นการรวมของ Lazy loading + RefreshIndicator()

1. ลง lib ก่อนใน pubspec.yaml (ผมยังไม่ได้ใช้ version ที่เป็น null safety นะคับ)

pull_to_refresh: 1.6.3

2. เราจะทดลองโดยใช้ api นี้โดยจะ random ค่ามาทีละ 8 ชุด (api จะ random ให้)

https://randomuser.me/api/?results=8

การจะทำ pull to load more แบบนี้ได้ เราจะต้องให้ทาง Backend สร้าง endpoint ในลักษณะ pagination แบบนี้ให้ด้วยนะคับ เช่น ในกรณีนี้คือ จะให้โหลดมาเรื่อยๆ ครั้งละ 8 ชุด เมื่อมีการส่ง request ไป

3. import lib เข้าไปใน code เดิมจากบทความก่อนหน้า

import 'package:pull_to_refresh/pull_to_refresh.dart';

Modified code ก่อนหน้านี้ โดยเปลี่ยนจากการใช้ RefreshIndicator() มาใช้ SmartRefresher()แทน

4. ต่อมาจะมาสร้างในส่วนของ Function _onRefresh และ _onLoading กันต่อคับ

สร้าง _onRefresh() และ _onLoading()

หลักการนำ list มา concatenate ของ dart
List old = [1, 2, 3];
old.addAll([12,13]);
pirnt(old);
จะได้
[1, 2, 3, 12, 13]

5. เท่านี้ App ของเราก้อจะสามารถ pull down to refresh และ pull up to load more ได้แล้ว

Pull down = refresh, pull up = load more.

Code:

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

References:
https://pub.dev/packages/pull_to_refresh/versions/1.6.3
https://www.tutorialspoint.com/dart_programming/dart_programming_inserting_elements_into_list.htm