Flutter Tutorial - Pagination & Infinite Scrolling - Firestore

this is what we want to build here in our app so we have here an application which is connected to firebase and every time we scroll through the list you see that he is loading the data from firebase and he is not loading everything one by one he is loading it with pagination and i want to start with you with an app where we have all the users inside of the list view and you see we don't have here any loading because everything is loaded there once and we want to load it now separately and therefore we have here this firebase backend with our database and here you see that we have all the users stored in the collection and here we have the image of the user and the name and this is what we want to load paginated and if we look here currently into our fetch method we have it already so we have here this method where we load the users from firebase so we get all the users and now we want to do it paginated and now i'm here inside of the list view and here we build basically all the users so we get them here from the user provider and then we simply draw them here in our app and here inside instead of loading everything at once we want to limit it therefore we start here inside of our constructor how many items we want to load and here you can basically define that you for example want to load 10 items first of all i create a reference to the collection and then we get them and now we can put here in between that we want to limit it so we want to load for example here only 10 users from the database and you can also define here an order by so you can order it by a specific attribute in this case by the rank and like you can see my data has the every time i rank inside and simply the data will be ordered then by this rank and with this we get the data in the right order and now we go to the position where this was called so it's basically inside of here and now we need to define the limit so we go here to the top and in our user provider we create three fields first of all we defining how many items we want to load by one and then we can define here who is has next if we have more items and this is what we get from firebase if we have more items and this field is what we want later to use so if we already fetch some users we don't want to fetch again some users so we wait every time until the fetch process is finished and then we can fetch the next users now we can put this document limit here inside of our get users and now we every time load here 15 users instead we need to define here inside the hasnext property and this is pretty simple we simply check here if our data which we load here new if it is under our current limit so let's say we set to firebase we want to load 15 and firebase got us only let's say three then this is here a condition which is true and then we want to set here has next to false because firebase obviously doesn't have more items and therefore we want not to load here any more items in the future and then we also want to use the third field is fetching users and this is what we basically right here in front so if we start fetching users we set this to true and if we end it here to fetch the users because we have in a wait it is waiting and after we want to set it again to folds and this basically helps us to put here another condition inside so we want always to check here if we currently fetch users then we don't want to fetch any more users and that's all what we need to do right now for loading the new users and this method which we have now here inside works fine for the first 15 users which we allowed but after it doesn't work because we tell always firebase to get here 15 items however firebase doesn't know which 15 items and this is what we need to define here inside and here inside we basically have some attributes which we can use so we can use the start after start after document start add and start add document and we want to use your start after document and here inside you need to always to put a snapshot and basically what happens is we load here the first 15 users and then let's say this was the 15th user then we put here his snapshot of this user again here inside of this method so firebase knows okay we already loaded this robin for example and he will give us the next data after robin so he will load all this data and then the same thing after we have loaded the next 15 users then for example welles was here the last user which we have loaded and then we also tell you firebase again okay we have this user here we put then this snapshot of this user here inside and then firebase will load the next 15 users and we always want to execute the start after document only if we have a document so in the first run if you first start your application and try to fetch the users we don't have any reference data so we don't have any documents and therefore we cannot put this here inside and therefore i will remove this here again and now we simply create a new field where we always can put our document inside which was the last one of the 15s we loaded last time and then we simply ask here if the start after is null and this is always the case for the first time because we don't have there any document in the first time we load here the data and if this happens we simply want to get the data and we limit it also here by 15 so we always get here 15 users and then otherwise if we have already loaded some data then we also want to get here the users and then we put here simply the start of the document also inside where we put here our start after document inside so that he will always load after this document and this is all what we need for this method so firebase now knows exactly which documents to load and we can then use our pagination here inside of our provider again and now we want to add this start after document to our get users method here in our provider where we fetch the users so basically we put here our start after document inside and this is basically every time our user snapshot from the large fetch which we already did and therefore we always prove here if we already did a fetch so if our user snapshot list here is empty and this is basically the snapshot of all our users so if it is empty we want to put here the value of null inside and otherwise we always take here the last document which we have already loaded last time and now you think like okay maybe it is already working but we need to do more stuff so right now there's nothing working reloading here only 15 user data so also we need to change here something in our widget our ui needs to know every time if we scrolled here to the end of the list and if we scroll to the end of the list he wants to load some new data and therefore we simply use here the scroll controller and we put it into our list view and now that we have riot this year up we can ask the scroll controller if we have reached the end of the list and how we do this is we go here inside of our init state method and call here this corecontrollerheadlistener so every time we scroll here around in our list we want to listen for it and then we get every time notified if the value in this list changed and we will also overwrite here the dispose method to actually dispose the controller at the end of this life cycle and now we want to implement the scroll listener and here inside of the scroll listener so every time if we scroll here around we want to load the new users so basically we call here the method fetch next users and yeah it would not be great if we like load the users every time so we only want to load them at the end of the list and therefore i put here first of all the condition inside that we basically have more users to load so if we have next users then we want to execute this one and we also want to check that we reached the end of the list and this is pretty easy we put here a condition inside and then we want to check here if our current position in this list view is greater the end of the list view and if that's the case that we have reached here the end of our list view like this then we want to load actually the new users and we also make sure that we are not out of range with our current position alright so this should do the work basically and we can try it now out so i click here on fetch users and now he has loaded the 15 users and if i go here to the end you see that he is loading more users and also more users and so on and i want to show you now some quick tips so that you can actually improve this one and the first thing what we want to improve is to put you into our list view also a scrolling indicator so that the user gets some feedback and therefore we simply call here the circular progress indicator and we only want to show this if we have more items to load and we also place here a container inside so we define here the size of this progress indicator and now if i hot restart the application we go here and click on fetch users and now he has loaded the first 15 users and if i reach the end you see here something like this and the loading indicator is not right so we also can put here basically a center widget inside and now if i reload it and go here to the end of the list you see that it is a smaller one and he's always loading 15 more users and maybe it's not cool for a big application to always go to the end of the list and then wait until the data is loaded because right now the users don't have so much time so they don't want to wait and what we can do for this is pretty simple we put here instead of this max scroll extend we always take here the half so every time we have reached the half of our list we already load here some new data and then we basically don't see this loading indicator all the time only if the user is scrolling really fast but normally he don't see it and this is what we want to do here because this is much better for the user experience and now if i hot restart here you shouldn't see the loading indicator maybe only in the beginning right now but it's like really short it's not like before it was like for there for three seconds let's say and right now it's for some milliseconds and this is optimal i guess and what you also can do is you can always load your more data by one so you go here into your provider and increase here this number for example to 50 and then you load 50 user at once and then you basically see the loading indicator at less time hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music] you

Channel: HeyFlutter․com

Views: 20,008

Keywords: flutter, dart, listview, flutter listview, paginated listview, listview pagination, infinite listview, flutter pagination, flutter listview pagination, flutter paginated listview, flutter infinite listview, flutter infinite scroll, firebase, cloud firestore, pagination, scroll, scrollcontroller, scroll controller, firebase firestore, firebase cloud firestore, startat, startafter

Id: IruuzPydPz4

Length: 12min 12sec (732 seconds)

Published: Sat Oct 31 2020