Flutter Firebase Firestore Pagination

hello everyone assalamualaikum here we'll take a look briefly how to do flutter Firebase pagination which means that loading more data on demand as you scroll through so here we have this uh chatting app and over here we load more data from the Firebase and how to do that now I have this method which is called on ready actually this is part of get X but the same is applicable for Block the idea is same exactly same so anyway so our floor get X is a lifecycle method which is already this gets cold when you come to a certain page now over here I am doing few things I have a list actually where I save data but once I'm on this on ready method what I do I'm going to I clear the list okay so I want to populate the list put in the list fresh new data whenever I get data from Firebase so at first I do this list over here and I clear it and then from Firebase itself we get a lot of data so over here you can see that we are fetching data from Firebase and we for that one we have our collection a document ID sub collection and then we have some basic conversion of data like as we get data from Firebase we convert the data from Json to object using this with converter method but anyway the most important part is this one which actually has to do with our pagination over here we get the data ordered by what is the condition for that one we use the time so as we previously added the data now we have a filled in our Firebase which is called add time so descending true and we get 15 of them so that's what we do over here so we get first 15 data and after that actually now inside this we do Listen to Objects whether our data is being changed or not but it's not part of the session anyway so we insert all the data to our list and this is the list actually I was talking about now if you're just looking for Firebase pagination this listen function it doesn't really matter just for listening to changes in the Firebase so you can skip this this idea or section anyway so earlier we have seen that over here we cleared the data right we cleared the data now once we get this 15 data from our Firebase we save it in our list as you can see all right and as we are using get X we let the UI know okay our data has been updated okay that's what we do now this is the basic part of pagination okay well and this is the first part now there is a second part actually so we want to scroll through and in our scrolling section now this is a scrolling object which is coming from scroll controller now this scroll controller actually listens to any scrolling so as you scroll over here after it match a certain condition on the UI then we actually load more data so this function only gets called as you load as you scroll again and again so what's going to happen over here you see that first we loaded 15 data now if we scroll it again we want to load more data so let's go ahead and look at this function now this function is over here now once again we do the same Firebase query over here we get the data from Firebase remember we previously added 15 data in this list now first we get the last value for the 15 data and the oldest one so what we do over here from that oldest one on we take the earlier 10 so that's what we are doing over here okay now how to understand it better so here I'm going to write it like this so that it makes more sense to you so once again try to understand over here earlier we added 15 data in this list and these are the 15 data and each of the data they have a timeline so maybe the First Data was added on the 11th August the next one was added earlier time which means maybe 10th August and the last one 15th one maybe was added on the 8th August okay now over here we are doing this condition we will and we tell that okay whatever the data earlier than this 8th of August get them and how many 10 of them so that's how actually we are fetching the next 10 data all right and if we do that we just once again put all this data from this query put in our list over here so what is our list this message content list okay and that's how the pagination works pretty much okay now we have seen that this method async load more data is inside a listener so what it does each time you scroll it goes and gets more data for you okay and it remembers it always remembers the last time for the last data okay and based on that this condition actually is the core condition for pagination but anyway now let's show you in example and now let's come over here click on this so these are the first 15 data now as I scroll through it you will see we'll load more data and you'll see that at the top we have this icon where it says that load more data okay so let's go ahead and check that so I think you have seen that load more data we already loaded stay carefully at the top there was this load more data yeah so that's how you do the pagination from Firebase so that's how you do pagination on Firebase data thank you so much

Channel: dbestech

Views: 3,746

Keywords: flutter firebase firestore load more data, flutter firestore pagination, firebase pagination, flutter load more data, firestore pagination

Id: W-Q7tzjuuYs

Length: 5min 49sec (349 seconds)

Published: Wed Feb 22 2023