Using GetX package with firebase and PageView.builder() - flutter

Question

I'm trying to implement infinite scrolling in flutter using Getx and PageView.builder(). So far i've been able to get all the data from my firebase database to display the image, but i'm unable to implement the infinite pagination.
I want say 10 images to be displayed on first load (fetched from my firestore), and then as the user scrolls down to the 10th image, it should load the next 10 images from firestore.
Below is my code:
In my model i have a file name "image.dart" and it contains this:
import "package:cloud_firestore/cloud_firestore.dart";
class Images {
String username;
String uid;
String id;
List likes;
int commentCount;
int downloadCount;
String tag;
String description;
String imageUrl;
String profilePhoto;
bool verified;
Images({
required this.username,
required this.uid,
required this.id,
required this.likes,
required this.commentCount,
required this.downloadCount,
required this.tag,
required this.description,
required this.imageUrl,
required this.profilePhoto,
required this.verified,
});
Map<String, dynamic> toJson() => {
"username": username,
"uid": uid,
"id": id,
"likes": likes,
"commentCount": commentCount,
"downloadCount": downloadCount,
"tag": tag,
"description": description,
"imageUrl": imageUrl,
"profilePhoto": profilePhoto,
"verified": verified,
};
static Images fromSnap(DocumentSnapshot snap) {
var snapshot = snap.data() as Map<String, dynamic>;
return Images(
username: snapshot['username'],
uid: snapshot['uid'],
id: snapshot['id'],
likes: snapshot['likes'],
commentCount: snapshot['commentCount'],
downloadCount: snapshot['downloadCount'],
tag: snapshot['tag'],
description: snapshot['description'],
imageUrl: snapshot['imageUrl'],
profilePhoto: snapshot['profilePhoto'],
verified: snapshot['verified']);
}
}
#
Then in my controller folder i have this file called image_controller.dart and it contains this:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class ImageController extends GetxController {
var isDownloading = false.obs;
final Rx<List<Images>> _imageList = Rx<List<Images>>([]);
List<Images> get imageList => _imageList.value;
List<Map<String, dynamic>> list = [];
bool isMoreData = true;
DocumentSnapshot? lastDocument;
#override
void onInit() {
super.onInit();
_imageList.bindStream(
firestore.collection('images').snapshots().map((QuerySnapshot query) {
List<Images> retVal = [];
for (var element in query.docs) {
retVal.add(
Images.fromSnap(element),
);
}
return retVal;
}));
}
//................................code continues
Then in my view folder i have a file named image_screen.dart and it contains this:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class ImageScreen extends StatelessWidget {
ImageScreen({Key? key}) : super(key: key);
final ImageController imageController = Get.put(ImageController());
#override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
body: Obx(() {
return PageView.builder(
itemCount: imageController.imageList.length,
controller: PageController(initialPage: 0, viewportFraction: 1),
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
final data = imageController.imageList[index];
return Stack(
children: [
ImagePlayerItem(
imageUrl: data.imageUrl,
),
Column(
children: [
const SizedBox(
height: 100,
),
// .................code continues...................