Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,570 --> 00:00:08,280
Now in the last lesson, we created the skeleton of what will form the basis of our input page for our
1
2
00:00:08,280 --> 00:00:09,840
BMI calculator.
2
3
00:00:09,840 --> 00:00:17,190
And we saw that when we created our reusable card and we extracted it as a separate stateless widget,
3
4
00:00:17,520 --> 00:00:25,680
that when we create a property if we omit the word "final", we get an error that tells us that the reusable
4
5
00:00:25,680 --> 00:00:33,100
card class or the class which inherits from, which is a stateless widget, is marked as immutable.
5
6
00:00:33,270 --> 00:00:40,200
But one of its instance fields are not final and it points to our color field which obviously doesn't
6
7
00:00:40,200 --> 00:00:42,960
have the final keyword.
7
8
00:00:42,960 --> 00:00:48,570
Now there's a lot of words that get thrown around in programming and very often they mean very similar
8
9
00:00:48,570 --> 00:00:52,800
things but people just choose to use different terms for it.
9
10
00:00:52,860 --> 00:00:57,990
If you're learning programming for the first time, it actually makes sense to keep almost a dictionary
10
11
00:00:58,020 --> 00:01:04,680
or a glossary of terms just to be able to understand what each of the terms mean. And in the previous
11
12
00:01:04,680 --> 00:01:08,020
warning, it said of something called an instance field.
12
13
00:01:08,400 --> 00:01:14,340
And it's important to note that when people talk about instance variables or instance fields or properties,
13
14
00:01:14,610 --> 00:01:22,140
they're actually talking about the same thing. And all it refers to is just the property that we create
14
15
00:01:22,470 --> 00:01:28,520
that we can change inside the class, or when we construct the class
15
16
00:01:28,560 --> 00:01:32,420
we can set it to have a different value.
16
17
00:01:32,530 --> 00:01:36,980
Now the other term that we saw in that warning is immutability.
17
18
00:01:37,070 --> 00:01:38,580
Well what does immutability mean?
18
19
00:01:38,590 --> 00:01:46,030
Well mutable means it's changeable. So immutable means unchangeable and the things are unchangeable when
19
20
00:01:46,030 --> 00:01:52,810
it comes to Flutter development are pretty much all of our stateless widgets. The widgets are kind of
20
21
00:01:52,810 --> 00:01:58,040
like a Lego block and each of the blocks itself can't be changed.
21
22
00:01:58,060 --> 00:02:02,200
You can't really break a Lego piece in half or try to saw it.
22
23
00:02:02,200 --> 00:02:07,870
Well you could probably saw it in half, but then that's not really in the spirit of the game is it?
23
24
00:02:07,900 --> 00:02:13,210
So even though each of the lego blocks are immutable, they can't be changed.
24
25
00:02:13,210 --> 00:02:21,130
So how do we make changes to our app which is built up using a whole bunch of immutable or unchangeable
25
26
00:02:21,130 --> 00:02:21,790
blocks?
26
27
00:02:22,210 --> 00:02:29,800
Well, we can simply take one of these immutable widgets that needs to be changed, destroy it and in its
27
28
00:02:29,800 --> 00:02:35,140
place, build a new one that has the changes that we want.
28
29
00:02:35,310 --> 00:02:43,830
What that means is that when we update a particular widget on screen, what happens is the old widget
29
30
00:02:44,130 --> 00:02:51,570
because it's immutable, can't be changed. So it actually gets destroyed and a new one gets created in
30
31
00:02:51,570 --> 00:02:53,670
its place with the update.
31
32
00:02:53,670 --> 00:02:58,170
So for example in this case, the widget used to have a white background.
32
33
00:02:58,380 --> 00:03:04,800
And when that widget needs update to have a blue background, then it will get destroyed and a new one with
33
34
00:03:04,800 --> 00:03:08,130
a blue background will get created in its place.
34
35
00:03:08,130 --> 00:03:10,610
So this is how immutability works.
35
36
00:03:10,680 --> 00:03:17,790
And speaking of immutability, stateless widgets are immutable. They can't be changed. Their states don't
36
37
00:03:17,790 --> 00:03:20,080
change because they're stateless.
37
38
00:03:20,100 --> 00:03:26,940
So all of its properties also can only be set once and then it's kind of set in stone. If you want to
38
39
00:03:27,000 --> 00:03:34,060
update it, you have to create a new one and pass in a new color for the new reusable card.
39
40
00:03:34,110 --> 00:03:40,470
So that's why we have to add that keyword final in front of the property in order for this to only be
40
41
00:03:40,470 --> 00:03:43,280
set once and then it cannot be changed.
41
42
00:03:43,290 --> 00:03:48,990
It's the final value of the color of the reusable card.
42
43
00:03:49,000 --> 00:03:51,080
Now we're talking about immutable,
43
44
00:03:51,170 --> 00:03:58,420
there's actually two different types of properties that can both be immutable. And you'll commonly see
44
45
00:03:58,480 --> 00:04:03,840
these two different keywords used across your Flutter projects.
45
46
00:04:03,850 --> 00:04:08,140
And it's very very easy to get confused between what they actually do.
46
47
00:04:08,770 --> 00:04:14,770
So I wanted to spend this lesson talking quickly about what is the difference between the final keyword
47
48
00:04:14,920 --> 00:04:16,600
and the const keyword.
48
49
00:04:16,600 --> 00:04:20,640
And when you mark something as final or const, what it actually means.
49
50
00:04:20,710 --> 00:04:25,800
So round one, fight. In order to do that,
50
51
00:04:25,820 --> 00:04:31,370
let's head over to DartPad and let's create a const and a final.
51
52
00:04:31,640 --> 00:04:42,100
So we know that we can create a new variable by writing something like int myNumber = 2.
52
53
00:04:42,110 --> 00:04:47,810
Now in this case, the first keyword marks the data type that the variable can contain.
53
54
00:04:47,810 --> 00:04:50,080
The second is the name of the variable.
54
55
00:04:50,120 --> 00:04:53,980
And then after the equal sign is the value that's contained in the variable.
55
56
00:04:53,990 --> 00:05:02,630
We've seen this lots of times. But if we wanted this variable to be not variable anymore, if we want it
56
57
00:05:02,630 --> 00:05:10,470
to never be able to change, then we can have a choice of using a constant or a final.
57
58
00:05:10,820 --> 00:05:14,870
Either way, we would add those keywords at the very beginning.
58
59
00:05:14,900 --> 00:05:24,890
So let's create a const, and let's rename this to myConst. And then let's create a final int, and let's
59
60
00:05:24,890 --> 00:05:29,860
name this myFinal and I'm going to make this equal to three.
60
61
00:05:29,870 --> 00:05:36,830
Now the right hand side doesn't really matter other than to be able to show you that if at a later date,
61
62
00:05:36,950 --> 00:05:41,310
I decided that I actually want myConst to hold a different value,
62
63
00:05:41,330 --> 00:05:45,380
so I wanted to write myConst now equals four,
63
64
00:05:45,800 --> 00:05:53,630
then I will get an error because constants are immutable. And you can see down here, constant variables
64
65
00:05:53,930 --> 00:06:00,140
can't be assigned a value again. And it's because it already has a starting value,
65
66
00:06:00,140 --> 00:06:02,370
and that will never ever change.
66
67
00:06:02,450 --> 00:06:05,180
It will always hold on to that value.
67
68
00:06:05,180 --> 00:06:13,280
This particular myConst can only be two and it cannot be changed after it's created.
68
69
00:06:13,280 --> 00:06:16,070
Now the same thing applies to final.
69
70
00:06:16,100 --> 00:06:22,100
So if we want to change myFinal to let's say six, it also gives us an error.
70
71
00:06:22,100 --> 00:06:30,680
Final is a final variable can only be set once. In both of these cases, they're immutable.
71
72
00:06:30,920 --> 00:06:36,100
But if we had on the other hand, a variable a normal variable.
72
73
00:06:36,380 --> 00:06:44,790
So let's bring out myNumber again, and we wanted to set myNumber to be a new value say four.
73
74
00:06:44,810 --> 00:06:49,100
Well that's of course possible because this is how variables work.
74
75
00:06:49,160 --> 00:06:53,290
They can be created and then at a later date, they can be changed.
75
76
00:06:53,300 --> 00:06:54,710
They can be varied.
76
77
00:06:54,710 --> 00:07:01,220
This is why they're called variables. But for constants and for final variables, they can't change in
77
78
00:07:01,220 --> 00:07:01,800
value.
78
79
00:07:01,970 --> 00:07:05,870
So the immutability part is usually pretty easy to grasp.
79
80
00:07:05,900 --> 00:07:08,030
You assign it a value to begin with
80
81
00:07:08,030 --> 00:07:14,240
when you create it and then it has to be that value from now on. You can't change it ever again.
81
82
00:07:14,240 --> 00:07:18,860
But the hard part is knowing when do I use const and when do I use final?
82
83
00:07:18,880 --> 00:07:23,420
Because at first glance, it seems like they pretty much do the same thing right?
83
84
00:07:24,200 --> 00:07:30,260
Well there's some subtle differences between the two of them and that is what we're going to explore
84
85
00:07:30,260 --> 00:07:37,420
in this lesson. So if you read the Dart language tour, it will talk about final and const. And it will
85
86
00:07:37,420 --> 00:07:46,990
say that a final variable can be set only once whereas a const variable is a compile-time constant.
86
87
00:07:47,680 --> 00:07:51,190
So what does this mean?
87
88
00:07:51,210 --> 00:07:59,400
Well the moment when I click on the run button, my code that I've written here in the Dart language will
88
89
00:07:59,400 --> 00:08:03,600
be compiled to a format that the machine can understand,
89
90
00:08:03,720 --> 00:08:11,790
so something closer to the ones and zeros. And in that momentm it has to be able to work out the value
90
91
00:08:11,820 --> 00:08:13,980
that should be held inside the constant.
91
92
00:08:14,550 --> 00:08:18,040
But for a final, this doesn't have to be the case.
92
93
00:08:18,120 --> 00:08:21,420
It can be worked out at any point down the line.
93
94
00:08:21,420 --> 00:08:30,090
Let me demonstrate this. Our constant could be for example, 2 + 5 * 8.
94
95
00:08:30,090 --> 00:08:38,160
This is perfectly valid as a const because it can be calculated the moment that I click run and the
95
96
00:08:38,160 --> 00:08:44,780
value of that right hand side will be set to my const. Now
96
97
00:08:44,820 --> 00:08:54,120
what we can't do though is at runtime or when our app is actually running on the phone, if I want to
97
98
00:08:54,120 --> 00:09:02,910
use something that is only available at that point, say a button that's on screen, and I want to try and
98
99
00:09:02,910 --> 00:09:11,990
get its dimensions then I can't do that with a const and I would have to use a final. So a const
99
100
00:09:12,410 --> 00:09:16,180
can't have access to anything at runtime,
100
101
00:09:16,190 --> 00:09:23,240
so when your app is running. If there's something that's created after the code has been compiled, then
101
102
00:09:23,330 --> 00:09:26,700
it shouldn't be set to a const.
102
103
00:09:26,720 --> 00:09:34,190
For example if I wanted to calculate the current time, then I wouldn't need to create a new object from
103
104
00:09:34,220 --> 00:09:43,480
the dateTime and then I could use the dateTime object and I could tap into something called now. And
104
105
00:09:43,480 --> 00:09:50,650
this should give me the current date and time. But it can't be assigned to a constant because this has
105
106
00:09:50,650 --> 00:09:54,280
to be worked out after my code has run.
106
107
00:09:54,460 --> 00:10:03,280
And then we can get access to the dateTime. But if I had instead moved this into my final, then you'll
107
108
00:10:03,280 --> 00:10:11,110
see that this is perfectly valid code, other than the fact that it's not an integer that comes out.
108
109
00:10:11,320 --> 00:10:21,260
If I print now myFinal, then you can see that it calculates the date and time after the code is compiled
109
110
00:10:21,710 --> 00:10:24,510
and it shows you what that time is.
110
111
00:10:25,640 --> 00:10:35,810
If we head back to our code, then you can see that we can change our color to a final, but it can't be
111
112
00:10:35,870 --> 00:10:42,180
a const because the color comes from when we create a new reusable card
112
113
00:10:42,380 --> 00:10:48,050
and that could be created at any time not just at the time when the code is compiled, but it could be
113
114
00:10:48,080 --> 00:10:55,970
any time when our app is running. And it is in that moment when we get the value for color and so we
114
115
00:10:55,970 --> 00:10:58,370
can't actually use a const here.
115
116
00:10:58,430 --> 00:11:00,480
It has to be a final.
116
117
00:11:00,710 --> 00:11:08,480
Now similarly, it can't just be a simple variable because our reusable card is immutable.
117
118
00:11:08,480 --> 00:11:15,670
So whenever we create a new reusable card, then it will create an immutable stateless widget.
118
119
00:11:16,340 --> 00:11:24,680
And whenever the reusable card needs to change say its color or its size, then that reusable card, that
119
120
00:11:24,680 --> 00:11:33,320
specific one, actually gets destroyed. And a new one takes its place. So its properties can't be mutable.
120
121
00:11:33,350 --> 00:11:34,910
It can't change.
121
122
00:11:35,000 --> 00:11:43,070
Which is why we need to declare it as final. Now usually when we're writing our code, numbers and hardcoded
122
123
00:11:43,250 --> 00:11:48,190
things in our design are usually represented by a constant.
123
124
00:11:48,200 --> 00:11:55,370
So let's say that if we were to create the bottom part of our design which is simply just a container
124
125
00:11:55,400 --> 00:12:02,220
that has a fixed height, then we might do that there at the very bottom of our column.
125
126
00:12:02,240 --> 00:12:10,680
So just before the column ends probably right here and we can add our new container which is going to
126
127
00:12:10,680 --> 00:12:26,320
have a color of 0xFFEB1555. And this is a nice sort of pink color that we got from the
127
128
00:12:26,320 --> 00:12:28,530
design on the Dribbble side down here.
128
129
00:12:29,790 --> 00:12:32,560
And then we're going to add a margin.
129
130
00:12:32,560 --> 00:12:40,300
And in this case we only actually want the margin to be there for the top of this container. And all
130
131
00:12:40,300 --> 00:12:43,750
the other parts of the container, the side and the bottom,
131
132
00:12:43,810 --> 00:12:48,490
we actually want to have no margin so that it very much sticks to all sides.
132
133
00:12:48,490 --> 00:12:51,720
So instead of saying EdgeInsets.all, we're going to say
133
134
00:12:51,720 --> 00:12:53,630
EdgeInsets.only.
134
135
00:12:53,730 --> 00:13:00,580
And the one that we're going to set is the top which we're going to set to 10. And then we want to set
135
136
00:13:00,580 --> 00:13:02,230
the width of our container.
136
137
00:13:02,590 --> 00:13:10,780
And in my case we want to have this container stretch out all the way across the width of the screen,
137
138
00:13:11,140 --> 00:13:12,880
no matter which screen is on.
138
139
00:13:12,880 --> 00:13:18,460
So it could be on a small screen an iPhone 4, or a large iPad, doesn't matter.
139
140
00:13:18,460 --> 00:13:19,930
We want it to stretch.
140
141
00:13:19,930 --> 00:13:25,720
So the easiest way of doing this is simply writing double.infinity.
141
142
00:13:25,720 --> 00:13:32,390
And this will give us a value that is going to be equal to the full width of the screen.
142
143
00:13:33,310 --> 00:13:40,850
So now all we need to do is to simply give our container a fixed height of 80 pixels.
143
144
00:13:41,050 --> 00:13:44,900
And if we hit save, we should be up to see it right here,
144
145
00:13:44,980 --> 00:13:53,200
and this is what it looks like, which is pretty neat. Now here where we have our height as a fixed 80
145
146
00:13:53,210 --> 00:13:54,240
pixels,
146
147
00:13:54,320 --> 00:13:57,200
we might at a later stage decide that that's too high.
147
148
00:13:57,200 --> 00:14:03,590
Maybe we want to make it smaller or maybe you want to make it taller, and it's quite hard digging through
148
149
00:14:03,920 --> 00:14:07,080
the actual code to be able to change this.
149
150
00:14:07,100 --> 00:14:14,180
So very often, you see constants being used in this case where they're defined at the very top of a file.
150
151
00:14:14,660 --> 00:14:23,270
And let's call it bottomContainerHeight and we're going to set it to 80.0.
151
152
00:14:23,270 --> 00:14:30,830
And now inside our container, we can change the height to that constant bottomContainerHeight.
152
153
00:14:30,980 --> 00:14:36,500
And now we don't have to dig through the code to try and find out where it is and try and fix all the
153
154
00:14:36,500 --> 00:14:38,410
places where that exists.
154
155
00:14:38,420 --> 00:14:44,570
Now we can simply look at the top and look at our constants and change them if we need to.
155
156
00:14:44,570 --> 00:14:51,230
So this can easily be a constant because we can work it out at the point when we click run.
156
157
00:14:51,230 --> 00:14:52,690
So it's 80 pixels,
157
158
00:14:52,760 --> 00:14:59,900
even if it was 80* 2, that's all things that we can work out at the time when we actually run
158
159
00:14:59,990 --> 00:15:00,780
our app.
159
160
00:15:00,860 --> 00:15:07,160
But what we can't make a constant is something that requires our app to be currently running.
160
161
00:15:07,340 --> 00:15:14,080
So we can't for example decide that we want to create a constant that's based on our color.
161
162
00:15:14,090 --> 00:15:21,020
So for example, what if we want to know the string value of our color and we want to create a constant
162
163
00:15:21,020 --> 00:15:31,370
called colorString and we set it to equal the value of our colour property .toString which would normally
163
164
00:15:31,370 --> 00:15:34,060
create a string value from that color?
164
165
00:15:34,310 --> 00:15:41,000
But this is completely illegal because const variables must be initialized with a constant value. It can't
165
166
00:15:41,000 --> 00:15:48,360
be something that has to be worked out at a later stage or when color actually receives a value.
166
167
00:15:48,380 --> 00:15:50,470
So this is illegal.
167
168
00:15:50,510 --> 00:15:52,000
Now it's your turn.
168
169
00:15:52,160 --> 00:16:00,200
And the challenge is we have all of these colors which are created using the raw hex codes. And they're
169
170
00:16:00,200 --> 00:16:05,990
kind of inside our widgets in many places cluttering up our code.
170
171
00:16:06,020 --> 00:16:12,040
So can you create a constant to collect them together at the very top?
171
172
00:16:12,110 --> 00:16:19,070
And if we wanted to change the color of our reusable cards, then we only need to do it in one place instead
172
173
00:16:19,070 --> 00:16:19,850
of six.
173
174
00:16:19,880 --> 00:16:24,330
So pause the video and try to complete this challenge.
174
175
00:16:24,550 --> 00:16:24,850
All right.
175
176
00:16:24,880 --> 00:16:28,360
So this is as easy as creating our bottomContainerHeight .
176
177
00:16:28,420 --> 00:16:34,540
We're going to create it at the very top of the file and we're going to call this whatever you wanted to
177
178
00:16:34,540 --> 00:16:43,270
call, but I'm going to call it activeCardColour and we're going to set that to equal the color that
178
179
00:16:43,270 --> 00:16:44,680
we have over here.
179
180
00:16:44,740 --> 00:16:51,970
So we're gonna copy that and paste it here. And then now every time we use that color, we can simply use
180
181
00:16:51,970 --> 00:16:55,250
the activeCardColor in its place.
181
182
00:16:55,360 --> 00:17:01,780
And this again is something that can be worked out at the moment when we press the run button.
182
183
00:17:01,780 --> 00:17:08,830
Now we have our active card color and you might want to go a step further and move our bottom container
183
184
00:17:08,860 --> 00:17:10,660
color up to the top as well.
184
185
00:17:10,660 --> 00:17:18,600
So let's cut that and let's add another constant code bottomContainerColour,
185
186
00:17:18,940 --> 00:17:26,790
and this is going to be equal to that pinkish color up here. And now we can replace it down here with
186
187
00:17:26,890 --> 00:17:29,590
bottomContainerColour.
187
188
00:17:29,620 --> 00:17:37,630
So now our code looks a lot cleaner and everything that is hardcoded now refers to a constant that lives
188
189
00:17:37,630 --> 00:17:43,420
at the top the screen which is very easily found and easily changed. And we know that all the changes
189
190
00:17:43,420 --> 00:17:47,800
that we make here will get reflected in all the places where they're used.
190
191
00:17:47,800 --> 00:17:53,850
So this is a really common use for constants. Now in the coming lessons,
191
192
00:17:53,890 --> 00:17:58,090
we're going to be using constants and final in a lot of places.
192
193
00:17:58,180 --> 00:18:01,240
So you'll have plenty of practice and plenty of exposure.
193
194
00:18:01,300 --> 00:18:06,250
So if it doesn't make complete sense straight away, don't worry we're going to come back to it and we're
194
195
00:18:06,250 --> 00:18:10,410
going to revisit it in the coming lessons. In the next lesson though,
195
196
00:18:10,420 --> 00:18:18,790
we're going to add a child to our reusable card and make it even more customized with some custom content
196
197
00:18:18,820 --> 00:18:20,770
that's contained inside the code.
197
198
00:18:20,770 --> 00:18:24,120
So for all of that and more, I'll see you on the next lesson.
22928
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.