Flutter Pagination | Load more on scroll | Building Feature in Flutter

hello there in this video I am going to show you how we can do pagination flutter so what is pagination so when you scroll at the bottom it loads more data so you have seen this in like various applications on Facebook Twitter Instagram so when you scroll at the bottom it is start loading more content so let's see how we can do this in flutter okay so I'm going to start from very basic where I am having a home page with some text we will be using this API where we have to provide two input the per page like per API call how many response we want and which page number uh we are in okay so let's start by making the widget as stateful because state is going to be changed in this application and I'm trying to keep this as simple as I can because we will be mainly focusing on the pagination in this video so I will not using any uh State Management okay so let's add the dependency which is http and the public speak.tml so now we have added the dependencies so in the initi state we are calling fetch post so whenever this app will start it will automatically load some post so now uh let's copy the U order and let's try to make a request to this URL so for that we need to convert that URL into URL and after that we'll import http Alias as http and we will make a get request to it that's it now we got the response so we will confirm if the like the expected code is 200 so if we got the status code AS 200 it's like expected response otherwise it's unexpected okay so in the case of unexpected we will not do much thing we will just print unexpected that's it moving forward you can see that the response of this API is and array which means when we will decode it we will get the array so let's store the Json in variable Json and let's decode it using Json decode and let's pass the response body so as I told you it is going to be a list so let's explicitly tell that as list so let's also create a variable called post where we will store all the posts and post is now equal to Json so let's come to the UI and let's try to show the post which we just fetch using the API so for that we will use listview Builder and inside that there will be a list style and for now let's start with uh index number so in the item count we need to provide how many host we have so that is going to be posts dot can So currently it is saying 0 and 1 which means 2 because per page item was 2 only so let's refresh now I updated it to 10 so it's 0 to 9 which means the index number 0 to 10 9 means 10 element okay moving forward now I want to show title instead of index number so for that we can just get one post using post dot index and to get the title what we will do we will say post title and inside the title we have rendered we got the title so let's show the title also so now we have title moving forward now I want to show the subtitle not subtitle yeah subtitle basically and that is going to be description so we can use SEO description so let's use SEO description for subtitle and subtitle yeah so now you see there is SEO description as subtitle some of them are empty which is fine also I am going to like add max line so the title can be math line of 1 and subtitle two so now this one is looking like little bit structured moving forward I will add something at the reading which will tell us the count how many elements are there so now I am showing like 1 to 10 so you see everything is good at this point let's wrap this in card yeah we can add a little bit more style but like I will not focus much on style like in this video because our main purpose is to uh build the functionality okay so we will create a scroll controller and we will attach this scroll controller to the list view so when we attach the scroll controller to the list view it gives us a idea about the scroll behavior of that list view so suppose whenever someone will scroll this list view we will like using the scroll controller we can attach any kind of listener where it will notify like yeah this has been installed we will get a callback and that's the thing which we wanted so whenever someone will scroll we will get the idea yeah someone has scrolled so we will make another API call for next page of data okay so let's see how we can do that so in the initi state at the very beginning I will say scroll controller dot add listener and inside that we will uh pass the Callback so the call package scroll listener and this is a function basically method okay so in the scroll is not I am first of all going to just print something in order to get the idea that if this is getting called or not so let's restart the application if I like scroll down you see some message is getting printed and the message is like printed for 112 time which is a lot which means if I scroll if if I scroll a few times it will call the API for this much of time which is bad okay so we do not want to do that so for that we need to write some kind of logic when we wanted to call the API uh to avoid like multiple API call or unwanted API call so for that the first logic is going to be let's call the API when we reach the end point so every time we scroll it the scroll listener will like be called and it will check if the current position is the maximum position of the list if that's the case we will say call otherwise I will say Don't call because we have not reached the last or end point of the list view so let's scroll you see you say Don't call multiple times and call one time because whenever we reach the last point of the list view it says let's call otherwise you say Don't call so in the call part we will call the API and it will call the API uh fetch post other than that this is also not the best case but this is the like the uh most good case I will I will select the uh it's okay if we use this code but at the end of this video I will show you how you can improve it more okay moving forward I will show you one more thing So currently the page is like hard coded which was three but whenever we will like scroll at the bottom the next page data should be loaded so I will start with the value 1 which means the first pages will be one after that whenever we will reach the end point we will like increment the value by plus one which means it will call the next value so you see that if I scroll it says page number three if I scale one more time four and five it is happening but the issue is the data is not like uh updating earlier we were having 10 now also we have only 10 data it is not increasing it should be increasing so there is some issue and which we need to fix it so when we are getting the response we are restoring it in post but what we want so we want to store previous post plus the new data so host plus Json the previous list of data plus new list of data 40 you see so whenever we are scrolling we are not getting idea like it is fetching more data or not so there should be some kind of indicator which will give us idea yeah we are loading more data so for that we need to move further and we need to write some more logic in order to add that indicator at the bottom which will tell some data is being loaded at the moment please wait okay so let's do that so for that first of all I will create a variable which will say is loading mode and it will by default false so whenever more data is loading so I will say let's make it true once we make it true we will start making the API call and once the API call is done I will say false okay so let's do this okay so we are saying true and after making API call we are saying false that's it as simple as that moving forward now we need to use that variable and we need to like so that indicator so if we are loading like uh more data in that case what we will say we will say render all the post and plus one plus one basically means how many posts you have you have 10 post render 10 post and plus one there will be 11 element 10 will be post and the 11th will be indicator so always there will be one more element other than post that will be indicated suppose if the index is less than post length in that case we are just going to show the post otherwise otherwise we will just show a indicator which will be in the center circular progress bar indicator awesome so now if we let's restart that okay so if I scroll you see at the bottom there is like a circular progress bar so it's it is there at the bottom so it is happening now we are going to improve the pagination which I said you at the very beginning So currently also this is not the best case this can be improved little bit and what's the problem in this let me show you so if I print call or any message here okay so this message should be called at once only okay so if I scroll it is getting called one two you see so if the API is being called and it is taking some time if I do this multiple times the API will be called multiple times so what we want is that whenever the load more API is like happening in the back end do not try to recall this API okay so if loading mode is true let's go back don't move further if user is moving unwanted really like uh at the very bottom don't make the API call okay let's wait for first API call to be finished okay I hope you learned something new and if you have any question let me know thank you see you in the next video

Channel: Nitish Kumar Singh

Views: 14,388

Keywords: Nitish, Kumar, Singh, flutter, flutter pagination, pagination

Id: Gsfjcpo6wcA

Length: 10min 55sec (655 seconds)

Published: Sat Sep 03 2022