Infinity Scroll in Flutter using Bloc and Firestore

What and Why Infinite Scroll?

When it comes to fetching a bunch of data from our database to our Frontend projects, there must be a thought of how you will get the data. most of the time there is 3 way to fetch the data on this case. First is the simplest way, which is just getting all the data stored in databases, even if the data in your databases already have a very large amount of data. The second is using pagination, it’s pretty commonly used, and the Third way is using infinite scroll. Infinite scroll is getting popular this day because this way is adopted by many Social Media Apps for a reason. as we know, every Social Media might have a lot of content stored in their databases right? just imagine if they are using the first way. Just to get the data from their database, it already costs a lot of pain because the user has to get a very big HTTP response body from the server, so we know it’s not good considering the UX. if we are using pagination, this problem will be solved, but we got another problem which is, this day almost everyone accesses Social Media using their phone, and if we are using pagination on the apps, it’s not the best experience user can get because pagination needs the user to use tiny button just to get into the next page. So to resolve all the issues, Infinite scroll used. In the first HTTP get call, user just need to get X first data, then if the user already scrolled into the end, if the databases still have more data, then the user will ask to get another data from the database, and this flow will be done again and again until all of the data already fetched by the users.

Why I use Infinite Scroll on my Project

How I Implement Infinite Scroll

in this project, I use Flutter for building mobile apps, and for the database I use Firestore, and for State Management, I use Bloc. the problem is, I didn’t get any reference of how to implement this thing using firestore, so i have to find out the way on my own. fortunately in the net, there are many examples of infinite scroll using Flutter and Bloc, but not with firestore. So in this article, I will show how I implement it.

pantau_laporan_bloc.dart
pantau_laporan_event.dart
pantau_laporan_state.dart
check if the user already at the end of the scroll
List View Widget

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store