Infinity Scroll in Flutter using Bloc and Firestore
in this article, we will walk through how I implement infinite scroll in my projects using Bloc as my State Management and Firestore as the databases
This article was written as an individual review assignment for PPL CSUI 2021
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
as you can see, in my project, I need to implement this screen, which is I have to fetch all data for “Laporan Pemantauan” from my database. since in the future this app will have a lot of “Laporan Pemantauan” data, it’s very logical to use pagination or infinite scroll.
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.
as the standard of Bloc, I made the Bloc, Event, and State for my Bloc.
The highlight of this code was in pantau_laporan_bloc.dart from lines 29–51. as you can see when the LaporanInitial event was triggered, I fetch into firestore the “Laporan Pemantauan” data but I limit it to just 10 data per call. then if the user already scrolled into the last data, the PantauLaporanEvent will be triggered and will go into line 29 of the bloc. in that if-else statement, I check if the data in the database already loaded all or not, if yes then the hasReachLimit flag will be true, so if the user already at end of the scroll, PantauLaporanEvent will not be triggered anymore. Then in the widget that deals with this bloc, this is how I implement it
in the list view widget that I show you, of course, you have to use BlocBuilder and BlocProvider first before you can create this infinite scroll.
BONUS (fetchLaporan method i used on Bloc)
Well, I think that's all for this article, hope this could help you implement your infinite scroll, thanks :D
