 Hello guys, so in this video we are going to see how to consume REST APIs in Flutter. 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 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.quicktype.io. 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 user's pets model. So I just keep it this, do select the language that is dot 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. So if you are able to see some error, what you need to do, you need to just remove this add. So in order to remove all the add symbols in front of required, I will use replace option control 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 response, we need user pets variable, that is user pets. So initially, we don't have data, 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 rule is data loaded. This will tell me that I got a response from the app. So initially it would be false. And we need one more variable to hold our message. In case we are getting some error from the API call, 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. Set data from API. And so this method should be asynchronous call. And to market asynchronous, we need to use async 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 our sync function, so you cannot simply return any data, you need to wrap it with a feature. So now here you can write your code for API 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 URI dot parse. So here we can give this URL as a string. It's going to parse it and return one URI object, which we can parse to STTP. So now next we need to do STTP call. And in order to do so, we need a STTP client. So for that, we need to add dependency in pubslet dot eml. So here under dependencies, you need to add STTP dependency. What we can do is simply go to your browser and type pub dot depth and search for the STTP dependency over here. And if you go here, you can see STTP and simply copy this. So go to this dependencies under corporate, you know, 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 STTP call. So I'll just go back here, go back to the project and add the import on the top and just go down. And here we need to do STTP 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 parse 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 the 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. And that is for okay, if it is okay, then you can just fetch your data and convert it into that user pets model. So you can also use like we have a class STTP 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 STTP status class. So let's come back here. So once you 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 Jason. So this model is already having one method from Jason, which you're going to take one string as a argument and return user 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 a argument. And this is going to 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 return 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 $response.status code. Whatever status code and whatever corresponding error message. So that we are getting from response.body. So this would be my error message. And we again need to return something back. So let's return a simple empty user user's pets. So this data is basically a list. So we can simply give it empty list. So this part is over. API call is done. Now what we need to do, we need to call this once your page has been initialized. So in order to do so, so in its state method, we need to override. And here you can call that method. So for the simplicity what I do, I just create one more method. That is assigned data. So this method gonna call this one, let's call this one. And since it is again asynchronous 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 await. So we need to mark this method as a sync. 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 is 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. Of course, in center, we can add a child and add a circular. It's circular 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 message it is. So again, you can wrap this into center widget and just cut this course and put it over here. So in the center, we can display the error message, which is coming from error message 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. Need to take this course outside and let's complete this better 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 pause 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 inflator, 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 user pets 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 going to 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. And for list trial, 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 stream and check. So we are facing some problem with this. So we need to import this dot dot IO not dot dot html. So that was the mistake. Let's save it and it is doing what reload in the app is closed. Let's quickly start it again. It becomes creative. So installing and let's see. So it should be showing one circular progress indicator over here initially. So meanwhile it is doing a pay call. Okay. So here you go. 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 this stuff at 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 user name, I just add some style that is text style. And I just make it bold font weight. That is font weight dot bold. 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 will add over here. We will add a cross alignment to the start so that data should come from the left side. Now we left with a few more things which we can use. Like for list 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. I can 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 user pets dot data and index dot do we have that pet 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 pet is friendly then you can simply say the color is color start green. Otherwise the color should be red. Let's start red. 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. So 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.