All language subtitles for 013 The Form Widget and FormState_en

In the last section, we started talking about how we can reference a widget that has been created by

creating a global key and kind of pointing that global key at the widget that we are making.

So this global key thing is how we kind of maintain a reference to widget that's been created.

So I think that part we kind of understand I've repeated that phrase like four times now in the last

two minutes.

So we get that idea.

So now we're going to pivot just a little bit and we're going to talk about why using a global key with

specifically a form is going to be just a little bit complicated.

So we're going to pivot and we're going to talk about the form for just a minute.

And we're going to bring back in this idea of the global key.

All right.

So here we go.

So now we're talking about the form itself.

So whenever a user sees this form on the screen and specifically like our form widget and the text field

widgets that are displayed inside of it, we get this kind of flow of interaction that's displayed here

on the right hand side.

So a user focuses this input.

They then type some data in and then this series of action occurs.

So first off, the user types in some data that clearly is changing some data inside of our application,

it is changing the value that is associated with this input right here.

And it appears that any time that data changes.

Our form widget, or perhaps would be better to say the text form field is clearly rendering itself

on the screen with that new data, the new net, new data being the text that the user typed in here.

In other words, when I select this input right here.

And I start typing stuff in I see that data up here within that widget right there.

So clearly whenever I change the data of this little widget, it is re rendering this widget on the

screen of my device.

So now here's my question to you.

Does that process remind you of anything that we've spoken about so far?

So we're clearly saying here that if we change data, it renders our widget on the screen of our device.

So, again, does that remind you of anything that we've been discussing?

Well, it might remind you of how a stateful widget behaves.

Remember, we use a stateful widget when we want to have some data that's going to change over time.

And each time that data changes, we want to render the widget on the screen of the device.

So here is why.

Our global key stuff right here is going to be a little bit complicated with our form widget, it's

complicated because our form widget right here is actually a stateful widget.

The format here, it's actually a stateful widget.

It's not statelets, it's stateful.

And so our widget hierarchy actually looks like this.

This is what's actually going on behind the scenes.

Whenever we create an instance of form, not only are we getting the kind of core form widget that renders

something on the screen to the device, but it's also behind the scenes creating a form St. Instance,

the same kind of class that is created by our login screen state right here, and some kind of mirroring

that in the diagram.

Remember, when we create a stateful widget, we get the kind of widget that represents our widget on

the screen, the device or the class instance that represents our stuff on screen of the device.

This widget right here.

This class gets created and thrown away every time our application is rendered.

But our login screen state over here is persisted to hold all the values that we've assigned to it and

changed over time.

And so the same thing is occurring with our form.

That we've created we've got the core form, which over here that is responsible for showing information

on the screen of the device.

This form gets created and thrown away every time our application renders.

But the actual values that are stored within our form are persisted with in this form state object.

So that's why our situation is a little bit more complicated when it comes to that global key.

We don't want to associate the global key with the form, the information that you and I care about,

like the status of all those input fields and whether or not they are valid is actually stored with

the form state, not the form.

So in summary, what you and I really want to do here, we want to create a global key and we want to

associate that global key with the form state, not the original form.

Now, in practice, when we create this global key and pass it off to the form, we're going to write

code that very clearly passes off that global key to the form.

Like that's what we're going to write.

We're going to create the global key and we're going to pass it off to this form instance right here.

But I'm just telling you all this to let you know what is really going on behind the scenes when we

create that global key and we pass it off to the form in in the end, the global key is actually going

to reference this form state that is created for us.

Now, that might not seem like a super relevant right now, but as soon as we create the global key

and associate with the form, you'll see why it's relevant right away.

OK, so all this stuff I know this is pretty heavy duty stuff.

It's not the easy stuff in the world.

But let's take a pause right here.

We're going to come back the next section.

We're going to make that global key and we're going to associate it with our form and then we'll be

able to reference the form and call different methods that are on it.

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