Pagination In Flutter With Data From Server Through Api | Infinite Scrolling In Flutter.

[Music] hi everyone welcome back to my channel in this video I'll be talking about how to apply pagination in flutter so pagination is the thing where you will have to upload large amount of data from the API into your application in a small chunks of data like this let me reload this it is reloaded and for the first time 20 data will be load and next 20 will be load in second page and this one is third page this one is fourth and once all the data is fetched from the API it will show some message in the bottom like this so without any delay let's get started right after this [Music] intro [Music] so this is my home screen and inside this stateful widget and I've taken here scroll controller and inside init State controller. add listener and I'm also checking the condition my list view riches to the bottom then we'll load extra data this is the function that I was testing so in this video I'll be talking about how to load data from the API so I will uncomment this method later also there is list of a string by the name list items I will fetch data from the API into this list so first of all let's design the UI for list so inside scap fold and body I'm using list view do Builder inside this I'll be providing padding of 10 and item count would be list items do length controller I'm assigning here and also I'm providing item count list items do length + 1 because when our list reaches to the bottom then it will show circular indicator that is why I'm adding here one if it is not the last one then normal list will be appear and inside item Builder context index and inside this I'm checking the condition if list items do length is greater than the index then will assign list items index into this item and it will return list style and as title I'll be using text this item and and if it reaches to the last one it means list item length is greater than index then it will come inside this means normal list will be visible otherwise plus one condition it will come inside this else so in that case we will show circular progress indicator padding 8 pixels and as child I'm using here Center and then circular progress indicator and here when my program loads I'm commenting this and uncommenting this load data from API so when my program will load for the first time it will call this load data from API and it will show data from the API also when my list will reach to the bottom again I want to load Lo the extra remaining data so I will also uncommon GitHub and we'll share the link with you you can check that so let's move forward and let's come inside this method load data from API so inside this I'm using this URL and if you will hit this URL this is the response are the 100 elements if you will check the ID 100 and the beginning is one and if you will provide limit and page to the URL then it will provide data as pagination so for now I'm using limit is 10 and Page equal to 2 so it is providing the data of user ID 2 it is starting from ID 11 to 20 now if I will change here the value of page 2 to three so it will fetch the data of third user so I will have to provide here page and limit value also so if your API is not supporting the pagination then you will have to ask your backend developer for that now let's move forward so final response AIT http.get and inside this I'll be using that particular URL and also checking the condition if response status code is 200 then list from API will be initialize from json. decod response. body and here I'm taking Boolean variable more data for showing that circular indicator if the data is is fetching and once the data is fetched from the API then new data will be visible so again I will have to apply the condition here so for this if more data is true then circular progress indicator will be visible otherwise no more data will be visible that there is no more data now so here inside the set state list items. add all and list from API I'm creating a mapping of all the strings that I will fetch from the API so to list and inside this final number I'm fetching the IDS of all the data this ID I'm fetching and inside condition I'm checking list from api. length is less than limit what is limit I will provide the value here then no more data equal to false so limit for now I'm providing 20 value so once our data will be load so 20 data will be visible at one time so this is the condition if the list from api. length is less than the limit then more data will be false and it is inside the set State then it will update the value of more data and also here it will be visible according to this condition circular progress indicator or no more data and inside this let me provide the limit value which is 20 and let me create an integer value for providing the page dynamic Al again we'll have to update this URL and inside this set State I will update the Page by one so here taking one more Boolean value is loading so if your response is slow from the API then you can restrict user to hit the API once the data is phased from the server so that is why I am applying here the condition if is loading is true if it is still loading then it will return from this condition it will not execute this line of code and if it is false then is loading will be true and also inside this set state is loading equal to false till now let me run the code and show you first 20 item is loading and then rest 20 is loading as pation 80 and total number of data is 100 so when it reaches to 100 no more data is visible when we pull down the list I want to load the data from the beginning for that I'm creating here one function and inside this I'm using set State and is loading will be false more data is true and page is zero and also list item do clear and inside this the same API will be called load data from API I will WRA this list view with refresh indicator and on refresh I will call this function let me run this total list is fed from the API and and some more data is added from the back end side then when we will reach to the top of this list and we will refresh this and again on refreshing this refresh function will be called and it will again reload our data it will clear the previous list and Page will start from zero and again more data will be true so true means it will show circular progress indicator and is loading will be false after that load data from API will be called so inside this function it will fetch the data from the API and my list items will be updated once again that's it in the video uh I hope that uh you must have learned something from this and if you do then please thumbs up to this video and also subscribe to my channel Channel hope to see you next time in our next video bye for now

Channel: thecodeme

Views: 449

Keywords: flutter, flutter tutorial, flutter for beginners, flutter animation, flutter app development, dart language, easy UI with flutter, learn with flutter, make app with flutter, package of the week flutter, flutter package of the week, flutter design of the week, flutter user interface, Pagination in flutter, List view pagination in flutter, List view in flutter

Id: D-bJ2vcMq5c

Length: 11min 3sec (663 seconds)

Published: Wed Jan 03 2024