All language subtitles for 007 Handling Password Inputs_en

In the last section, we customize our email field by specifying the keyboard type for it so that the

user can more easily select that at Symbol.

We're not going to move forward onto creating our password field.

The password field is also going to be a text form field, but it's going to have some slightly different

options paths to it.

So to get started, I'm going to expand the password field method and from there we are going to return

a text form field.

And like I just mentioned, a lot of these options are going to be very similar for the password field,

the first property we're going to add on is that decoration to make sure that we specify an appropriate

label text, inappropriate hint as well.

So inside of the text form field, I'm going to add the named property of decoration and I'm going to

give it an input decoration.

I'll give it a label text of how about enter password and then for text, you just do something simple

like password adding in a hint or a placeholder to a password feel doesn't make a lot of sense because

we can't really give our users a hint of what their password is, per say.

But we can at least add something in here to say like, yeah, this really is supposed to be your password.

All right.

So that's enough to get started with.

I don't think that we need to add in a keyboard type because for a password, we don't really care about

presenting that at Symbol quite so prominently.

So no need to add a keyboard type on the text form field for the password field.

Now, to test this out, I'll scroll back up to my build method.

I'll find the password field call that we had commented out and I'm going to uncommented like so.

Then I will flip back over to my terminal.

I'm going to refresh the application with Shifta.

And then I will expect to see a second input appear here on the screen.

All right, so there it is.

So we've now got e-mail address and enter password.

So I can select this thing and then enter and text.

Now, as I'm starting to look at this, it you know, there's something a little bit awkward about it.

Notice how on the first input up here, we have a label of email address and in the second says enter

password, kind of inconsistent with the terminology we're using there.

So just because I'm a little bit nit picky, I think I am going to change the label text on the password

field to be simply password.

Now, the label text in the text are the same, which is also not the best thing in the world.

But, hey, you know, I let's just we don't need to worry that much.

I guess this is good enough for now.

All right.

Now, the other thing that you might be curious about here is that when I try to enter in some text

with the password, it's all displayed with plain text.

But be really nice if we instead saw, like, those little security dots instead so that other people

can't look over our user shoulder and plainly see the password of our user.

So I would really like to make sure that this password input right here is regarded as a password input

element.

To add on that customization, we're going to again look at the documentation for the text form field.

So back at my documentation, I'm going to find the text form field class, you can probably guess where

we're going to go.

I'm going to find my constructor.

So on my constructor right here, we're going to look for a named property of obscure text right here,

so obscure text is a boolean by default.

It is false.

If we pass in obscure text of true instead, then that input will show dots after a user enter some

text in.

So on my password field right here, I'm going to enter in outside of the input decoration.

I'll enter an obscure texts, true, like so.

So now if I save this and do a quick refresh again.

I should now be able to select that password input.

And then when I enter and text.

The first character is displayed as plain text, and that's just a helper so that users understand what

character they just pressed.

But everything else inside there is represented with a single dot, which is definitely what you would

expect for a password input.

So this is how we turn a normal text input field into that kind of password.

Appropriate one.

Now, for the rest of this application, I am not going to use obscure text just because I want to have

you see the text I'm entering in that password field.

It's going to be a little bit relevant later on for you to be able to see the actual text on mentoring.

So I personally, I'm going to remove the setting.

But you are absolutely free to to leave it on there and leave it in as true.

One other thing you could do is just leave it as false, like so little bit.

I don't really have to because like I said, obscure text defaults to be false.

But if you just want to remember how you can obscure the text more easily, you could definitely leave

that note in there.

But again, I'm going to remove it simply because I want you for this cause to be able to see the text

that's in there.

OK, so that's good for a password field.

Let's take a quick break and we'll come back in the next section and put together our Smitt button at

the bottom of the form.