Original subtitles

In the last section, we added on our form tag right here, and we gave it a child of a column and the

column is going to show some number of children inside of it.

Remember, the column is here just to layout which widgets on the screen.

That's the sole purpose of the column, which is now inside this children array.

We can create AR to form text fields and our raised button as well.

Now, we could definitely add in all these widgets directly to the Children Arae or Children List right

here, we could do something like Raised Button and then pass an ton of configuration to this thing.

But that's going to make this children list right here be very hard to read if we try to stick in a

lot of stuff on there.

So rather than adding in every one of these child widgets directly to children, I'm going to instead

make a couple of helper methods inside of our login screen state class.

And each of these helper methods are going to produce either the text form field for the email, the

text form field for the password, or the raised button for the submit button.

So inside of my class, I'm going to go down to the very bottom while still inside of the final closing

bracket for the class, and I'm going to add in three helper methods.

The first one I'm going to call email field.

I'll call the second one password Fields.

And then finally, I will also add in submit button, so again, the idea here is that each of these

helper methods are going to create the respective fields or the button and then simply return them.

So all we're doing here is keeping this build method a little bit easier to read by not sticking this

huge kind of pyramid of doom of all these nested widgets inside of your.

So now as the in the child children list right here, I'm going to call email field.

For the first argument, first element inside their excuse me, then I'll put down my password fields

and then finally the submit button as well.

OK, so now each of these can return a widget themselves and we get to put all the logic tied to them

into these separate methods, let's make sure that we mark each of these methods with a return type

as well.

Just so it's really clear that, yeah, the email field is going to return a widget that can be shown

on the screen.

So I'm going to mark this as a widget, a widget and a widget as well.

OK, so that's good progress now we'll get started immediately with our email field for this.

I'm going to very quickly bring up the documentation for a text form field and we'll get a better idea

of how they work.

So back inside of my browser, remember, we can access our documentation by going to flutter IO slash

widgets.

And that will open up the widget catalog.

So inside of here, we can either try to hunt and peck inside of all these lists or we can just do a

search from the top right hand.

And so I want to just directly look up that text form field, which it.

And then we're looking for the text form field class right here.

All right, so if you want to, you could certainly take a quick glance at the documentation text here,

you'll notice that it says in the first couple of paragraphs something about we have a form widget.

It makes it really easy to save, reset or validate multiple fields at once.

So that's what we're trying to do.

We are trying to use a form widget to manage the email input and the password input as well.

So, as usual, we're going to go down to this things constructor and we'll get a better idea of what

we can pass to it.

So here's our text from field and all the different properties so we can pass to the constructor.

And let's give me a couple of ones that you and I are going to really care about.

I'm going to point them out as I can kind of find them in here.

So the first one that we're going to really care about is input decoration propre here.

So input decoration is how we're going to specify a label to be displayed above the actual input.

So remember, as I mentioned earlier, when we saw a text form field, it encapsulates not just the

input itself, but also the label that is shown above it and.

Any validation text that gets displayed underneath it as well, so by just showing a text form fields,

we get all three of these things for free automatically.

In order to specify the label that we want to be have shown above, we're going to use that decoration

right here.

So this named property of decoration, let's add this on first and get a better idea of just how to

add in a text input or a label above the text input.

OK, so back over here, we're going to start first with the email field, so I'm going to return a

text form fields.

And for right now, the only named property that I want to pass in here is that decoration thing.

So decoration is supposed to be of type input decoration, so let's look at the documentation on that

very quickly.

All right, so here's the input decoration class, this is what we use to customize the borders, labels

and all other stuff around text fields so you can kind of think of input decoration class as modifying

the way that these input fields appear on the screen of the device.

If we go down a little bit.

As usual, we'll look at our constructor right here.

So a couple of the properties that you and I really care about are things like labeled text.

So that's going to specify the label that's gets shown above the actual input.

And then there's also something on here called hint text as well.

The hint text right here you can kind of think of as being like a placeholder of sorts.

So kind of some temporary value that will appear to be in the input to kind of guide the user and give

them a better idea of what type of input they're supposed to add.

So let's try creating a new input decoration and specifying the label text and the text as well.

All right, back over here.

Here's the declaration I'm going to make a input.

Decoration.

Don't forget to get the comma at the end there, and then we're going to specify a what a label text

first.

So the label that I want to show on the screen.

Something like email?

Yeah, we probably do a little bit better than that, let's do something like email.

Address.

And then as the hint text and again, that's kind of like our placeholder, I'll enter something like

you at example, Dotcom.

So again, this is just going to guide our user and make it obvious that, oh, yeah, I'm supposed

to do like my email name at domain dot com or wherever my email address might be hosted at.

Guess let's save this and we're going to test it out in our simulator before we test it out.

You'll notice that whenever we call password fields right now and submit button, they are not currently

returning any widget whatsoever.

So if we ran this code as is, we would probably see an error message complaining that password field

and submit button are not returning anything.

So to make sure that we don't call those methods, I'm going to go back up to where we added them to

this children property on the column.

And I'm just going to very temporarily comment those two out.

So as soon as we implement both his methods, we will uncomfort them, but for right now, only email

field has functionally tied to it.

OK, so now I will.

Get my terminal, terminal and simulator back up, I'll do my hard refresh.

Let's shift our.

And awesome.

All right, so here is our default material, TextField Widget.

You'll notice at the top we have our label text of email address.

We get the line to indicate that, hey, this is some place where you can type.

I can click in here.

And when I do, you'll see that placeholder type text or what's referred to as the text appear.

So it says you at example dot com.

And again, this is just intended to kind of guide our users and help them understand what they're supposed

to enter in here.

So now I can start to type in.

Whatever my input might be.

All right, so that made some progress, we got our input on the screen and we got a label on there

as well.

So let's take a quick pause and we'll come back in the next section.