Flutter Pagination Example | ListView.builder | Load More on Scroll ListView

everyone assalamu alaikum here we'll see how to do pagination in flutter and this is the result that we want to achieve to load data from the server and as you scroll through so as you scroll more and more we'll see that here we have more loading icon and you can load it to the end when you reach the last part and at the end you will see this message that it says you fetched all the content so let's get started so here i have this main function and then i have this stateless class and after that i'm going to create a stateful class named my homepage okay so this is what we have now and if we go ahead and run it's a blank screen and it's black to be able to do pagination at the top we have defined a base url and this is our server data and this is the end point and then how many pages or which pages we are in and how many items that we want to get each time and if it is running for the first time or not and whatever the post or information we get from our endpoint we want to save it in this variable well after that we have defined this init state function actually we are overriding it and from that we are calling a function which is called first load and this is the body of the function and this first load function would get called when our app starts on the first page or home screen or on this certain page which is main.dart now over here at first this function when it's get called is is running loading first which is this one we'll set it to true which means that we are trying to load data from the server and when the loading is done we'll set it to false so our ui know that we have loaded data and it's time to redraw and in between these two set state function we'll load data over here to load data so here we are using try catch clause and over here actually we are making a call to the base url which is this one over here at the top and as we make a call actually we are telling the server that which page we want to retrieve and how many items we want to retrieve well first time we want to read the page 0 which means the first index and first time we also want to get 20 items and if we can get that we'll save this in this variable and after we do that we'll do a json decode and then we'll save it in the list the list that we have declared at the top of course we are doing it with http package so you need to go ahead and install the package and then we are using the get method but you need to remember your server should support this kind of formation for getting data if your server or endpoint doesn't support you can't retrieve data like this now it's time to work on the ui so over here we have very simple ui which is container we are going to remove it and over here we do an apple now let me set the adverb will have a basic title and right after that we'll have body now inside the body either we want to show a circular progress bar or our content now to be able to do that first we need to go ahead and use this condition if it is true that means our data is loading and we will show circular purpose for so this is the circular progress bar otherwise we'll show a column and insert column will show the data which means that our data has been loaded so here inside this column we have this expanded widget and inside the expanded widget we are using listviewbuilder and at the same time we are saying how many total post we have and if we have post we are showing it in a card and here we set up margin and at the same time we are using list style to show the text the poster title and the subtitle now this is the time we can go ahead and load our app and we see that our data is there and pretty much we'll see that we have 20 data over here congratulations so now this is the time to go ahead and load next 20 data this variable will help us to know if we have more data in our endpoint or not and if we have then this variable will help us to load the data and show the circular progress bar as we load data from server now now we'll go ahead and declare a new method over here and with this method we'll be able to load more information from the data after the first load but definitely we are checking whether it is true or not whether first loading has been done whether it is false or not and at the same time we have to say if previous more load has been set false to false or not and if this condition met then we'll go ahead and set it to true which means that okay previous a lot more has been done and we want to load again so that's why we'll set it to true and once that is done over here we'll load the data as we click on the button and f and as the data loading is done we'll set it to false do you remember has next is true at the beginning which default we assume that we have more data in the server each time as we scroll it so more data will be loaded so for this reason we have to make this statement over here where we want to go to the next page which means that get data from the end point for the next page so that's why we are increasing it by one over here and after that we'll go ahead and actually load data from the server or from our endpoint now over here as you see that once again we use this http get method and over here we are passing the base url and the page information but remember each time you scroll up scroll it up the page gets increased by one and limitations stays the same as 20. and after getting data from the server we decode it and put it in this list variable but we check if we have more data or not if we have more data which means this is not empty then we add the data on the top of our previous list which is this one so with this method at all it will keep the data in this list and on the top of that it will add more data than new data from the server and if this is empty which means that this condition is false that case will set has next page equal to false which means that we don't have any more data now this is the time to go ahead and call this function from our init state so here is our init state and right after this we are going to call this method but before that actually we need to initialize the scroll controller throw it the new scroll object will be saved over here and scroll scroll control this scroll through it the new scroll object will be saved over here and the scroll controller would listen using this add listener method so as you scroll each time the more method the load more method would get called now it's time to make some changes in our ui so right after this expanded widget over here we'll set a condition of we'll set the condition and we'll check if more data is loading if more data is loading now over here we'll show the circular progress indicator and at the same time we also need to do our controller over here so we'll pass the controller the scroll controller the one we have defined now we'll go ahead and run our app one more time and we'll see how it looks so let's go ahead and scroll it and as you see we see as progress indicator over here and you try to scroll more you see it again so as you scroll you go ahead and check that and it's always there but what happens to the indicator if we have no more data available and for this reason over here right after this conditional check we'll set up another condition and here we'll see if has next is a false or not if it is false then we'll say okay you have fetched all the content okay now let's go ahead and run it one more time so here we see that you have fetched all the content but there is a slight problem with this approach so you'll see that as you start scrolling it starts to load immediately and we don't want to do that so for this reason we have to set another condition and that's pretty easy to do for this one we'll come over here in our method which is called load more over here we'll check an additional condition and with this condition you'd be able to control how much further down you should start scrolling of course you can change the value as you want let's go ahead and run it and this time we'll see that it works differently you see it didn't show up yet because we are controlling how much further it should start the scrolling or this load icon okay so yeah that's how you do pagination with list rebuilder in flutter thank you

Channel: dbestech

Views: 44,454

Keywords: flutter pagination, flutter tutorial, flutter, flutter pagination listview, flutter pagination rest api, flutter pagination rest api listview

Id: scsexlO1ezo

Length: 9min 11sec (551 seconds)

Published: Sun Jul 31 2022