All language subtitles for 011 Updating the AppState Widget_en

In the last section, we wrote a little bit more code into our image method right here, and that really

represents the accumulation of quite a bit of learning that we did in the last few sections.

So we're making the request.

We've got the async Kuwait syntax in there.

We're decoding our JSON and then we're turning that into an actual model instance.

Now that we've got our image model, we need to figure out how we can actually get this thing on the

screen of our device.

The first thing I want to do is remind you that over time we're probably going to end up with multiple

image models.

Remember, every time the user presses this button, we're going to fetch one additional image model

and we want to render out a list of all those on the screen to the user.

So I think that we should create a list instance variable tied to our app state widget right here.

It'll be a list data type.

And every time we create a new image model, we will add it to that list.

We can then figure out how we can create one of these little image looking things right here for every

image model that we have added to our widget.

So to get started.

I'm going to come back over to my app widget and I'm going to create a new variable in here that's going

to be a list that holds records of type image model.

So I will write out list by opening, closing less than greater than signs.

And every element inside of my list is going to be an image model.

And I will call this variable about images and we'll start it off as an empty list like so.

So now inside of each image, every time we create a new image model, I'll do images dot ad.

Image model like so.

So now the images list is going to grow over time.

All right, so that looks pretty good.

Now, Leslie, I want to mention here is that clearly every time that we are adding a new record to

the image model right here, we absolutely expect to see our app state widget try to re render itself

and probably display the new image on the screen.

So that goes back to a topic that we discussed a little bit ago.

Let's go find the diagram for that.

Where is it?

Uh.

Uh.

Here we go.

So we had said that when we were refactoring from a stateless widget to a stateful widget, any time

our widget state classis data changes, we need to call this set state method in order to get our widget

to update.

So right here where we are adding some new information to an instance variable inside of our app state

widget, we clearly want to see this widget render itself on the screen of our device.

So in order to make that happen, I'm going to wrap the images.

Don't add line right here with a call to that set state function.

So I will say set state.

I'm going to pass in a function to this thing and then I'm going to add the images that add statement

inside of their legs, so.

So now whenever we call image.

Make our requests pass that, Jason, add the image to the images list and then inform our outstate

widget that we've just made some change and it needs to re render itself on the screen.

So I think this looks good, maybe the last thing we need to now do is make sure that whenever we built

this widget, we have some widget inside of here.

So inside the build method, that's going to iterate over the list of all the image models we have and

try to display each image on the screen.

So this is going to be an exercise in basic list building.

So let's take a quick pause.

We'll come back to the next section and figure out how to build that list.

So I'll see you in just a minute.