Original subtitles

In the last section, we started splitting our app into two separate classes in order to refactor it

to be a stateful widget.

I know this stuff is a little bit crazy right now, but just bear with me for a little bit longer after

we covered just a little bit more content.

I'll give you a really good overview on all this stateful stuff and I'll show you the exact steps you

can use to create stateful widgets on your own projects.

For now, I want to cover one last little confusing thing, specifically the syntax we used right here.

So we wrote out this little bit of code at the very end of the section we wrote State the less than

sign, greater than Sine, and then we put our app class in between.

So we're going to flip on over to darte pad very quickly and we're going to write out a little bit of

code to give you a better idea of what's going on with the syntax.

All right, so back inside my browser, I've got a dart pad open right here, so we're going to write

out some code to simulate a very classic game.

A game of putting a square peg into a round hole.

Now, as you might guess, we cannot put a square peg into a round hole.

It just does not fit.

I want to try to create three classes.

I want to make one class to represent the slot right here.

I want to create another class to represent this square peg.

And I want to make a third class to represent a circular peg as well.

All right.

So let's write these out and start, Pat.

And I know this might seem confusing right now, but don't worry.

You'll see where I'm going with this in just a moment.

So back over here, I'll put my main function.

Underneath that, I'll do a class of circle, I'll do a class of square, and I'll do a class of slot.

Now, the slot class might have a method tied to it called something like insert.

Whenever we create an instance of slots, we would probably need to somehow say whether this is a slot

meant for a circle or for a square, because when it comes time to call insert right here, we definitely

would want to annotate the argument type that comes into this method.

So I would really want to be able to write out something like Circle my circle or like Circle Circle

Peg or something like that.

So when I create my slot class instance, I really need to know if this is a slot made for a circle

or if it's a slot made for a square, you might be thinking, well, Stephen, let's make like, you

know, a square slot and a circle slot.

But you know what?

Everything about this slot class between these two shapes would be probably completely identical except

for the circle that or the shape that it accepts.

So in order to solve this problem, darte includes the idea of something called generics, a generic

allows us to write much more, suffice it lack of a better term, a much more generic code that's reuseable

between different types that we might create inside of our application.

So in order to solve this issue of insert meaning to accept either a circle or a square.

I'm going to turn this class into a generic class to do so, I'm going to put that less than sign,

greater than sign like.

So I'm going to put a capital T inside there.

And then down here inside of insert, I'm going to put a T.

Shape, and I'll just leave it like that.

OK, so let's now go up to our main function up here and you'll see where this less than greater sign

comes into play.

So I'm going to first create a slot.

So an instance of slot right here that is meant to accept only circles.

So to do so, I might write out.

Circle slot is new slot, and then here's where it gets interesting, I'm going to put my less than

greater than sign and I'm going to say that I am making a slot class instance that expects to receive

the circle type like so.

So you can almost think of this as being like a type or a function invocation for types, that's almost

what it is.

This is saying create a new instance of -- and anywhere that the class definition down here has a

T substitute the circle type for T.

So now we can imagine that our insert method down here is expecting to receive a shape of type circle,

specifically because we created our slot instance with the circle type right here.

So now I can call circle slot, dot insert and I can try to put a circle in there and there's going

to be no issue with that whatsoever.

But if I instead try to put a square in there, well, now all the sudden everything's going to be complaining.

It says the argument type square because that's what I'm trying to pass in there, cannot be assigned

to parameter type circle.

So when you see these less than greater than signs with a type in between, that's our ability to write.

A generic class in a generic class is all about writing some logic that we want to be reuseable between

different types.

But for all the methods inside of our given class, we want them all to respect that one type.

So that's what's going on over here.

We're saying that we want to create an app state class, it's going to borrow a ton of functionality

from the base class of states inside of that base class.

There's a bunch of methods that are only supposed to work with one specific type.

And so by putting inside of here the app class that we just put together, we're saying we want to create

any copy of that state class that is customized to work specifically with the app type.

OK, so that's what's going on now we're not going to talk too much about, like what the state class

is actually doing internally, everything we just spoke about, about kind of like accepting these different

types.

That's really all we need to know right now about the fact that we're using a generic right here.

So I wanted to do was kind of expound on the syntax.

I don't really want to talk anything about just yet about what the state class is really doing for us.

All right.

So now that we've got a better idea of what's going on right here, we're going to continue in the next

section.

We're going to add in a little bit of state to our project and we're going to get that number to increment

every time we press that button.

And then right after that, we'll do a big review on the stateful widget stuff.

And I'll give you a very clear series of steps that you can go through to create stateful widgets on

your own project.

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