Original subtitles

We've now successfully refactored our app widget over to a stateful widget now ready to move forward

and make sure that any time a user presses on our button, we fetch an image to show on the screen.

We're going to first get started on this process by taking a look at the API that we're going to use

to fetch images from.

So inside my browser, I'm going to navigate to the APIs documentation, which is at JSON Placeholder

DOT Type I code dot com.

So inside my browser, I'm going to navigate over there.

This is what we call a fake JSON API, so it is a bunch of fake data solely out here to give us a better

source of data for testing and prototyping stuff rather quickly.

So all the images that we're going to see working with are just totally fake in nature.

There's nothing special about them.

We can scroll down and get a better idea of how this API works by finding the resources section, so

one of the possible endpoints that is available to us is the photos endpoint.

If you click on photos right here, it'll show you all the different photos that are available over

this API.

So this is an array of objects where every object represents one distinct photo.

Inside this object, you'll see that there is a Eurail property, this Eurail right here.

Is a link to an actual image, so if I copy that link and open it up inside of a new tab, I'll see

the actual image appear on the screen.

There we go.

So very ugly, but it's going to get us started for right now.

Now, as you might have seen just a moment ago, when we're looking at that endpoint, there's a total

of five thousand images that are loaded on this photo's endpoint.

And chances are that when our application boots up, we don't want to immediately fetch five thousand

different records.

So rather than trying to fetch all five thousand in one go, we're going to instead get just one image

at a time.

So to get one image at a time, you'll notice that every image object has a ID property tied to it.

So this is I.D. one, two, three and so on.

To get some very specific image, we can slightly modify the URL that we are visiting so I can try going

to photos one and that will return the JSON data for just image one by itself where I can do image or

photos one thousand and that will give me the photo with ID one thousand like so.

So I think you can kind of get idea of how we're going to approach this.

We're going to say that every time a user presses that button, we're going to increment a little ID

counter by one, will make a HTTP request to fetch this data and then we'll show the world that is reflected

right here on the screen.

So that's the plan.

Now, one thing that you might notice here is that when we get this data back, it is pure JSON data.

So we're definitely going to figure out how to work with JSON data with DART.

So let's take a quick pause right here.

We're going to come back to the next section and we'll take a quick glance at a dart pad program and

get a better idea of how to work with JSON data like this.

So quick break and we'll see you in just a minute.