 Hello guys, in this video I am going to cover EPA call with the help of STV package and provider. So in this video I am going to cover three things. The one is I am going to show you how to call EPA with the help of STV package and along with the provider. Second is I am going to use some stylish loaders. And the third one is I am going to answer this question asked in my videos. So I will show you how you can visible a widget based on a condition. So let's start with the dependencies first. Copy this HTTP dependency which is required. Let's go to an abstract and under dependencies add STP dependency. Go here. We need provider as well. We need this stylish loaders as well. I will show you how we can add it and save it. So this is going to fetch the dependencies. I will just stop it. So let's go here into the folder and just create a couple of folders. The one is for your models. Another one is for providers. So we need to consume this API which we have already used in the previous example of consuming API call with STV package. So let's copy this data. Go to quick type and just paste it and specify the name. Let's give it pets and make your data selected null safety is fine. So we need these. Okay. So everything is fine. We just copy this. Go back here. And just under the models I will create a file pets dot dot and here I will paste my code. So save it. Go back. So now we need to go to main. So we need to wrap this material app into change notifier provider. And here we need to just provide the one function which is going to give us one provider which we have not created yet. And the child would be this material app. Okay. So now we need to create a provider. So let's go to the provider folder and simply specify pets underscore provider dot dot. So here we need to create a provider. So to create a provider simply class pets provider. We need to extend change notifier. And what we need to do here we need some variables. The one is we need API endpoint. That would be so we are taking it from this. So copy this. Paste it here. And since it is static and we just use static const here. Now second we need to identify whether the data is being passed or not. So for that we will be taking one bool variable that is is loading. Initially I will just make it true because I want to fetch it in the beginning. So I just make it by default is loading. And once it is loaded I will just convert it into is is loading falls. Then we need one string for holding errors. So initially I don't have any error. And we need if there is no error I need pets variable for holding the pets. So let's say pets so initially should be empty. So data I will just make empty. Now we need to fetch data from the API. For that I will just create a method get data from API. Since it is getting data from API so just mark it with a sink. So here everything I will cover with try cats so that I can handle exceptions as well. So inside the try I will be doing API call. So for that we have to use HTTP. So for that we can import this HTTP. So just go on the top. If you don't remember you can simply go to this HTTP packet and they have already mentioned how to use it. Just you can copy this. Go back. Paste it here. Now you can use this HTTP dot to get and here you need to use URI. So in order to create a URI just use this URI dot pass method and pass your API endpoint. That's all. Now this gonna give us some value back that would be a response type. So I just copy this. Paste it over here and import this. So this I will I think not be imported like this. So let me just use a weight here and we need to import this. So you can just comment it. Go here and go here and just import this and just do like this. So you can see they have imported this. So now you can uncomment this because it is used for this. So you got your result. Now here you can check something. So you can check for your response. Check for your instead of using future. I'll just make it response. So if the response dot status code you need to check is equal to is equal to 200. Then you need to say everything is fine. So get your data. So we need to keep your data into pets. So directly from the response body we are getting string. So we cannot assign it to pets. So we need to convert it. So for that we have already created the model. So we will be using pets from we have Jason. Yes. So this takes one string and give you the model back. So let's use this and pass this response body to it and all done. If your response code is not okay. Now that is not 200. Then what you have to do simply use else and simply say error is equal to. So you can either use response body as a error or you can simply assign this response code to string. So that you can see. So you can handle it in any ways depending on your functionality. So here inside the catch we will simply use error is equal to e dot to string. So everything is done. So once everything is done what we need to do we simply need to say is loading is equal to false. So my loading has been completed. Just notify this nurse. So that is all your business logic. Okay. So just save it. Go back to main page and simply provide your provider here. Let's say pets provide. So this main has been completed now. So we just left with a home page. So what we need to do here. So here we will be using the provider for support. Let's say final provider is equal to we need to use provider. So let's delete this dot off. So we will be getting context and just go here like this. And you can specify your provider as well. So that is pets provider. Okay. So once you have done this just go inside this body part and here what we need to do is remove this. Here I need to check for my provider dot is loading. If it is loading then you have to simply say get loading UI. So this we will define later on. So we just create some functions over here. So if it is loading we will show loader otherwise we will check is there any error. So we can do what use provider dot error dot is. So if the error is not empty then get error UI. Otherwise there is loading is completed. So there is no error then just get body UI. Okay. So this is what you need to do. If there is error UI you need to pass your error that is provider dot error. And just go here. And if there is no error we need to provide provider dot pets. So that is all for this portion. Now we just left with these things. So let's quickly go here and create the methods. So for loading we just go here and return center and make sure you mention here. Widget as a return type of each method because each of this method gonna return as a widget which we are displaying in the body part. So let's do it here. So here in the center we have to use the child. So here the child would be some stylish loader. So for that you can go here and just go for this pancake and you can choose any of these. So let's use this simple one. So fading circle. So what you can do we can just copy this code here. And then we can choose whatever type of loader you want. So what I'm going to do instead of using this I will use a column so that I can display some text along with this. The first one would be this loader and the second one would be const text. That's a lowly comma here. So here whatever you want you can choose it from here. So let's go with this fading circle. Go back here paste it so you can just import it. And since everything is const let's use const here and remove this from here. So save this. So this is going to cover your UI part the rest we will decorate it later on. So let's go to the error part and here again I need to return the center widget. And then add a child and that would be const. So everything will be const we just use the const here and simply say text here and here we need to display error. So error we are already getting as the argument. So just use that error over here and we can't use const here because variable is being used. And we can just add a little style here. So we have done with this portion as well. Now we're left with the body part. So just go here and simply return list view dot builder. And here we need to add one more argument over here that is item count. So how do you get item counts from pets? We have data variable and from data that is basically added you can get length. So here you can replace this item builder with this arrow function of context and index and simply return a list. Okay. And here we just use the title that is text. And let's say this pets dot data and index dot let's say pet name or username whatever you want you can use. So we just save it. So let's run it and see how it looks. Then we will decorate it. Okay. So it is working. So we just need to do a couple of modifications here. So first of all just change this color to blue and just size we can increment to let's say 80 and just add some style here. You just need main exercise size dot min. That's fine. It will come in the center. That's great. Now we left with. Okay. So now we are not getting any data because we are not calling this. So let's try to call this. I will show you what will happen. So let's go here and try to call this over here with provider. And once you call this, you will see your data is coming. But the problem is that this build will be called again and again and again. So which is not preferred. So what you can do in order to solve it. So we just need here listen false. So if you do this, this will not be able to listen this bit. Let me just reload this. Just clear this. So you can see this is not more listening. This is called and this is no more listening. That's why we are not getting anything from it. So what we need to do in order to solve that, we need to first of all, just convert the stateless widget to stateful. And here we need in it. So inside this in it, we can just cut this portion and take it over here because we need it once only. So once the provider going to call this method, that's fine. And here in this build, we need to keep on listening the value of this provider that is loading. So let's go here and simply use the same provider over here. And instead of using this listen false, we just remove it. That is by default listen to pro. So now you will be able to see that's clear this and restart. So this bird will not be called again and again. This would be called only twice. So let's go to this body part and quickly decorate everything. So here we are using this list style. And this is a title. That's fine. I don't want to use anything else. So let's use leading here for that. I will use circle avatar. And inside which I will be using this radius. Let's give it to 22. And we need background image. That is a network image which is coming from this pets dot data index dot pet image. And you need to use a background color if you want this for decoration. So I'll just make it white. So let's save it. Okay, so images are loaded. Now we just need one more decoration part over here for the trailing. So for trailing what I will do, I will answer this question over here. So I will be adding a condition if the dog is not friendly, then I will display the icon over there. Otherwise, I will not display anything. So let's go here and check for this pets dot data dot is friendly. If the dog is friendly, I don't want to display anything. So for that, I will use this const sized box without any size. Otherwise, if dog is not friendly, then I will display one icon. That icon would be icons dot let's say pets we have. And I just define the color as red because if the dog is not friendly, it would be dangerous. So let's give it a color dot red and add the const. You just save it. So now you can see this icon is loading only where the dog is not friendly. Otherwise, we are not displaying anything. So let's go here with the problems and we just remove this unused import saying that's delete. Save this and everything is fine. Okay, so that is all for this video. If you have any doubt, do comment in the comment section. Otherwise, like share and subscribe. Thank you.