Original subtitles

In the last section, we got our text fields to appear on the screen right here and we've got our label

and the text displayed on there as well.

Now, there's one little odd thing that I want to point out about our current input.

Notice how we are expecting user to enter and email here.

So presumably they need to enter in some text at example, dotcom.

However, the keyboard that we have right here.

Well, we can easily add in text, but if a user wants to add in that at Simbel, they have to click

on the simple indicator right here and then click on ADD.

And that's kind of a pain in the rear for our users.

You and I know that a user is going to have to enter in the at symbol here.

So we're really just making life more complicated for our users by forcing them to press the button

and then select the symbol.

So to get around that, we can actually customize the way that the keyboard down here gets displayed

to our user.

I'm going to flip back over to the documentation for the text form field class or then go down to the

constructor.

So here's our constructor and I'm going to look for a property called let's just do a search for it

and we go keyboard type right here.

So the keyboard type property allows us to customize how that keyboard appears at the bottom of the

screen.

And we can kind of customize the keyboard that gets shown to more easily assist users in entering,

say, an email address.

So I can look at the text input type right here.

I'll click on that and look at its documentation.

Then inside of here, I'm going to scroll on down to the very bottom.

And find the constants section.

So these constants right here are constant keyboard types that specify exactly how the keyboard is displayed

on the screen.

You can pretty much read the text and I think you'll very quickly get a good idea of what these are

used for.

So if we want to show a keyboard that optimizes the display for email addresses, well, we're going

to use this email address constant right here.

So essentially, all we really have to do here is find our text form fields and into the constructor,

we're going to add in keyboard type.

And for the keyboard type, I'm going to specify a text input type.

I'm going to reference that email address thing like so.

Now, notice how we are referencing a constant value on a class here so we do not have to create an

instance of the class first, we can just freely say here's the class we're looking at and I want to

access this class property on the class.

So just text input type DOT email address.

So if we know, save this and refresh our emulator again.

When we focus our input here any second, there we go.

You'll notice that now our keyboard has changed slightly.

So now, right next to the space, we've got the symbol, which just makes it a little bit easier for

our users to add in the symbol and then continuing to type in the rest of the email address without

having to access that symbol menu.

OK, so just a little bit of an improvement, but it's something that makes our users lives a lot better.

So now that we've improved our keyboard type, let's continue customizing our text form field in the

next section.