All language subtitles for 003 Creating the Login Screen_en

In the last section, we got started working on our new login form application, so this iteration of

this application is going to use those classic stateful widgets to somehow manage the form state and

make sure that a user enters a reliable email and password.

We just created the main file and the dart file.

We're going to very quickly start to create a couple of other widgets inside of our application.

And I want to give you a quick preview of exactly what we're going to be doing.

So I put together a diagram that shows all the different widgets that we're going to have to work with.

Now, you'll notice that in this hierarchy at tree, right here at the very top, we have the app,

which is what we just created.

And we've got one other blue square in here, which is this login screen widget.

So the two blue things that you see inside of here are widgets that you and I are going to create.

Every other widget is going to be a part of the flutter standard library.

So as you can see here, the vast majority of elements that are going to show up on the screen for creating

this form are all created and maintained by flutter.

So you and I don't have to manually create these, like, input elements right here, like totally from

scratch and try to work with user input.

Instead, we get these really handy widgets called text form fields that can be used to receive input

from a user and automatically validate whatever the user provided to us.

So let's very quickly go through this hierarchy.

At the very top, we have the app, we're showing the material app inside there.

OK, whatever, we got the scaffold, whatever, and then the next one is where things start to get

interesting.

So we've got this login screen, which is the login screen is going to be responsible for showing the

entire form on the screen to the user.

It's going to be a stateful widget because there's going to be some data generated by the user when

they enter in their email right here that we're going to want to use in some fashion.

So we're going to make the login screen into a stateful widget.

Inside the login screen will show a container solely for styling purposes because we're going to want

to have some margin around the edge of this form.

Inside there will use a built in flutter, which it called a form element, this form right here works

in conjunction with these two text form fields that you see down here to get some inputs on the screen

and provide some interaction for very common operations that we might want to do around a form like,

say, saving whatever user types into the input or validating whatever a user enters in as well.

So again, this form thing right here and these two text form fields are going to be working together

very closely.

Immediately inside the forum, we're going to show a column, the column is just so we can lay out a

handful of widgets in a column sort of layout.

So from top down to bottom inside the column, we're going to have the two text form fields and a raised

button.

The race button, as you might imagine, is going to represent the submit button down here.

The text form fields, again, they are built in standard flutter widgets.

They're going to show these inputs on the screen.

And the reason I'm making kind of a big deal about them is I want you to notice that we don't have any

separate widget to show the labels on here as well.

So the text form field encapsulates everything you would need for showing a text input to a user, not

only the actual input itself, but also the label for it, and also eventually some validation error

as well, like, say, this red text down here.

So the text form field is going to be really the entire basis of our application when it comes to showing

the inputs on the screen.

All right.

So with all this in mind, let's flip back over to our editor and we're going to get started working

on this login screen widget.

All right, so back inside my code editor inside my SIRC directory.

I'm going to make a new folder to house this screen widget that we're about to create.

So inside of SIRC, I'll make a new folder called Screen's.

The idea behind this folder right here is that it might eventually house all the different widgets that

a user can navigate to inside of an application that form like distinct screens that a user can visit.

So in our case, this login screen right here, it's definitely a distinct screen that a user can visit.

And so I'm going to create that in the screens directory.

So inside of here, I'll make a new file called Log in, underscore screen, dot, dot.

Then inside of here will write out some boilerplate for a stateful widget.

At the top, I will import a package from Flutter.

I want material dirt and then I'll make my login screen, which is going to extend state for widget,

and then remember the process that we have to go through for creating a stateful widget.

We have to define that create state method, and we have to create that separate class that's going

to represent the actual state of this widget.

So I'll first begin by making the create state method.

Inside of here, I will return a new login screen to be not new, we don't need that keyword anymore

login screen status.

And then underneath this all define that class, so say class login screen state, and that's going

to extend state.

And remember, we're going to use that generic type syntax.

So the state right here is going to have a generic that conforms to the login screen type.

So login screen.

And then inside of here will define our build method, which is going to return a widget like so.

OK, so good place to get started with just a little bit of boilerplate here.

Again, this is all the same stateful widget stuff that we put together on the last application.

So if any of this looks confusing, you can always pause the video here and go back to the last application

and look all this stuff up.

I would give you another big lecture about what it's all doing for us, but we definitely spoke about

it in great detail in the last application.

So, again, if it is confusing, I recommend you go back over there.

OK, so let's take a quick pause right here.

We'll come back to the next section and we're going to start fleshing out this build method right here.

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