Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,770 --> 00:00:05,210
We just updated the colour of our button widget at the bottom to be a nice blue, we're not going to
2
00:00:05,210 --> 00:00:09,890
address the fact that we have absolutely no spacing between our password field and the actual submit
3
00:00:09,890 --> 00:00:10,220
button.
4
00:00:10,850 --> 00:00:12,230
Not to actually add in.
5
00:00:12,230 --> 00:00:17,690
The spacing here is going to involve just very few lines of code, but it's a kind of a question of
6
00:00:17,690 --> 00:00:23,090
where we add this code that makes the spacing here a little bit more of a complicated thing than it
7
00:00:23,090 --> 00:00:24,560
might seem at first glance.
8
00:00:25,460 --> 00:00:31,190
So let me first say that to add in spacing anywhere inside of our application, we can very easily use
9
00:00:31,190 --> 00:00:35,180
that container widget, as we did up here inside of our build method.
10
00:00:35,900 --> 00:00:38,600
We saw this in the last application we worked on as well.
11
00:00:38,750 --> 00:00:45,020
We could add in a container that has a margin and then we specify these sites on which we want to apply
12
00:00:45,020 --> 00:00:48,290
this margin to through the Edge INSETs class.
13
00:00:49,360 --> 00:00:54,940
So adding and spacing not a problem again, is the issue of where we add the spacing.
14
00:00:55,940 --> 00:01:00,940
Let me show you one possible way of doing this and then I'll tell you exactly why it might not be the
15
00:01:00,940 --> 00:01:03,010
best approach of adding in some spacing.
16
00:01:03,970 --> 00:01:09,700
So we want to make sure that the password has a little bit of margin directly underneath it to offset
17
00:01:09,700 --> 00:01:14,320
the button that we see, so I'm going to go and find the password field element.
18
00:01:16,180 --> 00:01:19,490
So here's the password field method, we've got the text form field inside of it.
19
00:01:20,170 --> 00:01:26,290
I'm going to create a new container widget and I'm going to wrap the text form field with that container.
20
00:01:27,360 --> 00:01:31,740
So to do this refactor, I'm going to first put the container together right above and then I'll cut
21
00:01:31,740 --> 00:01:34,150
and paste the text form field into it.
22
00:01:34,200 --> 00:01:36,540
That's the easiest way of kind of writing this stuff out.
23
00:01:37,140 --> 00:01:39,510
So I'm going to return a container.
24
00:01:41,510 --> 00:01:48,200
It has some margin, I'll give it an edge in sets, and I only want to have some margin on the very
25
00:01:48,200 --> 00:01:49,550
bottom of this field.
26
00:01:49,940 --> 00:01:55,910
So I'm going to add in only with a bottom named property and I'll give it like twenty five pixels or
27
00:01:55,910 --> 00:01:56,720
so of spacing.
28
00:01:57,850 --> 00:02:03,550
Then I'll add on the child property, and that's where we're going to add in our text form field, so
29
00:02:03,550 --> 00:02:06,300
I'm going to select just the text form fields.
30
00:02:06,310 --> 00:02:10,800
So I'm not selecting the return keyword and I am not selecting the semicolon at the end.
31
00:02:11,530 --> 00:02:15,630
I'm going to cut all that and I'll paste it in for the child right here.
32
00:02:16,420 --> 00:02:17,380
So there's the child.
33
00:02:18,040 --> 00:02:23,140
I'll add in a comma at the closing parentheses for the text Roennfeldt.
34
00:02:24,260 --> 00:02:27,590
I'll remove the return statement at the bottom and I'll save that.
35
00:02:28,880 --> 00:02:32,010
OK, so what we have right here, it definitely works.
36
00:02:32,060 --> 00:02:38,330
And let me prove it to you, I'll very quickly go and do the refresh and we'll see that margin can apply
37
00:02:38,330 --> 00:02:39,800
to the bottom of the passport field.
38
00:02:39,800 --> 00:02:41,140
And, hey, we're looking pretty good.
39
00:02:41,690 --> 00:02:44,870
So let me tell you now why that approach is maybe not the best.
40
00:02:45,680 --> 00:02:52,040
If I go up to my column, which is right here, we're currently placing the email field, then the password,
41
00:02:52,040 --> 00:02:53,030
then the submit button.
42
00:02:53,570 --> 00:02:57,770
So let's imagine for a second that we were not making a form to log in.
43
00:02:57,950 --> 00:03:03,860
Maybe instead we were making a form for like anything else where we might want to reorder these fields
44
00:03:04,160 --> 00:03:07,080
in different ways for, I don't know, any given reason.
45
00:03:07,760 --> 00:03:13,820
So if for some reason I wanted to put my password field above the email fields, let's do that right
46
00:03:13,820 --> 00:03:14,150
now.
47
00:03:15,890 --> 00:03:17,230
So put the spacing in there.
48
00:03:18,470 --> 00:03:21,650
Now, the password field shows up first, then the email field.
49
00:03:22,160 --> 00:03:23,720
So think about what's going to happen now.
50
00:03:24,470 --> 00:03:30,170
If I go in refresh at my terminal, we're now going to see a ton of spacing underneath the password
51
00:03:30,380 --> 00:03:33,350
and then the email field is directly up against the button.
52
00:03:33,350 --> 00:03:36,600
And so we are in the exact same situation that we were before.
53
00:03:37,340 --> 00:03:41,900
So if we wanted to be able to quickly manipulate the order of the fields that are showed inside of our
54
00:03:41,900 --> 00:03:45,740
form, we would have to be doing a pretty big refactor every time.
55
00:03:46,280 --> 00:03:51,260
Every time I would have to go down to my password field, I would have to extract this container and
56
00:03:51,260 --> 00:03:53,900
then instead add it to the email field directly.
57
00:03:54,530 --> 00:04:00,620
If I instead added the container to the button down here, then I'm kind of in the same order again,
58
00:04:00,620 --> 00:04:02,290
or I have the same problem as before.
59
00:04:02,780 --> 00:04:08,120
You know, usually, yeah, we're going to put our button at the very bottom of any list of a form elements.
60
00:04:08,600 --> 00:04:13,550
But let's say that for some crazy reason, I wanted to show the form or the button here first.
61
00:04:15,030 --> 00:04:19,950
And now we have the same problem if we had applied the container to that button, so the key thing here
62
00:04:19,950 --> 00:04:25,470
to understand is that if we take any one of these methods and we wrap them with that container, it's
63
00:04:25,470 --> 00:04:28,810
going to make it a real pain in the rear to refactor in the future.
64
00:04:29,490 --> 00:04:34,980
So there is a better way of adding the spacing and making sure that we write much more maintainable
65
00:04:34,980 --> 00:04:36,030
and reusable code.
66
00:04:36,180 --> 00:04:41,070
That doesn't have to be quite so intensely refactored every single time that we want to change the order
67
00:04:41,070 --> 00:04:41,910
of our fields.
68
00:04:42,540 --> 00:04:44,000
So let me show you how we're going to do that.
69
00:04:44,880 --> 00:04:47,970
First thing I want to do is restored the order of my fields here.
70
00:04:49,230 --> 00:04:52,800
So I'll put this button at the bottom and I'll put the email field first.
71
00:04:53,680 --> 00:04:58,330
And then going to go back to my password field method and I'm going to remove that container that we
72
00:04:58,330 --> 00:04:59,020
just created.
73
00:04:59,940 --> 00:05:04,230
So here's my container, I'm going to delete everything up to the text form fields.
74
00:05:06,060 --> 00:05:11,490
I'll take off the extra parentheses in there, and if I save it, I'm back to how I was before.
75
00:05:13,040 --> 00:05:18,140
And so now if I refresh, I should still see my working application in here, but with no spacing.
76
00:05:18,200 --> 00:05:19,760
OK, so we're back to how we were before.
77
00:05:20,030 --> 00:05:22,580
So let me show you the better approach so we could take.
78
00:05:24,000 --> 00:05:26,310
I'm going to go up to my column, which is right here.
79
00:05:27,590 --> 00:05:32,870
Now, inside the column widget, we're listing out all of our children and as we've said, clearly adding
80
00:05:32,870 --> 00:05:36,990
in any margin directly to any one of these widgets is not a good approach.
81
00:05:37,430 --> 00:05:42,800
So instead, I'm going to add in an extra entry in this widget list right here.
82
00:05:43,400 --> 00:05:49,550
And in this extra record, I'm going to directly create a container that has some margin assigned to
83
00:05:49,550 --> 00:05:49,760
it.
84
00:05:49,760 --> 00:05:59,030
So I'll do an etch insets only on top twenty five pixels and I'm not going to add a child.
85
00:05:59,690 --> 00:06:06,470
So we now have a container element that solely applies some margin to our layout and does absolutely
86
00:06:06,470 --> 00:06:07,360
nothing else.
87
00:06:07,820 --> 00:06:09,880
This doesn't try to show any child inside of it.
88
00:06:09,890 --> 00:06:13,760
It just tries to manipulate the spacing inside of our layout.
89
00:06:14,910 --> 00:06:17,910
So now I think you can very easily see the benefit in this approach.
90
00:06:18,390 --> 00:06:23,630
I could very easily reorder my fields inside of here into any order that I want.
91
00:06:24,450 --> 00:06:27,090
And it really doesn't matter what order I end up with.
92
00:06:27,390 --> 00:06:32,820
I can't put the email field at the bottom, the password field above that and it's button above that.
93
00:06:33,120 --> 00:06:39,090
And I've got this separate container element here that I could easily move around or cut and paste as
94
00:06:39,090 --> 00:06:41,690
I please to add margin anywhere that I want.
95
00:06:42,030 --> 00:06:43,520
So I could do something like that right there.
96
00:06:43,530 --> 00:06:48,090
And now we've got twenty five pixels between everything that is displayed inside this column.
97
00:06:49,360 --> 00:06:53,750
All right, so let's very quickly restore to the order that we probably want.
98
00:06:54,130 --> 00:06:57,640
So I want my email field first and comment at the bottom.
99
00:06:57,940 --> 00:06:58,240
All right.
100
00:06:58,240 --> 00:07:00,010
So I'll save this and we'll do a quick test.
101
00:07:02,770 --> 00:07:09,460
And now we have the email password, that 25 pixels of spacing things to the container without a child
102
00:07:09,590 --> 00:07:10,420
and then our button.
103
00:07:11,140 --> 00:07:11,560
All right.
104
00:07:11,560 --> 00:07:17,050
So like I said, this is a way more maintainable way of kind of adding in spacing between our elements,
105
00:07:17,470 --> 00:07:23,740
much preferable to add in these kind of simple containers rather than always trying to wrap some element
106
00:07:23,860 --> 00:07:25,870
with the container and applying margin to that.
107
00:07:26,470 --> 00:07:29,800
Now, last thing I want to mention here, using a container in this fashion.
108
00:07:30,050 --> 00:07:34,730
Well, as you might guess, only really works when we're using a layout widget like a column.
109
00:07:35,170 --> 00:07:40,180
So if rather than a column, we were trying to display something like directly in the form which accepts
110
00:07:40,180 --> 00:07:46,510
a single child will in that case, then of course we have to use a container and provide it a child
111
00:07:46,510 --> 00:07:48,220
of whatever widget we want to show inside of it.
112
00:07:48,670 --> 00:07:53,620
So this methodology that you see right here is really only applicable when we're trying to show a distinct
113
00:07:53,650 --> 00:07:55,680
list of widgets on the screen.
114
00:07:55,960 --> 00:07:59,320
But nonetheless, in that case, very handy approach.
115
00:07:59,980 --> 00:08:02,260
OK, so long last we got our spacing in there.
116
00:08:02,440 --> 00:08:04,690
Let's take a break and we'll continue in the next section.
11905
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.