Trying to load the data as I scroll my listview - firebase

Question

I am trying to make the page load data as i scroll, so I made a scroll listener in my list builder then i made a fetch next function in my future builder.
But how can i call my fetchNext function which is in my future builder to call in my void scrollListener() {}.
Is it even right to paginate the data like this. Please help.
This is the list builder
class PostGridScreen extends StatefulWidget {
final String type, city, state;
PostGridScreen({this.type, this.city, this.state});
#override
_PostGridScreenState createState() => _PostGridScreenState();
}
class _PostGridScreenState extends State<PostGridScreen>
with AutomaticKeepAliveClientMixin {
Future _getPosts;
int documentLimit = 5;
bool _hasNext = true;
bool _isFetchingUsers = false;
final _usersSnapshot = <DocumentSnapshot>[];
final scrollController = ScrollController();
var refreshKey = GlobalKey<RefreshIndicatorState>();
#override
void initState() {
_fetchPosts();
// scrollController.addListener(scrollListener);
super.initState();
}
#override
void dispose() {
scrollController.dispose();
super.dispose();
}
void scrollListener() {}
Future _fetchPosts() {
return _getPosts = Provider.of<BaseProvider>(context, listen: false)
.getPosts(widget.type, widget.city, widget.state, documentLimit);
}
Future<Null> refreshList() async {
refreshKey.currentState?.show(atTop: false);
await Future.delayed(Duration(seconds: 2));
setState(() {
_fetchPosts();
});
return null;
}
#override
Widget build(BuildContext context) {
super.build(context);
return RefreshIndicator(
onRefresh: () => refreshList(),
child: FutureBuilder(
key: PageStorageKey('Page1'),
future: _getPosts,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
controller: scrollController,
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
//Fetch Next
Future fetchNextUsers() async {
if (_isFetchingUsers) return;
_isFetchingUsers = true;
try {
_getPosts =
Provider.of<BaseProvider>(context, listen: false)
.getPosts(
widget.type,
widget.city,
widget.state,
documentLimit,
startAfter: _usersSnapshot.isNotEmpty
? _usersSnapshot.last
: null);
_usersSnapshot.addAll(snapshot.data);
if (snapshot.data.length < documentLimit)
_hasNext = false;
} catch (e) {}
_isFetchingUsers = false;
}
//Tile
return GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => PostDetailScreen(
post: snapshot.data[index],
),
));
},
child: Padding(
padding: EdgeInsets.only(
top: 10,
bottom: 3.0,
right: 20.0,
left: 20.0,
),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: const Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
), //BoxShadow
],
color: Colors.blue,
borderRadius: BorderRadius.circular(20.0),
image: DecorationImage(
image: NetworkImage(
snapshot.data[index]["imageUrl"],
),
fit: BoxFit.cover,
),
),
height: 190.0,
width: 100,
),
),
);
},
);
} else {
return Center(
child: Text("Loading..."),
);
}
}),
);
}
#override
bool get wantKeepAlive => true;
}
This is the base provider
class BaseProvider with ChangeNotifier {
final CollectionReference postsCollection =
FirebaseFirestore.instance.collection("posts");
//Fetching Data
Future getPosts(String type, String city, String state, int limit,
{DocumentSnapshot startAfter}) async {
try {
if (startAfter == null) {
QuerySnapshot<Map<String, dynamic>> response = await FirebaseFirestore
.instance
.collection("posts")
.where('type', isEqualTo: type)
.where('sellercity', isEqualTo: city)
.where('sellerstate', isEqualTo: state)
.limit(limit)
.get();
return response.docs;
} else {
QuerySnapshot<Map<String, dynamic>> response = await FirebaseFirestore
.instance
.collection("posts")
.where('type', isEqualTo: type)
.where('sellercity', isEqualTo: city)
.where('sellerstate', isEqualTo: state)
.startAfterDocument(startAfter)
.limit(limit)
.get();
return response.docs;
}
} catch (e) {
print(e.toString());
return e;
}
}
}

Answer 1

if I understood correctly you want that your app doesn't load and render everything in a list at once and render them just in time it is shown to the user.
for achieving this you have to implement lazy loading which ListView.builder do this completely on its own so you don't need to worry about it