Consuming REST API in flutter | REST API call in flutter using http package

hello guys so in this video we are going to see how to consume rest apis in letter so for the Simplicity I have already created one response which I have hosted on this URL on GitHub so if you want to customize the response and want to host your custom response on GitHub you can check out my previous video I will add the link in the description so so for the Simplicity what I will do I will create the model of this response so that I can navigate through it very easily so for creating the model of this response I just quickly select this all copy this and I will use a tool that is app.quick type dot IO so this will help me to create a model very quickly so just paste your response specify the name of the class let's say this is users pets model so I just keep it this do select the language that is start and you can make all the properties required and make it final just copy this now go to your project and create a new file with the name users underscore pets dot dot and you can paste this code over here so if you're able to see some error what you need to do you need to just remove this ad so in order to remove all the add symbols in front of required I will use replace option Ctrl H and I just use this required here and replace with required so error is gone let's scroll up and remove unnecessary import save it go back here so what we need to do is just go back to this data and first of all we just create couple of variables to hold the response so let's say to hold the response we need user pets variable that is user pets so initially we don't have data so we cannot declare a variable like this we need to mark it as late as we will be assigning the value later on and then we need a variable to hold whether the data is loaded or not we will have one flag wool is data loaded so this will tell me that I had a response from the AP so initially it would be false and we need one more variable to hold error message in case we are getting some error from the API call so we can have a string type of variable error message is equal to I just initially keep it empty that's all so this part is done next we need to do API call so in order to do so I will create one method get data from API and so this method should be a synchronous call and to Market a synchronous we need to use a sync over here after this parenthesis and we have to return something back so we want to return user pet model here and since this is a sync function so you cannot simply return any data you need to wrap it with a feature okay so now here you can write your code for eBay call and getting the response so first of all I just go here and copy this URL and I just create a URI for the same URI URL is equal to u r i dot parse so here we can give this URL as a string just gonna pass it and return one URI object which we can pass to http done so now next we need to do HTTP call and in order to do so we need a HTTP client so for that we need to add dependency in perspect.eml so here under dependencies you need to add HTTP dependency so what we can do simply go to your browser and type pub.dev and search for the HTTP dependency over here and if you go here you can see http and simply copy this so go to this dependencies under cappuccino I just add it and save it this is going to automatically fetch the dependencies and meanwhile it is fetching the dependencies you can see how we can use it so first of all you need to import it then you can do HTTP call so I just go back here go back to the project and add the import on the top and just scroll down and here we need to do HTTP dot we have different methods like get and post so since this is a simple API endpoint so we will use get over here so in get we need to pass the URL which we have already created and this gonna return us one response back so let's hold this into a response variable and one more thing this is again a synchronous call so we should always await for this call once we will get response back then it will put it into this response variable so now we need to check for this response status code so if this response dot status code is equal to is equal to 200 that is for okay if it is okay then you can just fetch your data and convert it into that user bets model so you can also use like we have a class HTTP status dot okay so you can do this so This Is providing some constants like Okay so this okay is also having the same value 200 so you can use any of these either you can use 200 directly or you can use this HTTP status class so let's come back here so once you've got your response we need to convert it into user pets so we have already created the model for the same that user pets from Json so this model is already having one method from Json which you're gonna take one string as a argument and return you the model back okay so let's use it and pass the response here so what we need whatever response we get we will get in the body part so we will pass that body into this as an argument and this is gonna give us back user pets model okay so that user pets model we can return from this so let's quickly return user.pets this is written over here so second scenario if we are not getting okay status then what we need to do then we need to Simply return some error so for that we have error message is equal to Let's create a custom error message where I will say dollar response dot status code whatever status code and whatever corresponding error message so that we are getting from response dot body so this would be my error message and we again need to return something back so let's return a simple empty user users pets so this data is basically a list so we can simply give it empty list so this part is over EPA College done now what we need to do we need to call this once your pH has been initialized so in order to do so so init State method we need to overwrite and here you can call that method so for the Simplicity what I do I just create one more method that is assign data so this method gonna call this one let's call this one and since it is again a synchronous call and you need to await this so this gonna give us what one user pets back so we will do what we will use this variable and initialize it over here okay let's use user pets is equal to this so since this method is using a weight so we need to mark this method as a sink okay so done with this and one more thing once your data is loaded you have to set just use the set State and specify this data loaded is equal to true and you can simply call this over here so that's all for the logic part so let's go to the UI part now here what we need to do in the body we need to check for is data loaded so if my data is not loaded then do what simply show a progress indicator round round the cost in Center we can add a child and add a circular it's so cooler progress indicator okay so if data is not loaded keep on showing the circular progress indicator otherwise if data is loaded if data is loaded we need to check do we have any error message so we will check again if error message is not empty then do what simply display a text field and saying whatever error vessel it is so again you can wrap this into Center widget and just cut this constant put it over here so in the center we can display the error message which is coming from error matches variable okay so since this is dynamic data you cannot put const okay so this condition is fine if error message is not empty then display the error message otherwise go ahead and grab your data so otherwise we can check for one more condition if the user pets dot we have data that is an array dot is not okay if it is empty then you can simply return one more text and say no data again you can wrap this into Center widget so last condition I will add over here so here you need to display your list view dot Builder so I just complete this list view before that let me wrap this into the center so that it should look nice and we need to take this const outside and let's complete this pader now so here we need to again assign one function which is going to return One widget back so this widget we can create a separate method for the same let's say get my row and we can pass the index and I think all done we have one more property that we need to use here so if you haven't seen my list view video in flutter you can cross check I will add the link in the description so we have to use item count here as well so that count we will be getting from userpets dot data dot length and comma so comma is already there let's create this method which is the last thing we are going to do create this method and this is gonna give us a widget back so let's mention the return type and just quickly return a simple card for each row and for each card we should have a child that is a list but and for let's try we have title and the title we can have a simple text and the data for the same would be let's say user pets dot data and the index we are getting as a argument and Dot you can say username let's save this and try to see if it works so we just restart this in case we are facing any problem so let's see what's problem maybe we need to remove this extra HTML and check so we are facing some problem with this so we need to import this start dot IO not dot dot HTML so that was the mistake let's save it and it is doing what reload and the app is closed let's quickly start it again APK is created so installing and let's see so it should be showing one circular progress indicator over here initially so meanwhile it is doing APA call okay so here you work so once data is loaded you can see the same data is coming over here so we have this this this okay fine so now we left with just decoration part so what I do is I just quickly decorate all the stuff add this comma so instead of doing this text only I will add it into column and I will show here one more text that would be the dog name so in order to show the dog name I'll just cut this and do interpolation that is dog and simply do this and for this username I just add some style that is text Style and I'll just make it bold font wait that is font wait Dot board and we need to add bones since everything is static for the style just save it and you can see this so one more thing I'll add over here we will add a close success alignment to the start so that data should come from the left side now we left with few more things which we can use like for Less style we have trailing and we have leading so for trailing we can simply display one icon so that icon we can display based on some condition so if let's say user pets dot data index Dot is friendly the dog is friendly then we can simply say icons dot pets do we have something pets yep otherwise we will return which icon icon start don't touch kind of thing do underscore not underscore touch yep so let's go ahead and go for the leading one so here I will just simply display a circle Avatar and here we have the background image property where we can pass a network image and here we need to pass the URL of the image which we will be getting from userpets dot data and index dot do we have the that image yes save it so the images are loaded so what I do is I will just add more decoration so what I do if this pet is friendly then I'll just add one more property for the icon so let's say color property if the user part is friendly then you can simply say the color is colors dot green otherwise the color should be red let's start that save this seems better same thing I will go ahead and use for this circular Avatar so we have background color and you can add this condition over here so what we can do we can wrap this circular Avatar we can just give it some radius let's say 20 and we just add this into one more circular Avatar so Circle Avatar and give it radius 21 so I'm going to add some border over here and the background color for the same is condition now you can just restart and see this here the app is restarted and you can see if the dog is friendly then it should be green and you can see the Border here around this circular image so you can scroll up scroll down we have little one more thing I just want to I just did one little mistake we have to change this username so it should be the dog name so let's say do we have dog name so what's the property over there dot pet name yep so save it so that's all for this video if you have any doubt do comment in the comment section I will add the GitHub wrapper Link in the description thank you

Channel: Jatinder Verma

Views: 3,931

Keywords: rest api, consume rest api, rest api in flutter, consume rest api in flutter, working with rest api in flutter, getting data from rest api, get data from api and show in ListView, http, http package in flutter, http in flutter

Id: wUivfAVkZ7M

Length: 21min 22sec (1282 seconds)

Published: Sat Oct 29 2022