Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,840 --> 00:00:06,090
In the last section, we added on our form tag right here, and we gave it a child of a column and the
2
00:00:06,090 --> 00:00:08,610
column is going to show some number of children inside of it.
3
00:00:09,030 --> 00:00:12,590
Remember, the column is here just to layout which widgets on the screen.
4
00:00:12,630 --> 00:00:17,060
That's the sole purpose of the column, which is now inside this children array.
5
00:00:17,070 --> 00:00:23,640
We can create AR to form text fields and our raised button as well.
6
00:00:24,640 --> 00:00:29,770
Now, we could definitely add in all these widgets directly to the Children Arae or Children List right
7
00:00:29,770 --> 00:00:35,980
here, we could do something like Raised Button and then pass an ton of configuration to this thing.
8
00:00:36,250 --> 00:00:41,530
But that's going to make this children list right here be very hard to read if we try to stick in a
9
00:00:41,530 --> 00:00:42,790
lot of stuff on there.
10
00:00:43,090 --> 00:00:49,420
So rather than adding in every one of these child widgets directly to children, I'm going to instead
11
00:00:49,420 --> 00:00:54,250
make a couple of helper methods inside of our login screen state class.
12
00:00:54,670 --> 00:01:00,730
And each of these helper methods are going to produce either the text form field for the email, the
13
00:01:00,730 --> 00:01:04,930
text form field for the password, or the raised button for the submit button.
14
00:01:06,500 --> 00:01:14,270
So inside of my class, I'm going to go down to the very bottom while still inside of the final closing
15
00:01:14,270 --> 00:01:18,230
bracket for the class, and I'm going to add in three helper methods.
16
00:01:18,860 --> 00:01:21,920
The first one I'm going to call email field.
17
00:01:23,090 --> 00:01:26,330
I'll call the second one password Fields.
18
00:01:28,970 --> 00:01:35,000
And then finally, I will also add in submit button, so again, the idea here is that each of these
19
00:01:35,000 --> 00:01:40,670
helper methods are going to create the respective fields or the button and then simply return them.
20
00:01:41,060 --> 00:01:46,400
So all we're doing here is keeping this build method a little bit easier to read by not sticking this
21
00:01:46,580 --> 00:01:50,720
huge kind of pyramid of doom of all these nested widgets inside of your.
22
00:01:51,700 --> 00:01:57,400
So now as the in the child children list right here, I'm going to call email field.
23
00:01:58,510 --> 00:02:04,510
For the first argument, first element inside their excuse me, then I'll put down my password fields
24
00:02:05,620 --> 00:02:08,280
and then finally the submit button as well.
25
00:02:11,790 --> 00:02:17,100
OK, so now each of these can return a widget themselves and we get to put all the logic tied to them
26
00:02:17,100 --> 00:02:23,130
into these separate methods, let's make sure that we mark each of these methods with a return type
27
00:02:23,130 --> 00:02:23,610
as well.
28
00:02:23,610 --> 00:02:28,260
Just so it's really clear that, yeah, the email field is going to return a widget that can be shown
29
00:02:28,260 --> 00:02:28,880
on the screen.
30
00:02:29,190 --> 00:02:34,280
So I'm going to mark this as a widget, a widget and a widget as well.
31
00:02:35,250 --> 00:02:41,250
OK, so that's good progress now we'll get started immediately with our email field for this.
32
00:02:41,250 --> 00:02:47,160
I'm going to very quickly bring up the documentation for a text form field and we'll get a better idea
33
00:02:47,160 --> 00:02:48,000
of how they work.
34
00:02:48,650 --> 00:02:55,560
So back inside of my browser, remember, we can access our documentation by going to flutter IO slash
35
00:02:56,070 --> 00:02:56,790
widgets.
36
00:02:58,750 --> 00:03:00,970
And that will open up the widget catalog.
37
00:03:01,820 --> 00:03:07,070
So inside of here, we can either try to hunt and peck inside of all these lists or we can just do a
38
00:03:07,070 --> 00:03:08,650
search from the top right hand.
39
00:03:08,960 --> 00:03:14,270
And so I want to just directly look up that text form field, which it.
40
00:03:16,380 --> 00:03:19,500
And then we're looking for the text form field class right here.
41
00:03:23,050 --> 00:03:27,480
All right, so if you want to, you could certainly take a quick glance at the documentation text here,
42
00:03:27,790 --> 00:03:32,590
you'll notice that it says in the first couple of paragraphs something about we have a form widget.
43
00:03:32,590 --> 00:03:37,940
It makes it really easy to save, reset or validate multiple fields at once.
44
00:03:38,200 --> 00:03:39,720
So that's what we're trying to do.
45
00:03:39,730 --> 00:03:45,580
We are trying to use a form widget to manage the email input and the password input as well.
46
00:03:46,850 --> 00:03:51,110
So, as usual, we're going to go down to this things constructor and we'll get a better idea of what
47
00:03:51,110 --> 00:03:52,050
we can pass to it.
48
00:03:52,910 --> 00:03:57,910
So here's our text from field and all the different properties so we can pass to the constructor.
49
00:03:58,700 --> 00:04:01,830
And let's give me a couple of ones that you and I are going to really care about.
50
00:04:02,660 --> 00:04:05,400
I'm going to point them out as I can kind of find them in here.
51
00:04:05,630 --> 00:04:09,950
So the first one that we're going to really care about is input decoration propre here.
52
00:04:10,370 --> 00:04:16,500
So input decoration is how we're going to specify a label to be displayed above the actual input.
53
00:04:17,029 --> 00:04:23,060
So remember, as I mentioned earlier, when we saw a text form field, it encapsulates not just the
54
00:04:23,060 --> 00:04:27,950
input itself, but also the label that is shown above it and.
55
00:04:29,050 --> 00:04:34,840
Any validation text that gets displayed underneath it as well, so by just showing a text form fields,
56
00:04:34,960 --> 00:04:38,530
we get all three of these things for free automatically.
57
00:04:39,790 --> 00:04:46,180
In order to specify the label that we want to be have shown above, we're going to use that decoration
58
00:04:46,630 --> 00:04:47,230
right here.
59
00:04:47,260 --> 00:04:52,750
So this named property of decoration, let's add this on first and get a better idea of just how to
60
00:04:52,750 --> 00:04:56,650
add in a text input or a label above the text input.
61
00:04:58,380 --> 00:05:04,830
OK, so back over here, we're going to start first with the email field, so I'm going to return a
62
00:05:04,830 --> 00:05:07,170
text form fields.
63
00:05:07,560 --> 00:05:12,540
And for right now, the only named property that I want to pass in here is that decoration thing.
64
00:05:13,510 --> 00:05:19,210
So decoration is supposed to be of type input decoration, so let's look at the documentation on that
65
00:05:19,210 --> 00:05:19,840
very quickly.
66
00:05:21,960 --> 00:05:27,450
All right, so here's the input decoration class, this is what we use to customize the borders, labels
67
00:05:27,450 --> 00:05:34,770
and all other stuff around text fields so you can kind of think of input decoration class as modifying
68
00:05:34,770 --> 00:05:38,340
the way that these input fields appear on the screen of the device.
69
00:05:39,720 --> 00:05:40,800
If we go down a little bit.
70
00:05:43,000 --> 00:05:45,430
As usual, we'll look at our constructor right here.
71
00:05:46,090 --> 00:05:51,330
So a couple of the properties that you and I really care about are things like labeled text.
72
00:05:51,340 --> 00:05:55,270
So that's going to specify the label that's gets shown above the actual input.
73
00:05:55,750 --> 00:05:59,110
And then there's also something on here called hint text as well.
74
00:05:59,770 --> 00:06:03,740
The hint text right here you can kind of think of as being like a placeholder of sorts.
75
00:06:04,060 --> 00:06:09,250
So kind of some temporary value that will appear to be in the input to kind of guide the user and give
76
00:06:09,250 --> 00:06:12,430
them a better idea of what type of input they're supposed to add.
77
00:06:13,000 --> 00:06:19,270
So let's try creating a new input decoration and specifying the label text and the text as well.
78
00:06:20,690 --> 00:06:21,950
All right, back over here.
79
00:06:23,040 --> 00:06:25,590
Here's the declaration I'm going to make a input.
80
00:06:26,700 --> 00:06:27,420
Decoration.
81
00:06:28,740 --> 00:06:34,440
Don't forget to get the comma at the end there, and then we're going to specify a what a label text
82
00:06:34,440 --> 00:06:34,890
first.
83
00:06:36,870 --> 00:06:38,760
So the label that I want to show on the screen.
84
00:06:40,580 --> 00:06:41,730
Something like email?
85
00:06:41,840 --> 00:06:46,220
Yeah, we probably do a little bit better than that, let's do something like email.
86
00:06:47,460 --> 00:06:48,180
Address.
87
00:06:49,070 --> 00:06:55,370
And then as the hint text and again, that's kind of like our placeholder, I'll enter something like
88
00:06:55,610 --> 00:06:57,630
you at example, Dotcom.
89
00:06:58,190 --> 00:07:01,550
So again, this is just going to guide our user and make it obvious that, oh, yeah, I'm supposed
90
00:07:01,550 --> 00:07:07,940
to do like my email name at domain dot com or wherever my email address might be hosted at.
91
00:07:08,750 --> 00:07:13,510
Guess let's save this and we're going to test it out in our simulator before we test it out.
92
00:07:13,580 --> 00:07:18,500
You'll notice that whenever we call password fields right now and submit button, they are not currently
93
00:07:18,500 --> 00:07:20,260
returning any widget whatsoever.
94
00:07:20,480 --> 00:07:26,240
So if we ran this code as is, we would probably see an error message complaining that password field
95
00:07:26,240 --> 00:07:28,320
and submit button are not returning anything.
96
00:07:28,700 --> 00:07:32,750
So to make sure that we don't call those methods, I'm going to go back up to where we added them to
97
00:07:32,750 --> 00:07:34,730
this children property on the column.
98
00:07:35,060 --> 00:07:38,060
And I'm just going to very temporarily comment those two out.
99
00:07:39,170 --> 00:07:43,790
So as soon as we implement both his methods, we will uncomfort them, but for right now, only email
100
00:07:43,790 --> 00:07:45,560
field has functionally tied to it.
101
00:07:47,650 --> 00:07:49,480
OK, so now I will.
102
00:07:50,570 --> 00:07:55,920
Get my terminal, terminal and simulator back up, I'll do my hard refresh.
103
00:07:56,360 --> 00:07:57,200
Let's shift our.
104
00:08:01,920 --> 00:08:03,360
And awesome.
105
00:08:03,390 --> 00:08:07,260
All right, so here is our default material, TextField Widget.
106
00:08:07,840 --> 00:08:11,450
You'll notice at the top we have our label text of email address.
107
00:08:11,790 --> 00:08:15,330
We get the line to indicate that, hey, this is some place where you can type.
108
00:08:15,960 --> 00:08:17,100
I can click in here.
109
00:08:17,370 --> 00:08:22,510
And when I do, you'll see that placeholder type text or what's referred to as the text appear.
110
00:08:22,950 --> 00:08:24,780
So it says you at example dot com.
111
00:08:24,780 --> 00:08:29,640
And again, this is just intended to kind of guide our users and help them understand what they're supposed
112
00:08:29,640 --> 00:08:30,480
to enter in here.
113
00:08:31,140 --> 00:08:32,669
So now I can start to type in.
114
00:08:33,950 --> 00:08:35,270
Whatever my input might be.
115
00:08:36,659 --> 00:08:41,070
All right, so that made some progress, we got our input on the screen and we got a label on there
116
00:08:41,070 --> 00:08:41,570
as well.
117
00:08:41,590 --> 00:08:44,220
So let's take a quick pause and we'll come back in the next section.
11967
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.