Flutter Pagination Rest API List View (Infinite List)

hello friends amazon from easy approach and in this video we are going to implement infinite list with pagination so the special thing about this video is we are going to do very less amount of code and we are going to avoid a lot of boilerplate code we are not going to customize things or we are not going to reinvent the things or we are not going to do things from the scratch but we are going to use a package which is a smart refresher for implementing the pagination using this package you cannot just implement the pagination you can see when you will reach the very bottom of the page it will automatically hit the api with the next page and will request the next page and it will append the items of the next page into the existing list but also what you can do with this smart refresher is you also can add the feature to pull to refresh like when you have data which can be changed anytime and you want user to explicitly uh refresh the data the latest data the latest snapshot of the data then you can obviously add this ultra refresh thing also so this is what we are going to implement in this video tutorial so before starting this video if you are new to my channel and if you want to learn flutter with the really easy approach then you can subscribe my channel because i have almost over 100 videos on flutter and most of most of them are covering uh the state management which is sometimes really confusing for the beginners and i also have videos on flutter and firebase and some latest videos after the null safety upgrade and flutter so if you want to watch those videos then you can click on the card that's appearing at the top right of the screen so first of all let's talk about the prerequisites that we are going to use in this tutorial obviously if you want to implement the pagination and the infinite list then obviously we need to have a uh we need to have a list of data that we want to show in the list so for for showing the list of the data or for forgetting the list of the data what i'm doing actually uh we have couple of options we can either store some fake data in the json locally in the in the application but since i want to make it as real as possible so that is why what i'm doing i'm using a fake rest api for this purpose and this is actually provided by instant tools so they actually provide bunch of different endpoints and the one in which we are interested is this list of passengers which is the last one and it is basically a get request and it also supports the pagination by supporting the pagination it means that it will give or provide us the meta data of the pagination and we can use it for for showing the current page of uh the data so this is actually the response if i just i just pasted uh this thing in the web url since it doesn't require any header or api key uh the authorization basically so you can directly access this so i've just pasted this url and you can see this is the result obviously this is a bit messy so what i did i use this json format uh formatter to format this or to beautify this code so that we can analyze it properly so basically we have this whole json response so the first thing is the whole object uh the first thing first property that it contains is the total passengers which is the total number of records and then we have the total pages so this is basically uh something that we need to consider also because uh when we will be at the last page then we have to restrict user to fetch a new uh page since uh all the pages are already been fetched so that's the first thing and then inside the data we have the list of uh we have the list of passengers so you can see in each of the passengers data we have id name trips and then the airlines that the procedure is using so what we will do simply will just make a simple list view and then we will show some essential information of the passenger on the list view and we will also implement the pagination stuff now for the api calling uh we can use a couple of things we can either use do or we can use http since we just have to make a single request it's uh easy uh in in that particular case to use http uh package since so it just so we just need to use a single future we don't have to set up the whole client or something so what i'm gonna do initially i'm just gonna copy this and i'm just gonna paste this inside the pub spec dot yaml file so that i can use it for making the api calls so you can just simply paste software capacity icons and then you can click on pub get this would install the package and then you can use it in future now the second thing that you have to do is you have to you have to create models for the json that you will be getting from the fake rest api so you have to write the logic for converting the json into real dart object so what i do normally when i'm working on uh practical applications i normally use json serializable because that's more practical and that's more organized but since uh we are more focusing on this tutorial on the pagination and we are not really focusing on the json parsing specifically so we can go with the with some json uh converter generator basically so this is uh the app.quickdrive.io and i found it really quick to you can just simply paste your json response and it will uh convert or it will generate the logic of converting or for parsing the json into the real.object so what you can do you can simply paste uh this and you can create you can create inside the lib you can create a folder which you can call it model since we are going to store the structure of the the passengers and also the structure of the response and the json parsing techniques so i'm just going to create a model folder and inside it i'm going to have a passenger data you can name it anything you want and then i'm just going to simply paste the whole result into this file and since it's not really updated this quick dot io and since in the in the latest flutter version you have to add the required keyword in in the optional parameters so you have to add the required thing so i can just copy it and there are also some places where you have to paste it that's good and then we have some lost things and also i'm gonna do a little change in this in this model since you can see that the list of data is actually the list of passenger and the type of this is datum however i want to make it more clear so what i'm going to do i'm just going to find it and i'm just going to replace it with passenger so it will make more sense now since it's the list of passengers now we have the data uh we have the data model in in the project uh so we can now make the api calling uh a future so what i'm gonna do i'm gonna go inside the main and i'm gonna just minimize this since we will be only working on this main.file and the initial my homepage i'm gonna just remove this which is the counter thing and i'm just gonna create another stateful widget which i'll be calling home page and you can name it anything you want oh basically let me create this again that's great and i can simply over here just give the reference of this home page also i want to have a simple layout i'm going to use the scaffold as a root widget which we normally uh do and inside it i'm just going to have a app bar and in the app bar you can simply give any title you want and i'm just going to say it infinite list imagination that's great so let me rerun this application also let's get rid of this comment and also the banner stuff so it's uh outside of the team data you can just make it false and it will just disappear the banner from the top now what we have to do we have to write uh the future and actually the logic for fetching uh the current page of the data from the fake api uh server so what i'm gonna do i'm gonna create a future that will return bool either true or false if the case will be like we got the data successfully then we will return true else if we haven't got gotten the data then we will obviously return false so what i'm gonna give it a name we can say it anything so i'm saying it get messenger data and since it's a future it's better to use async we will be using the evade await keyword inside it and because the thing is the list is page page initia paginated actually so we have to use integer a variable for the current page for holding the current page and obviously the current page will be initialized from one now we have to we have to set up the http and by setupping we mean simply first of all let's import the http file http.dart and we can given some alias since it has it contains some future that we are interested in so we are going to make the get request so we can simply say http dot get and over here you you have to specify the uri object so before it let's uh create a uri object which is basically the link uh or the api auth for the for the whole request and then you can say uri.bars and over here inside it you have to specify uh the the end point that you are interested in so we can just go here and then we can just copy and paste that's great so it basically has a couple of uh queries uh parameters the first one is the page that you are currently going to fetch and the second thing is the size of the page so we are not going to change the size of the page however you can update it from 10 to 20 or you can make it dynamic you can take some variable also but what i'm gonna do i'm more interested in this page so i am just going to put the current page over here so that's great and then i can simply just give the reference of this url inside the get request and since this http.get is the future so we can uh store it in to a response object and we have to use await also since it's a future and once we get the response then simply we can just check the status of the response if the status code is 200 obviously it means we have we have made a successful call then in this case we have to write uh the logic for fetching or for parsing uh the json into a real dot object into a list of a passenger of the passengers or you can say into the passenger data that we have created the model and in case we haven't got the the data or we have failed making the successful http request in that case we will simply just say false and ultimately in case of a successful call we can just return true now first of all once we get the successful uh response then obviously we need to we need to have the list of passengers so that we can show it in the list in the list view so what i'm going to do i'm going to create a list of passengers and initially it will be null sorry not null actually it will be empty list and what i'm gonna do inside it simply first of all i will parse the response into uh the passenger data and how i can do it uh it actually provides this generated code actually provides some functions you can use this function uh passenger data from json so it actually takes the string and then it converts it into the passengers data so simply you can say final result equals to a singer data from json and you can simply pause here response dot body so it will it will give you back the result uh as passenger data and then you can simply fetch first of all what you can do simply you can say passengers equals to result dot and inside it we have uh the data which is the list of passengers and once you updated this you can just call set state since uh we are not actually using some other state management uh despite uh apart from the stateful widget so in order to update the ui whenever the data will be changed we have to update this messenger we have to call this state and also since we have successfully patched the first page after getting the forgetting the passengers list or successful response we can simply uh we can simply increment the current page and the next time when we will call this future it will obviously fetch the next page from the data from the on the server so that's the thing you have to do and then if i'm missing something um i don't think so and we can work on the list view appearance so simply what i'm going to do i'm going to use list view dot separator i printed so that we can have a a a nice divider between all of the items and then i'm just going to define the view for for each of the item in the list so you can customize it however you want but i'm just going to give it a simple look so that we can really see it working so what i'm going to do inside it i'm just going to use list style and first of all we have to provide here the item count and will be totally based on the list of the passengers we have at the top so we can just say here list passengers dot length and in the separator builder we can just use context and index and we can just simply return the divider without doing anything fancy and to get the current passenger data you can simply say passenger equals to and you can fetch the current passenger data by using this square bracket and you can just specify the index it will just give you or return you the current currently rendering rendered passenger on the list item so then you can use it inside the list so we can just simply have a title first and you have to specify here the text widget and you can simply just use the name of the passenger for using and then we have the subtitle property that comes after the title so inside this we can just use anything you want so what i'm gonna do i'm gonna use the airline and and the country of the airline and you can customize uh this list as much as you want so what i'm gonna do i'm gonna also use trailing and inside the trailing i'm just gonna use a text widget and we can print some further information like the airline name as trailing so that seems good and what i'm also gonna do i'm also gonna print uh the body uh in this in the response uh in in the successful response block so that we can see that we are really getting uh the data so it will just print the data on the console so that we can see uh what's going on and what data we are actually receiving so so far we just have the list view uh dot separated uh appearance on the screen and we also have uh the functions or the future basically to fetch the current page of the passenger data and we also have the list that we are already utilizing inside the uh inside the list view now we haven't called this future yet so what i'm gonna do uh initially because we will actually change it since we have to implement the pagination also and we are going to use some package that will make pagination really simple and really cool to really implement so but now just for testing i'm just going to call this get messenger data inside the init estate so it will it will call this and it will actually fetch the first page and once uh we have the page we will call the set state and it will then update the ui and initially the passenger uh dot length will be zero because we have initialized uh the list with uh with an empty list so obviously initially it will just show uh nothing but once we get the data successfully then it will update the ui so let's run the application and let's also open the console so that we can see what's going on okay so we we get this exception and in order to fix this exception we have to write some code that i've just copied from the stack overflow so basically this this exception comes because of the some error and the certificate that at the ssl certificate from from the server so in order to quickly fix it because this is the api we are not going to use it and in the production we are just going to use it in development so while for development for testing we can quickly fix it you can just simply copy this error and then you can paste it in on the stack overflow or perhaps you can just paste it on google and you can just click on this stack overflow link well i'm also teaching you the way of finding the the solutions so this is the solution we have to add this thing so just copy this whole code and you just have to paste it in your main.dart file you can paste it anything anywhere you want since it's a class it should be outside of any other class and you have to update you have to import few of the things and this is actually now since it's flutter 2.0 you have to add here since it can be null so you have to add here question mark and you have to add another line which is you have to paste this line inside main dot dart inside the main function actually so you can simply before running the app you can just simply have this and if you refresh this if you restart the application it should not give the same error again but it should rather show the list of all the passengers so you can see now we have the list of all the passengers but you can see this is just a single page this is just the page number one and since we want the the list is already paginated so we want to have the pagination function in this list view and in our app and we want when whenever user will exceed the scroll limit or he just goes up to the bottom then in that case it will automatically hit the api with the next page and it will just add uh the latest page into the existing page into the existing list so let's see how we are going to do this since i don't want to i don't want to make things from the really scratch because we are not going to reinvent the wheel since we have a great and elegant package for this purpose for implementing the pagination and i've been using it for for like two years and it's working really great and it's it's been saving a lot of time of mine uh while development and while implementing the pagination so the package that we are going to use is pull to refresh so we can just simply uh search for pull to refresh and flutter and you can just find it on pub.dev and then you can just copy this line and you just have to paste in in your pubspec.yaml file so you can just paste it after the http and then you can just click on pubched this would install the package and then you can obviously use this package in your flutter application so what i'm gonna do it's it is really simple to implement the pagination using this package the very first thing is you have to wrap your list into a widget that is called smart refresher so that's the first step and then you can see after you wrapped it you will get some exception since it has a required parameter which is a controller of it and you have to specify it so you have to add the controller with this smart refresher so what i'm going to do at the very top i'm just going to create a new refresh controller it is called refresh controller and then you can initialize this refresh controller and it has some things in this if you want to make this uh make it refreshed automatically at the very first or you can say if you want it to automatically load at the first time while the page is loaded then obviously you can make it true and i want you and we have to make it true if you want to automatically call the api otherwise we have to pull down and then it will refresh or it will fetch the first page now we can associate this uh controller with this smart refresher so you can just say refresh controller now with this refresh controller you can do couple of things the first thing is you can implement swipe to refresh and you can also implement the pagination thing which will be like when you will reach the very bottom of the list then it will actually you can pull up and then it will re-fetch or you can say it will fetch the next page so you can do both of the things the swipe to refresh the pull to refresh actually and also uh the pull up to reload or to load the next page and for this purpose for this specific case uh however we we don't want to have the swipe to refresh because or pull to refresh since this data is not changeable it's just dummy and fixed data but in the case like when you are working for a chat application you have a list of data that that can be changed anytime and the new data can be inserted in the existing data then obviously swipe to refresh or pull to refresh will be something to really implement and focused and yeah obviously we are going to implement the pagination but since we are going to uh explore this package so i'm gonna i'm gonna anyways i'm gonna implement both of the things so for first of all i'm just going to implement the uh the pull to refresh thing so for this you have a function that you have to specify which is on refresh so over here you have to specify the white function and since we are going to call the api or future inside it so i'm going to make it on i'm going to use the async keyword with this now what i'm going to do because this on refresh when will only fetch the first page it will not however the value of counter will be the account page will be but in the case of on refresh it will only fetch the first page so what we are going to do in this get passenger data i'm going to have a check which is the boolean variable and i'm gonna just i'm just gonna confirm from uh the caller method that if it is uh for s for for the refresh purpose so initially i'm saying it it's not actually for the refresh purpose but it is it will be working as uh as default nature like for the pagination thing but when we will have this is refresh true then it will just only whatever the value of current page will be but it will just fetch the first page since the uh the ultra refresh mean to just refresh the first page so what we can do we first have to check if is refresh is true so in the case if it is true then we can however or whatever the value of current page uh will be we can just simply say one just update the value to one and it will just automatically because we are using this current page in the api it will just affect the first page however if the value of uh is refresh is false then it will just uh just ignore this and it will just go with the because we have we will be we would have like incremented the counter value the current page value uh before last uh api call in the last api call so it will be automatically uh fetching at the next page uh by default if this will be is refresh will be false so in the case of on refresh we can just simply say final result equals to get a sender data and over here we have to say is refresh true since we just want to fetch the first page and if the result is true then in this case we can call the refresh controller and you can just simply call refresh completed and in case when also since this result this thing will re require a weight because it's a future so let's use future here before the let's use away here before the future name and then in case when we have uh when we haven't gotten the data in any case then in that case we have to say refresh field this you have to you have to make this things because it will affect the ui the uh it will show in case when you the data will not be fetched successfully uh this smart refresher will automatically show that the data is not loaded or something so it will just indicate few things so we have to keep it and this is just for this to pull to refresh thing and we also want to have the the pagination so for the pagination we have to say on loading and we have to specify here the onloading and since we are going to do something similar that we have done in the on refresh we just uh we will just skip this is refresh so we have to use here async but before defining the on refresh sorry before defining the onloading so we we have to make we have to enable the the pull up thing because by default it's false so by default it doesn't support the pagination but if you want to add the pagination you have to make it false uh you have to make it true sorry and once you make it true and then you can simply define the onloading we can just simply paste the code that we have in on refresh and with slight difference we can make it work simply you can just avoid this and since the default value is false you can just remove this all and in case of the loading instead of calling refresh completed you have to call load complete and in case of failing you can just say load fail so that's it and this one another thing uh in case of uh the when we will be working with the pagination we also have to keep uh track of the total pages we will not fetch the page if it will exceed the total number of pages so what i'm gonna do i'm also going to have uh uh the total page thing so i can just say late end since i'll not be sure initially we have to make first api call in order to get this and we will have the total pages okay so once we will make the first api call inside the uh we'll make the first api call and we can simply say the total pages equals to result because we have total pages inside the result and then we can just assign it to the total pages so that simple we have to do and in order to uh make sure that we uh don't exceed the limit or we don't actually fetch uh the the page that's exceeding the total pages uh and this will only happens in case of uh when we have is refresh false because in case of pull to refresh it will just fetch the first page obviously but in case of pagination it will work so in case of when we don't when we are not calling this for is refreshing for refreshing we have to make sure that if the current page is greater than or equals to the total pages then in this case uh what it has to do it has to call the refresh controller and load no data it means there is no more data to fetch and then you can just simply return true so that's what you have to do basically over here you have to say you can either return true or false but it will make things a little bit weird since we if it also it will also if we like if you like return true it will it will not just indicate that there's no data but it will also say uh the data is successfully loaded so for now you can make it false but it it can be managed more elegantly but since we are just recovering the basics so we can really refactoring refactor things so that's it and now we have basically modified the get passenger data future and this is uh the latest result and we we also have to remove for this from the interstate since we i don't require it anymore because we have the initial a refresh true so it will anyways it will automatically call the first update and yeah it seems good it seems great let's run the application you can see the initial by initial by default actually it's trying to fetch a new page and if my internet connection is not broken yeah you can see the page is loaded and if i if i go at the top at the bottom actually it should fetch the new page okay it's fetching the new page but you can see we still have the 10 records although we need to have after the fetching the new page we need to have we should have actually 20 records it's basically in case of uh in case of uh pagination loading which will be not which no which will not be the case when we will be refreshing the page we have to not just update the passengers because over here we are just we are just updating the existing page existing page of the passengers to the uh to the newly fetched page of the passenger however this should only be done in case of refresh but if this is not refreshed we have to not just assign or reassign it but we have to append the new list into the existing list of passengers so rather than saying equals to result.data we will just add result dot data that's great now now let's refresh it you can see that this is the first page and if i go at the bottom so you can see now the the old record the old page is already there and you can see the new records coming at the bottom and if i go again at the bottom then it will again fetch the api so you can see it's how simple it is to implement the infinite list and to implement the pagination stuff using this package and you can also have if i if i go at the top and just uh just do the pull down thing and you can see that it is already uh refreshed and since we have the same data it's not refreshed from the back end so obviously we cannot see any changes but but if the data is changeable it will work like a charm so this is it from this video if you like the video please give a big thumbs up and if you haven't subscribed the channel please subscribe the channel and share the videos with those who want to learn flutter with easy approach so thank you for watching

Channel: Easy Approach

Views: 11,387

Keywords: flutter tutorial, listview pagination, pagination listview, flutter pagination, flutter listview, flutter pagination listview, flutter pagination rest api, flutter pagination api, flutter api, infinite list, infinite list pagination, infinite list view, pull to refresh, smart refresher, Flutter infinite list, Flutter Infinite scroll, flutter infinite listview, Flutter infinite listview HTTP, paginated listview, flutter rest api, flutter riverpod, flutter provider, API

Id: KcRtURq-Ww8

Length: 34min 37sec (2077 seconds)

Published: Sun Jul 04 2021