All language subtitles for 005 Adding an Image Model_en

In the last section, we finished up a quick aside on how we can work with Jason Data, we created that

image model class we placed down here at the bottom of our dart at code.

We're now going to flip back over to our code editor and we're going to make a new file that's going

to house a image model class that we're going to create for our project once we get that class fit together,

will then make our actual API request over to that Jason type code, fake API endpoint.

We'll get our image lifescience the image model and we can figure out how to show it on the screen.

So I'm going to get started by flipping back over to my code editor.

I'm going to make a new file inside of a new folder that I'm gonna place inside of my SIRC directory.

So inside of SC, I'm going to make a new folder called Models, and then inside there I'll make a new

file called Image Underscore Model Dot Dart.

So now inside of here, we're going to basically write out this same code we just saw over on dart pad,

so I'll do class image model.

It's going to have an ID that's going to be an integer type, I'll give it a string of Eurail in a string

of title as well.

Now, remember, I'm not making these property names up right here.

These are the exact property names that are coming from the JSON that represents one of our images from

that fake API.

So here's it right here.

It's always going to be an integer.

We have the title of the image, which is a string, and we have the URL, which is a string as well.

We could store the thumbnail, you, Earl, and album ID properties, but they're really just not relevant

to what we're doing at all, so we're just going to completely ignore those other properties.

So then inside of here, we'll first set up our constructor with the same name as the class, so I'll

say image model and I will accept this ID, this DOT URL and this DOT title like so.

So we now have the ability to create a new image model instance by directly supplying an ID, a neutral

in a title.

We're going to also add on our named constructor that will call from Jason.

So we have the ability to create an image model instance, either by using this constructor or from

JSON, so we're going to receive an argument into this named constructor right here that we'll call

past Jason.

And then from that pass, Jason, we will update the ID you and title properties, so I will say ID

equals past Jason ID.

I'll tell you, Earl of past, Jason Yoro.

And I'll do title of past, Jason.

Title look like so.

OK, so that is pretty much it.

Now, there's one quick thing I want to mention here.

When you go and look at documentation around model classes like this that are meant to intercept Jason

or take Jason data, you might see that the pass Jason argument right here to our name constructor will

be annotated with a type.

So technically, when we pass some Jason with that Jason Dot Decode function, the type that we get

back is a map with type string and type dynamic.

Like, so.

So this is saying that you can call our name constructor from JSON with a map data structure and remember,

maps are like JavaScript objects, Ruby hashes maps in Java or similar.

This is saying that we have a map with keys that are strings and values that are dynamic.

So we don't really know what their values are.

So when you look at documentation, you'll sometimes see this type annotation right here.

And it's definitely worth putting on.

One of the quick note that to throw out there is that we used a kind of long form constructor right

here.

We can technically write a little bit more abbreviated structure for this name constructor.

I'll show it to you very quickly.

I do encourage you to use the longer form just because it's a lot more clear what's going on.

But I'll show you the shortened form just in case you're curious, because you will sometimes see it

in documentation.

All right.

So I encourage you to not write this code out.

I'm just going to very quickly write it out for you so we could have alternatively.

Put down a colon and then wrote out it could put down a colon after the closing parentheses over here,

and then we could have removed all these semicolons and instead put a comma after each one, a semicolon

after the very last one, and then remove that semicolon.

So then if I save this file.

Yeah, there we go.

So what you see right here and right here, totally identical syntax.

Both work just fine.

But personally, I think this is just way more clear.

It's still like the same number of characters, right?

It's the same amount of space.

But in this case, you don't have to worry about like comma, comma, semicolon, and you don't have

to worry about the colon as well.

So the syntax I showed you, I think is really clear and very obvious.

You're going to see the syntax in some documentation, but I think it's just a little bit harder to

wrap your head around.

All right.

So I am going to delete that alternate approach.

OK, so that's it, we've got our image model put together.

Let's take a quick pause right here.

Come back to the next section and we're going to figure out how to make our API request.

That's going to get some Jason data that we're going to load up into our image model.

So I'll see you in just a minute.