Original subtitles

We just updated the colour of our button widget at the bottom to be a nice blue, we're not going to

address the fact that we have absolutely no spacing between our password field and the actual submit

button.

Not to actually add in.

The spacing here is going to involve just very few lines of code, but it's a kind of a question of

where we add this code that makes the spacing here a little bit more of a complicated thing than it

might seem at first glance.

So let me first say that to add in spacing anywhere inside of our application, we can very easily use

that container widget, as we did up here inside of our build method.

We saw this in the last application we worked on as well.

We could add in a container that has a margin and then we specify these sites on which we want to apply

this margin to through the Edge INSETs class.

So adding and spacing not a problem again, is the issue of where we add the spacing.

Let me show you one possible way of doing this and then I'll tell you exactly why it might not be the

best approach of adding in some spacing.

So we want to make sure that the password has a little bit of margin directly underneath it to offset

the button that we see, so I'm going to go and find the password field element.

So here's the password field method, we've got the text form field inside of it.

I'm going to create a new container widget and I'm going to wrap the text form field with that container.

So to do this refactor, I'm going to first put the container together right above and then I'll cut

and paste the text form field into it.

That's the easiest way of kind of writing this stuff out.

So I'm going to return a container.

It has some margin, I'll give it an edge in sets, and I only want to have some margin on the very

bottom of this field.

So I'm going to add in only with a bottom named property and I'll give it like twenty five pixels or

so of spacing.

Then I'll add on the child property, and that's where we're going to add in our text form field, so

I'm going to select just the text form fields.

So I'm not selecting the return keyword and I am not selecting the semicolon at the end.

I'm going to cut all that and I'll paste it in for the child right here.

So there's the child.

I'll add in a comma at the closing parentheses for the text Roennfeldt.

I'll remove the return statement at the bottom and I'll save that.

OK, so what we have right here, it definitely works.

And let me prove it to you, I'll very quickly go and do the refresh and we'll see that margin can apply

to the bottom of the passport field.

And, hey, we're looking pretty good.

So let me tell you now why that approach is maybe not the best.

If I go up to my column, which is right here, we're currently placing the email field, then the password,

then the submit button.

So let's imagine for a second that we were not making a form to log in.

Maybe instead we were making a form for like anything else where we might want to reorder these fields

in different ways for, I don't know, any given reason.

So if for some reason I wanted to put my password field above the email fields, let's do that right

now.

So put the spacing in there.

Now, the password field shows up first, then the email field.

So think about what's going to happen now.

If I go in refresh at my terminal, we're now going to see a ton of spacing underneath the password

and then the email field is directly up against the button.

And so we are in the exact same situation that we were before.

So if we wanted to be able to quickly manipulate the order of the fields that are showed inside of our

form, we would have to be doing a pretty big refactor every time.

Every time I would have to go down to my password field, I would have to extract this container and

then instead add it to the email field directly.

If I instead added the container to the button down here, then I'm kind of in the same order again,

or I have the same problem as before.

You know, usually, yeah, we're going to put our button at the very bottom of any list of a form elements.

But let's say that for some crazy reason, I wanted to show the form or the button here first.

And now we have the same problem if we had applied the container to that button, so the key thing here

to understand is that if we take any one of these methods and we wrap them with that container, it's

going to make it a real pain in the rear to refactor in the future.

So there is a better way of adding the spacing and making sure that we write much more maintainable

and reusable code.

That doesn't have to be quite so intensely refactored every single time that we want to change the order

of our fields.

So let me show you how we're going to do that.

First thing I want to do is restored the order of my fields here.

So I'll put this button at the bottom and I'll put the email field first.

And then going to go back to my password field method and I'm going to remove that container that we

just created.

So here's my container, I'm going to delete everything up to the text form fields.

I'll take off the extra parentheses in there, and if I save it, I'm back to how I was before.

And so now if I refresh, I should still see my working application in here, but with no spacing.

OK, so we're back to how we were before.

So let me show you the better approach so we could take.

I'm going to go up to my column, which is right here.

Now, inside the column widget, we're listing out all of our children and as we've said, clearly adding

in any margin directly to any one of these widgets is not a good approach.

So instead, I'm going to add in an extra entry in this widget list right here.

And in this extra record, I'm going to directly create a container that has some margin assigned to

it.

So I'll do an etch insets only on top twenty five pixels and I'm not going to add a child.

So we now have a container element that solely applies some margin to our layout and does absolutely

nothing else.

This doesn't try to show any child inside of it.

It just tries to manipulate the spacing inside of our layout.

So now I think you can very easily see the benefit in this approach.

I could very easily reorder my fields inside of here into any order that I want.

And it really doesn't matter what order I end up with.

I can't put the email field at the bottom, the password field above that and it's button above that.

And I've got this separate container element here that I could easily move around or cut and paste as

I please to add margin anywhere that I want.

So I could do something like that right there.

And now we've got twenty five pixels between everything that is displayed inside this column.

All right, so let's very quickly restore to the order that we probably want.

So I want my email field first and comment at the bottom.

All right.

So I'll save this and we'll do a quick test.

And now we have the email password, that 25 pixels of spacing things to the container without a child

and then our button.

All right.

So like I said, this is a way more maintainable way of kind of adding in spacing between our elements,

much preferable to add in these kind of simple containers rather than always trying to wrap some element

with the container and applying margin to that.

Now, last thing I want to mention here, using a container in this fashion.

Well, as you might guess, only really works when we're using a layout widget like a column.

So if rather than a column, we were trying to display something like directly in the form which accepts

a single child will in that case, then of course we have to use a container and provide it a child

of whatever widget we want to show inside of it.

So this methodology that you see right here is really only applicable when we're trying to show a distinct

list of widgets on the screen.

But nonetheless, in that case, very handy approach.

OK, so long last we got our spacing in there.

Let's take a break and we'll continue in the next section.