Hello, in this video, I am going to show you how to pass JSON in the background said of you know, by default it does in a single thread dot application do, but in many cases, no, this model simplifies coding and is fast enough, it does not result in poor performance and structure. And basically, we want to be able to, you know, dude in the background, therefore, we can notice and load up the data really, really fast, you know, to avoid us or you know, for jumping us they get one thing all loading. So first thing you want to do is add the HTTP package, go to the pub spec dot yamo file, and in the dependencies you want to say HTTP and the latest version which you can locate dot Lang Nope, no, that's not what I want. That's not World War Two. So that is not yet pub dartlang.org packages, type in HTTP.

Go to this right here, copy this. Then what you want to do is here to package gets, packages upgrade and attack now go to the main dot foil. Do talk right here. First of all we want to basically import some classes. We want to import package the head to TP dot. And this is going to be as HTTP dot dot HTTP Before we can, you know, refer to anything from here, just HTTP.

And we're gonna say import. And we're going to import dot a synchronous class, and we are going to import dot. Okay, so what we want to do now is create a couple of methods, one for fetching the photos, one for pausing the photos. So the fetch if you watched the video on how to fetch data from the internet, and a lot of this will feel right at home in our future is gonna be missed. All so toes, this is basically the photo is going to be a class. So let's get rid of one of these.

If given an array at the mall, we don't have that class going to creatively fetch photos. You're accepted The parameter HTTP client is going to be client facing. And inside of here we're gonna have a response. And you can put, you know, authorization header that was separate video can be a way to get via HTTPS, colon, forward slash JSON placeholder dot type is calm forward slash photos. And we just need to. And basically we're going to use the built in compute function to essentially pass the photos in a separate, isolate.

And if you want to know more Information about this on the provide the official documentation so you can check all of that. So compute costs. Photos, that's the method that we are going to be creating next response body will give an error for compute. I'm missing a import from imports know the possible not for slash foundation jar. There we go. This error will disappear when you create the method.

And if at all just give them credit class. So let's get rid of this error now. We are going to put next return list and a list of photos. Pause photos spring response body Final news on modified JSON, decode the response body map. It's going to be a key pair value, key value pair, a string for the key and dynamic for the datatype. value.

Cost dot map is gonna return a JSON array of grades. Get photo dot from JSON again, no we don't have the photo class yet, and we don't have this method. So, this method will produce an error which will disappear shortly to just have a look make sure okay this should be paused, this will disappear and create the class that will this as well this Okay, so we are now ready to create the photo classes. So, obviously, depending on the data that you are getting back, you can modify this accordingly. I'm using the JSON placeholder website where we can just you know, get some basic photos. But you can use your own URL working on the album iD iD.

This is given an error because they have not been initialized. We're going to be implementing the constructor very formal title. Finally final URL final Next we are going to create the constructor which will initialize these values. album ID is the ID, title. URL is for now URL Data Factory can be photo dot from JSON which is this right here. So we are moving the error now and we are slowly getting this all come together now.

And inside of here we are instance of this photo class is going to be album. I do It's going to be JSON data for JSON. And this is going to be an integer. Return the ID this JSON. Well, the title is going to be a JSON file, type for JSON URL. See, because I have not done a capital F, find the form now URL is going to be JSON.

We are almost there. I know. I know we've been doing quite a bit of code in this video compared to many Because we are getting from now URL, string. Now all of those should be disappeared. Now at the moment the form will naturally do anything. So if we go down to our application, if we scroll down, we have our class here.

First of all we want to have photos, photos, is going to be equal to just need to initialize it. So for the initialization Sorry, part of the Yeah. So photos Nope, nope, we don't want that there needs to create one more class. Sorry, my bad, my bad we need to create one more class and this is going to be a class of photos less Photos, photo list. stateless widget photo, photos, photos. So the constructor This is going to construct the photos.

And we also need to do super semicolon and then we're going to do at the widget build context. Okay? You don't want to return no We want to get rid of you. Don't feel dumb. If you don't know about GridView or any of this stuff, feel free to check out my other video which I cover all of these layers all these widget types as well. Grid delegates.

Never great delegate with fix. Access count and the actors can come to town with delete, that couldn't be more information that I'd like to reduce to outsiders here. We are going to play an item count. And this is gonna be photos dot length is dynamic item builder. And this is going to be context in there index There we go, Okay, I put a comma where they seem to be in return in the network so you're getting a network you're gonna get a URL and it's going to be photos in the dark from now URL you're getting there we are getting the net here. We can finally, we can instead of sent out we can have a future builder future photo photos.

So what we come into the book and this is the HTTP HTTP client. Sorry, should be photo not photos, made a mistake there. Now we need to implement the builder context nap. So we're gonna say snapshots as their snapshot era. The snapshot photos He needs to pass photos and snapshots. Data otherwise circular progress indicator we've done quite a lot, quite a lot.

So I think we are ready to run this now. So that's what we get. there we go there we go. In case you didn't see that. Let me just hot restart it to reload. take a bit longer than the fetching the data from the internet.

But there we are, we have these images now. That is fine. So obviously there is a lot and you know, the beauty of what we just done right here is you can adapt this the way you No need to you can change the URL Passing photos down, you generally don't really need this anymore. And you can customize this class as you need to whatever information you are returning you. If you don't want photos, it could be, you know, a list of something else. But this is essentially good to be equated to Twitter style application, something that YouTube, something like Facebook, at the end of the day, they all have feeds, they all have you know, dynamic leucon you know, content, whether it's common system or titles.

It's the same. It's essentially the same foundation, the same concept. If you have any questions, though, feel free to drop me a message because I know we covered a lot a whole heap of stuff. And you know, do not hesitate and I look forward to seeing you in the next awesome great circular progress indicator video. Know where that came from. I'll see you soon.