All language subtitles for 004 More Container Styling_en

In the last section, we put together some boilerplate for the login screen widget and we left off on

our build method inside the login screen state.

So inside of our build method right here, we're going to want to show a container that's going to have

a little bit of margin on it.

Again, this container right here is just to get this nice margin around the edge of the screen and

then immediately inside there will show our form.

Let's first start with our container by itself and we'll just show some text element or something like

that inside of the container and just make sure that everything is working as we expect.

So back inside my editor, I'll find my build method right here.

And I will return a container.

I'm going to give it some margin around the outside and remember to add, Martsen, we have to create

an edge insets object.

And I'm going to use the all constructor, which specifies that I want some consistent marchin around

all sides of this container, and I'm going to say that I want around 20 pixels of space.

Then inside of the container itself, like I just said, we'll just add in a quick text widget here,

I'll say something like a login screen.

And then we will save this.

You'll notice that my old method right here is still red because I've not accepted the context argument

that's always passed into every build method.

I know I've said like four or five times.

Yeah, this contact stuff we'll talk about eventually when we start rebuilding this application for

that kind of lock approach.

I spoke about a couple of videoscope.

That's where this context stuff starts coming into play.

So that's where we're going to start saying, OK, here's what context is.

OK, so this looks good for now, I'm going to save this login screen file, I'm then going to flip

back over to the app dart file and make sure that it shows an instance of the login screen.

So inside of darts at the very top, I will import screens, login screen dart.

And then for my body property right here, rather than showing that text that we had before, I will

replace it with a new login screen.

OK, that looks good, so let's save this, I will flip back over to my emulator.

I'll do a hard refresh and we'll see how we're doing.

OK, so I see login screen appearing on here, and I now have a little bit more margin appearing, so

definitely an improvement.

Let's flip back over to our editor and we'll keep going inside of the login screen.

All right.

So like I just said, inside the container, we want to have this form thing right here.

And as we had discussed, the form is going to work very closely with the text form fields to actually

make the process of validating these inputs and getting values out of them a little bit more straightforward.

So inside of this container that we just created inside of login screen states, we're going to replace

text right here with a form instead.

I'll say form.

And then I'll open it up.

Now we're going to end up doing a lot of stuff with the form, but to get started, we're just going

to make a simple form with no special configuration tied to it whatsoever.

So we're just going to try to get this stuff to appear on the screen and then we're going to come back

and start to customize this form tag and get a better sense of how we can use it to control those inputs

that are rendered on the screen.

So for right now, all we really need to understand about this form is that we can give it a child to

display on the screen.

That's pretty much it.

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

So I can add on a child property to the same.

And if we go back over here, remember, we want inside the form, we want a column that's going to

show the text form widgets and the race button as well.

So inside the form for right now, all I care about is creating a column.

That's going to have some number of children.

And inside this array right here is where we're going to render the.

Text form field number one, text form field number two and the race button, so I think this is probably

a good place to take a quick pausa.

So let's stop right here.

We'll come back to the next section and we'll start putting together the text form fields and the raised

button as well.

So I'll see you in just a minute.