Flutter: Infinite Scrolling ListView (HTTP GET)

how to create an infinite scrolling list view that fetches more data using http we have a list of 15 items that we display inside of a list view once we reach the bottom of the list then we want to load more data simply add one more item to the list view if it is not the last item then we display our normal items and if it is the last item that we have now added then we show a loading indicator as a result if we scroll down the last item is this loading indicator next we add to the list view a controller that we create within the state within the init state we listen to this scroll controller and check if we have reached the end of the list if this is the case then we want to fetch some more data from the server so in our case we add some more items to the end of the list with this if you reach the end of the list then the new items are appended to our list also make sure to dispose the scroll controller in case it is not needed anymore next you could use the http package to load some items from the server if the response is successful then we get from the response body the new items which we simply add to our current items list let's also go to this website from this url we load a list of items each item that we load we are only interested in the id for now therefore let's map over our items from each item we extract the id and return a text item with this number with this if we reach the end of the list then we load 100 items from the server next we want to make sure that we only load 25 post from our server next to the limit you can normally define a page if it is a page 1 we load the first 25 items if it is the second page then we load 25 more items and so on to make it dynamic we have a page variable that we add within our state and finally once we have loaded some items from the server we increment the page so that we load next time the next items from the server let's also go to the state and remove the items and instead we fetch then initially some data from the server with this we load 25 items from the server if we reach the end then we always load 25 more items of the server if we load less than 25 items from the server we set a flag has more to false let's also create this flag within our state and within the list view instead of the circular progress indicator for the last item we display then the text no more data to load as a result if we reach the end of the list and there's no more data on the server then it displays no more data to load also add a is loading flag to your state within the fetch method we make sure that if it is currently loading we are not loading again and if it is not loading then we set the is loading flag to true and when we have finished loading then we set the is loading flag to false with this we make sure if the loading takes longer that we only make one request at a time to the server and finally around the list view we wrap a refresh indicator within the refresh method we reset first of all the state and then we load all the data our items again with this you can also pull to refresh to make a server request for loading fresh data [Music]

Channel: HeyFlutter․com

Views: 42,317

Keywords: flutter, flutter http, flutter http get, flutter http get example, flutter http get json, flutter http json, flutter http request, flutter infinite list, flutter infinite listview, flutter infinite listview http, flutter infinite scroll, flutter infinite scroll listview, flutter infinite scrolling listview, flutter infinite scrolling listview http get, flutter pagination, flutter pagination listview, flutter tutorial, infinite scroll flutter, infinite scroll listview flutter

Id: eENDlIgadr4

Length: 3min 30sec (210 seconds)

Published: Mon Mar 14 2022