Original subtitles

We've now got to appear at the top of our screen, we've got our floating button down at the bottom,

right.

And I think we're making a little bit of progress.

As a quick reminder, the overall goal of our application is to make sure that every time a user presses

the button right here, we show one additional image on the screen.

So if the user presses a button ten times, I want to show 10 images.

Now as we try to build out this application, if we just by line trying to get those images on the screen,

we're going to have to write out a lot of confusing code very quickly.

So I want to take a little bit more incremental approach.

So to get a little bit more incremental approach in building this application, we're going to set ourselves

a little bit easier, more immediate goal.

I want to add in a little piece of text on our screen for right now.

So I want to add like a piece of text right there by default.

I want it to say zero images.

And then every time a user clicks on the button right here, I want to increment this text to stay like

one images, two, three, four, five and so on.

So rather than showing an actual image, we're just going to have a little bit of text that increments

every time the user presses that button.

I know that sounds like it might be a bit boring, but in reality, this little piece of text right

here is very similar to what we're actually trying to do.

Remember, every time we press the button, I want to show an additional image.

So having a little counter is actually not that far off from what we're trying to accomplish.

OK, so let's talk about how we're going to achieve this, because it's actually going to be a little

bit more complicated than you might think.

So I want to first give you a quick reminder on some of the differences between stateless widgets and

stateful widgets.

Now, we looked at this diagram previously, but I changed the text at the bottom just a little bit.

Right now, our app widget is a stateless widget.

That means that it has no instance variables that are going to change over time.

And that's absolutely true of our app widget as it stands right now.

But if we go back to our mockup right over here, clearly as we're pressing on that button, we're going

to need to have some counter variable that's going to change over time.

And I think that is probably going to make sense to tie that counter variable to our app widget.

So because we want to have a piece of information tied to a widget that's going to change over time,

and we want those changes to be reflected on the screen of our device.

We're going to have to refactor our app widget into a stateful widget instead.

So this entire process that we're about to embark upon is going to be refactoring our stateless widget

to be a stateful widget instead.

Now, you might be thinking, OK, Stephen, you know, whatever, that sounds good, let's go back

over to our app components, App Widget right here, and we'll just change stateless widget right here

to stateful.

Well, unfortunately, no, that doesn't quite work out.

So this right here, not quite how we do that refactor.

It's a much more involved process that's going to involve a couple of different steps.

So I want to first tell you about exactly what we're going to do.

Then we're going to do it and we'll talk about what we did.

So we're going to really cover this from all angles.

All right.

So here's the plan.

In this section and the next one, we're going to first get started by doing a refactor of that app

widget into a stateful widget, right after that, we're going to have a quick discussion on a weird

bit of syntax that we're going to see while we are doing that refactor.

And then immediately after that, we'll talk about why these stateful widgets are so much more complicated

to write than stateless ones.

All right.

That's the plan for the next couple of sections.

So let's get started right now with that refactor.

All right, so here's the guide, here's what we need to do, so a couple of different steps in here.

We're going to first get started by breaking our widget, the app widget that we already put together

that class into two separate classes.

We're going to refer to one as the widget itself and then the second class.

And we're going to add in we're going to refer to as the widgets state.

The Wichita State right here is going to be a class that contains the data that we want to wrap up inside

of our widget.

So in our case, it's probably going to be like an integer of some sort that counts the number of times

that user has pressed that button.

So we'll start with this step right here first and we'll move on to the next one in just a moment.

So I'm going to flip back over to my code editor, here's my dirt file with my App Widget, I'm going

to first get started by creating a second class inside of here, right above the existing one.

I'm going to call this class app and it's going to extend stateful widget.

I'll then find the existing app, which we had put together, and I'm going to change the name of this

one from simply app to app state like so.

And then I'm going to change extend statelets, which is right here to something else, and this is

where that weird bit of syntax I just mentioned is going to come into play.

So we're going to write out state.

I'm going to put a less than sign greater than sine.

And then in between those, I'll write out app like so.

OK, so that's step one of our refactor now, like I just said in that diagram two seconds ago, this

is that weird syntax right here.

We're going to have an entire lecture to talk about what exactly is going on right here.

So we will cover this in just a little bit.

But right now, we'll just leave it as is.

All right, so at this point, we have now covered our step one right here of our multi-step process

of refactoring a stateless widget into a stateful widget.

So let's take a quick pause right now.

We'll come back to the next section and we'll move on to step two.