Flutter Infinite Scroll Pagination with Rest API

hello welcome back to simple coder and we are back with a video in this video we will implement the pagination or you can say the infinite scrolling in a reflector application with just few lines of codes so this is our application you can see here we are getting a list of the countries here and we are just showing the first 20 records after that when we go to the bottom of the screen you can see here the loader is loading here and it will load another set of 20 records you can also see here the next page call has been gone here when we go again to the bottom you can see here that loader is loading here it will load another set of 20 records in our application so in this way we can load the data with the help of the pagination or you can say the infrared scrolling so before starting a video if you are new to our Channel subscribe Channel click on the Subscribe button and click the Bell icon to get notified about those latest videos thank you foreign [Music] so in this video we are going to use multiple packages first one is a provider and this will be used for our state management for our designation and all next package we are going to use is that is HTTP and that will be used for calling the rest API then we are using a freeze package and this package will be used for dealing with that model file and all so that we can easily create our model file and also we are going to consume this API this is the IPA which we are going to use in our application you can see here we are getting here message as a success then we are getting a total records 243 then we are getting here data and here we are just passing here page number then we are passing a base size and on the base of that we get the data here so now let's move to our flutter application and from there we will just import the packages so this is our application and here we have Pub specs and here we will just add the packages here we will add here provider and HTTP package here in the dependencies we will add the packages here then we have the tough dependencies and here we will add these packages first one is a build Runner and this will be used for generating the file for the freeze then we have the freeze package here then we have the Json annotation and then we have a Json serializable for creating the class file and all so now we will create one folder here in the name of the folder will be model inside that we will create one file here and we will name the file as a country hyphen model dot dot file here first of all we have to write a freeze as a annotation then we will create your abstract class country model with underscore Dollar Sign Country model here we will create Factory country model and we will pass two variables here first one will be the N type of total records then we have list type of dynamic we will make it as a nullable here data equal to underscore country model okay we will write Factory country model Dot Dot from Json map string Dynamic Json underscore dollar country model from Json and will pass here Json here we will import our freeze package after that we have to write here part country model dot freeze dot dot same we have to 2 for generating file also dot g and this will really do for the adjacency level and all so from now here we will run the command here and here we will write this command flutter pub run build underscore Runner build then we have iPhone iPhone delete hyphen conflicting hyphen outputs so if there will be any conflicting output files it will delete it now from here we will press the enter here so here we have to remove this freeze and now we will regenerate the file here you can see here the two files are generated one is for the phrase and then this is for the Json searchable generator so now our model file is ready so now up we will move further and we will create our ABS service for that we have to create one new folder here and we will name it as a Services Services under it we will create a new file and we will name it as a API underscore service dot dot file and here we will get the class file here class APA service and before that we have to import here import package HTTP http.dot as HTTP here we will get one variable static where client is equal to http dot client then we will get one function here static and this function will be used for generating the data from our rest API and we will show in our flutter application and we will make it as a static and return type will be future and he will write country model and we will make it as a nullable here and we will name it as a get countries here we will pass one variable practice page number and we will make it as a async here then here we will get the request headers we will write here map string comma string request address and we'll pass here content type application slash Json then we will create a query string because we have to pass two variables first one is a page number the second one is a page size and we will copy this one and we'll paste it and we will name it as a query string here we write page and we will pass this variable page number then second variable will be page size and we will write here 20. and we will make the page size as a 20 here that means it will load 20 record per request then here we will write make a variable for URL is equal to you are a DOT HTTP and he will pass the URL and we are using here one two seven dot zero dot zero dot one corn four thousand then we have the end points here we have slash API slash countries here we will pass query string here we can also print this url url and here we will create one variable where response is equal to await client dot get request will pass here URL then we will pass the headers and we'll pass request headers then here we'll check if response dot status code is equal to 200 that means we are getting the data from the server then we will write one variable here where data is equal to Json decode response dot body and from here we will return we have to return a country model and we will write here return country model from Json and we have to pass this Json here it will convert the data into a proper object in the else condition we will return here null so what we are doing here we have created one function that is get countries and we are passing here page number as a variable then we have the request headers here and we are passing a content type as a application Json then we have that query string here and we are passing a page number then we have the page size here after that we are creating one variable for URL and there we are creating here UI dot HTTP and we are doing here HTTP call if our URL is in HTTPS we have to use a DOT https like this one but our URL is in HTTP that's why we are using here and we are passing here URL with that port number because the EPS running on this port number and then we have the end points which is slash AP slash countries then we have a query string here then we have created one variable response is equal to avoid client dot get request and we are passing a URL and we are passing here request header then we are checking here if the status code is 200 that means the request is successfully called we are getting a data here we are just doing the Json decode here with the data response.body then we are returning a countrymodel DOT from Json and we are passing it data here and in this condition we are passing a return null so now let's move further and we will create our provider file so now we will create our provider file and for that we have to go to our folder structure and there we will create a new folder and we will name it as a provider inside that we will create new file that is country underscore page Nation underscore provider dot dot file and here first of all we will write one enum here we will write here enum load more status and we will have three type of Windows first one initial loading stable so initial mean when we launching our application or data that will be in initial stage and when we start doing any API calling and all then we will make the status as a loading here once we get the data we will make it as this table here after that we will create a class country pagination provider with change Notifier now here we will create the model for Country model we will write here lead because we are using a null safety feature in all country model we'll make it as nullable underscore country model then we have country model Cat Country model and we will assign with this country model variable then here we write late list type of dynamic country list then we make the public variable Dynamic and here we'll put the underscore because we have to make this variable as a private variable and here we will write country list underscore continuous we will write a get then we have our load mode status also and we'll write here load more status underscore load more status we will initialize with load more status dot stable here we have get load more status underscore load mode status and here we will write equal to then we will create a Constructor Here country pagination provider so basically this provider file will be used for dealing with our loading the data from the API and showing that data in our UI and there also we are handing the pagination also like when we scroll down to the bottom then we will call again this function so that it will load mode to data inside of 20 data we are loading at a time so here the country pagination provider Constructor and we will write here underscore country model is equal to Country model and we will pass it total records 0 by default we will pass it total record 0 then we have country list is equal to list Dynamic dot empty Global true then we will set our set loading State and before that we have to create that and here we will create one function that is set loading State and bit pass here load more status and we will set here load mode status is equal to this load mode status and we'll call in notify listener and we will set this here in the Constructor and we will pass here load more status dot initial after that we will create one function we will write here fetch country first countries and we'll pass here page number and we will make this function as async here then here we write underscore country model is equal to a weight and we will call here EBS service dot get countries and we'll pass this page number here then after that we will check here if country model underscore country model underscore country model is not equal to null then then here we will check if underscore countrymodel dot data dot is not empty and here we have to put the accelerator science that means we are getting the data from the server then we will add here in the country list dot add-all country model hyphen dot data here we'll put xmatosine dot data dot dot data then we would put your X meter sign again that means whatever the data we are getting we will add that data that means if we getting first 20 record then we will add in the list then we are getting another set of 20 record that also we will add in the same list we are not replacing the existing data but we are just add on some more data over there in this condition we will pass here underscore country list Dot add-all and here will pass empty array and here we will set our status Force set loading state and we'll make this as a stable layer and we call it notify listener so what we did here we have created one country pagination provider file then we have the Constructor here before that we have some variables that is country model then we have country list then we have our load more status variable after that we have one function that is fetch countries and with there we are passing page number and here we have the country model we are just calling our Apes service dot get countries we are passing a page number then we are checking here if the country model is not equal to null that means we are getting a data from the server then here we are just checking whatever the data we are getting there that means this data we are getting but here also we are checking if inside that country model data we have that some data or not like this way like this is our data okay so now if we pass here page number 15 okay so now we are getting this data country model but here in the data inside the country data we are not getting anything but we are getting these variable data that is country model and inside that this is country list here so that's why we have added that check over there and after that we are just calling it continuous Dot add-all and we are just passing the data whatever we are getting from the server and else condition we are calling a continuous dot add all and we are just passing here empty array after that we are just setting the state of the loading as stable that means we get all the records from the server and we are making the loading as a stable here that is no more loading then we are just calling in notify listener so now let's move to the UI product and there we will just indicate this page the national so now we will get the page here for the UI and here we will get a new folder that is pages inside that we will create a new page that is country underscore paste dot dot file and here we will make stateful widget country page in our initialized state we will write here overwrite void initialize state super dot initialize State here we'll call provider off and here we will import provider off and here we'll pass our provider file listen false because we don't have to listen to any updated value and all we have to just call the function here that is fetched countries here we will write Dot fetch countries and he will pass the page number and before that we have to create one variable in type of underscore pH is equal to 1 and we will pass here after that here in the build context we will write here safe area then we have the child there in the child we're using a scaffold widget then we have the app bar we will put here app bar title text visit countries infinite scrolling and we'll make it as a constant here then we have the body here inside the body we are using a single child scroll View and before that we have to create One controller also that would be used for checking up position of our page scrolling position and all here we'll write final scroll controller underscore controller is equal to scroll controller and we will assign here in the controller here in the physics we will write here constant always scroll level scroll physics then we have the child here and here we will write get countries and we will create this function here we will make it as a visit here and we will put inside this class from here we will return consumer visit then we have countries pagination provider here we are the Builder and we write a context model child here we will check if model dot countrylist is not empty and model dot get loading status is not equal to load more dot initial that means we have the data in the country list and also that loading state is not initial then we will show here from here we write return column wizard here we have the children's here and we will write here list View Builder here we have string grab true then we have our physics and we'll put a constant never scrollable physics because we already doing that scrolling and all in our parent single child scroll view visit and for that reason we don't need any scrolling inside our list View here we have the item counts and we will write here model dot countrylist dot length then we have our item Builder here we have context index and from here we will return list tile title okay using a text visit and we will pass a model Dot countrylist and we'll pass here index Dot and here we write name because we have that return type as a dynamic inside that we are getting a name and ID name and code but we have to show here name that's why we are putting a name here outside our condition we will write here return constant Center visit there we have child Circle progress indicator so what we did here we are using a consumer country pagination provider if that country list is not empty and the status is not initial then we are just showing here data here and after that in the else condition we are just showing a circle progress indicator when the data is not loaded now we have to go to our main.dart file and from here we have to remove all the necessary code and from here we have to remove this one also and here we will wrap it with our multi provider multi provider and here in the provider we have to pass the array and here we will write change Notifier provider create text context and we have to write a countries pagination provider and then we have the child here and we have to assign our country page and here also we will change the base to Country base so now first we will run our application to see our API is working or not we are getting the result or not after that we will implement the pagination part over there let's run the application so here we are getting the error because we have to make this as a string we will put a two string now we will reload our application so here you can see we are getting the countries here but you can see here we are getting only 20 countries because we have not added any functionality for pagination till now now we will add functionality for pagination we will go to our country page first of all we have to go to in initialize State and here we will write underscore scroll controller dot add listener and here we will check here if underscore scroll controller dot offset is equal to underscore scroll controller dot position Dot Max scroll extend then we will write here create a variable where pintery pagination model is equal to provider of country pagination provider context listen false then here we will check if country pagination model Dot countrylist dot length is less than pignation model dot country model dot total records here also we will put estimator sign then we will call here countrymodel dot set loading state loadingmodel DOT loading then we will call here fetch countries plus plus underscore page so what it will do it will first check if that offset is equal to Max call extend that means we are bottom of the page then we have created one variable for our page Nation provider and there we are checking if our country list length is less than equal to Total record that means whatever the data we have received till now is less than of total record that means there is a more data in the server than we have to call this one once we receive all the data then we do don't need to call again and again IPS so that's why we are putting a condition and after that we are just putting the status as a loading that means the data is loading then we are calling in Fetch countries and then we are just increment the page number with plus plus that means increment by one also here we can show the loader also we can put here visibility Wizard and we will write here visible model dot get loading status is equal to load more status dot loading there we have that child there and here we will get a container padding we are using a constant Edge instead Dot all five then we have height 35 width 35 child we are using here constant Circle progress indicator so what it will do when we have the status loading then it will show the loader here in the bottom of the list but we are loading a data in a verb you can say in a local API so that way it will not show any loading effect because the data is loading very fast first just for showing that loader and all in our testing we will just put here a delay of around three or five second here we will wrap this function and we'll put here future dot delete duration seconds five and we will make this function as async here and we will wrap all this function inside here so this is only for the demo purpose because we have to show the load in the demo that's why we are doing but it is not necessary in our production application so now we will reload our application see the load is working or not also we will open the console layer so here you can see the first API call is gone that is page number one with the page size 20 so now we will go to the bottom you can see here this load is loading here and after that you can see here page number two and we get more data here because we did two or three times that's why it's did one more call here in the API so here you can see one more coal is gone and we are getting more data here you can see here so we get till now is page number nine so we'll go again paste 10 page number 11 then we have our page number 13 that is please loss now you can see here last page is 14 because we get this result so now if we go again to the bottom you can see there is no more API request going because we already get all the data from the server so now it will not do any more APA calls because we already get the data and also that is not recommended to again and again calling the aps if there is no data over there so that's all in this video I hope you liked video and you understand how we can Implement a pagination or you can say the infinite scrolling number of flutter application if you like the video don't forget to subscribe the channel like comment share I will come back soon with another awesome video thank you for watching the video

Channel: Snippet Coder

Views: 3,705

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter widgets, flutter infinite scroll pagination, flutter infinite scrolling pagination for listview, flutter pagination rest api list view, flutter infinite scrolling listview, flutter pagination

Id: dMIp8dDR8dM

Length: 26min 2sec (1562 seconds)

Published: Tue Feb 28 2023