All language subtitles for 012 Referencing Widgets with Global Keys_en

In the last section, we started talking about how we're going to somehow get our forum to validate

itself any time the user presses the submit button.

So we're down here on step number three, where we need to first somehow get access to our form widget.

And then after we get access to it, we need to tell it to validate all the text form fields that are

associated with it.

So we're going to first focus on part number one of this.

We need to somehow access the form widget.

This is something that we have not yet done in any of the flutter code that we've written so far.

It's a quick reminder, every time that we've been looking at all these different pieces of documentation

around all these different widgets, we've always been focused solely on the constructor methods.

So we know how to create these widgets.

But once they've been created, we don't actually know how to call any methods or call or reference

any properties that are associated with them.

In other words, we might be able to create a text form field.

But if you then go down to the property section here or the method section, you'll see that there's

a bunch of methods associated with these widgets and we have not yet seen how we can somehow reference

a widget that we have created and then call a method that is associated with it.

So that's what we need to do.

We need to somehow get a reference or a handle to a widget that we create inside one of our build methods.

Now, you might be thinking that this is something really easy.

You might be thinking that.

OK, Stephen, like, yeah, no big deal.

Let's just go find our build method.

And you might guess this is not correct.

This is not how we're going to do it.

But you might be thinking, yeah, we'll just like say, I don't know, make a new variable called form

reference.

We'll make a new form.

Assign it to form reference and then we can just go ahead and like insert that somewhere into our widget

structure here, like maybe right here I want to put my form reference like so.

And then later on we can call form reference, dot, validate children or, you know, whatever method

we want to call on the form itself.

So unfortunately, this is not how we do it.

We do not create a widget and then try to save a reference to it.

The system for getting a reference to a widget is a little bit more complicated.

All right.

So I'm going to undo all that.

We're going to take a look at a diagram that's going to give you a better idea of how we're going to

get a reference to a widget and then call methods or reference properties associated associated with

it later on.

OK, so quick diagram.

Here we go.

All right, so this is our widget hierarchy.

We've got our login screen right here.

I'm going to zoom in on that section.

OK, so on our login screen, we're going to add a new instance variable, that instance variable is

going to be a type of global key.

A global key variable or a variable with type global key gives us a reference to a unique element to

our unique widget that has been created inside of our widget structure.

So you and I are going to create this global key.

Then when we create our form widget, we're going to pass that global key to the form that you and I

create.

Then at some point in the future, after our login screen has been rendered on the screen of our device,

we can then get a reference to the form that was created by making use of this global key.

So the global key variable is how we get a reference to a particular element that has been rendered

to the screen of our device.

Now, that's the that's the easy way of explaining this, OK?

Basically, we want to use a global key.

That's the takeaway.

However, in this particular case, with us using a form widget right here, we were making a foreign

widget and we want to reference that form and tell it to validate all the fields.

Unfortunately, because we're using a form, our situation is going to be just a little bit more complicated.

So let's take a quick pause right here.

We're going to come back to the next section and we're going to expand on this idea of global key a

little bit.

And I'm going to tell you exactly why using a form here with a global key is just a tiny bit more complicated.

But for right now, all you need to understand is that to reference a widget that has been rendered

to the screen of the device we use, we create a kabuki.

That's all I need to know for right now.

It's a quick pause and we'll come back in the next section.