All language subtitles for 006 More Refactoring to Stateful Widgets_en

In the last section, we started the refactoring process to turn our stateless app widget into a stateful

widget instead is a quick reminder.

We're going through this entire process right now because our app widget is going to have a counter

variable associated with it.

That counter variable is going to change over time.

And any time it changes, we want to update the representation of that widget on the screen of our device.

So because we have data that's going to change over time and updating that data should be reflected

on the screen of our device, we have to use a stateful widget.

And we just accomplished step number one of that refactor, we're now going to move on to step number

two, where we're going to add a create state method to the widget class.

Whenever we call create state, it's going to return an instance of the Wichita State to class.

So here is the widget class, this is the widget state class.

On the widget class, I'm going to add a method called to create state.

And from this thing, any time someone calls this, I will return an instance of our Wichita State or

we are referred referring to it as the state class.

All right, so that's it for step number two.

Now, again, I know these steps are pretty confusing and they probably seem a little bit arbitrary.

Once we get through all these steps, we will have a discussion on why we have to do all these crazy

things in here.

Let's just keep going for right now and get our code on the screen.

So the next thing we have to do is add a build method to the Wichita State class, so this is the widget

state class right here.

And as you can see, we already have our build method on here are build method is returning all the

widgets that our widget is going to show on the screen.

So no work required for step number three right here, I just included it on this list to be complete.

On to step number four, so now we're going to add some instance variables to the Wichita State class

and these instant's variables are going to represent the data that we're going to have that's going

to change over time.

So on my Wichita State class right here, I'm going to add on an instance variable that I'll call counter.

I'll make it an integer and it's going to start off as the number zero.

So this is the instance variable that's going to change over time.

Every time a user presses that blue button on the bottom right hand side, we're going to attempt to

increment the value of this counter variable by one.

And every time a user presses the button, we're also going to try to reflect the new counter value

on the screen of our device.

All right, so that's duck number four and finally on to step number five.

So step number five right here is going to kind of have two steps associated with it on its own, so

the first thing we need to do is make sure that we are changing that Wichita State's data.

So that would be the instance variable that we just created.

So let's take care of that first.

Let's think about where we need to increment that counter variable.

Well, we want to make sure any time someone presses the floating action button right here, we increment

the counter variable.

If you recall, when we created the floating action button, we created this on prest property and assigned

a function to it.

We then saw that any time user press this button, this function would be invoked, and so it seems

to me like this would be the perfect place to take that counter variable in, increment it by one.

So inside of the unpressed function I'll add on counter plus equals one like so.

It's now every time we press the button, boom, counter incremented, so we now have some data that

is changing over the life cycle of our application.

Now on to step number two of this step, number five, I guess part two of step number five.

So now we've changed our class data.

We now need to call the set state method.

So the set state method is provided to our state class when we extend the state based class.

So there is a method inside of the state thing right here called Set State, and you and I are required

to call it any time our data changes.

And we want to get this component to update on the screen of our device.

So right underneath the counter increment, I'm going to call set state.

Like, so now you'll notice that I get the red squiggly right here when we call that state, we are

actually required to pass in a function.

That's what this means right here.

So we have to pass a function into set state.

And inside of that function is where you and I are supposed to do our data modification.

So right now, we just put down some code to increment counter outside of set state.

This is not 100 percent correct.

We're supposed to modify our instance variable inside of the function that we pass to set state.

So let's do that refactor right now.

I'm going to add in a function right here.

Come on.

There we go, one up, one more.

There we go.

And I'm going to make sure that I mutate or change my instance variable inside of set state like so.

OK, so that's it.

That is the entire refactor, we now have a stateful widget called App that depends upon the widget

state of App State.

Any time a user presses on our floating action button right here, we're going to increment the value

of the counter variable.

Now, that's it for the refactored in terms of turning a state list widget into a stateful widget,

but to actually get our application working the way we expect, there's one last little thing we have

to do.

We have to make sure that the counter actually gets displayed somewhere within our widget.

So right now we are yep, we're incrementing the value of counter, but we never actually show it on

the screen of our device.

So to get it to show up on the screen, we're going to add one additional property to our scaffold,

which is right here, and we're going to make sure that that additional property gets our counter to

show up on the device.

Let's take a quick glance at the scaffold documentation to see you get a good idea of where this is

going to come from.

So back at my.

Widget documentation.

Let me get this up here.

I'm going to do a search on the top right hand side for scaffold again.

And then down for the constructor of scaffolded, you'll notice that there's the body property right

here.

So if we pass a widget to the body property of Scaffold, the scaffold will show that on the body of

the screen.

So basically that counter variable will show up right here, which is exactly what we want.

Back over inside of my scaffolded widget, I'll add on the body property and I'll have this be some

text that's going to interpolate the counter variable in like.

So the text widget right here always expects to be called with a string.

So that's why we are taking the counter variable and shoving it into the string counter itself as an

integer.

And the text widget does not want to see an integer, it wants to see a string.

So we're just doing a quick kind of conversion right here of that integer into a string.

So I'll now save this, we'll flip back over to our terminal, I'll do a full reload with shifta.

And it will test this out on our device.

All right, so it's going to take I don't know, it's always takes me like there we go.

Ten seconds.

That's pretty quick.

All right.

So it's really, really small, but you might be able to see there is, in fact, a zero right there.

So now I'm going to press my button.

And when I do so, you'll notice at that counter is incrementing successfully.

So it's going up to 10, 11, 12, 13, 14, 15.

You get the idea.

OK, so it looks like we definitely have the ability to create some data that's going to change over

time inside of our application.

But it absolutely involved a lot of very strange code.

So let's take a quick pause right here.

We're going to come back to the next section and we're going to talk about one little bit of weird syntax,

specifically this state, less than greater than app thing right here.

And we'll do a quick overview on why we had to write all this complicated code to make a stateful widget.

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