Original subtitles

0 Now in the last lesson, we created the skeleton of what will form the basis of our input page for our 1

BMI calculator. 2

And we saw that when we created our reusable card and we extracted it as a separate stateless widget, 3

that when we create a property if we omit the word "final", we get an error that tells us that the reusable 4

card class or the class which inherits from, which is a stateless widget, is marked as immutable. 5

But one of its instance fields are not final and it points to our color field which obviously doesn't 6

have the final keyword. 7

Now there's a lot of words that get thrown around in programming and very often they mean very similar 8

things but people just choose to use different terms for it. 9

If you're learning programming for the first time, it actually makes sense to keep almost a dictionary 10

or a glossary of terms just to be able to understand what each of the terms mean. And in the previous 11

warning, it said of something called an instance field. 12

And it's important to note that when people talk about instance variables or instance fields or properties, 13

they're actually talking about the same thing. And all it refers to is just the property that we create 14

that we can change inside the class, or when we construct the class 15

we can set it to have a different value. 16

Now the other term that we saw in that warning is immutability. 17

Well what does immutability mean? 18

Well mutable means it's changeable. So immutable means unchangeable and the things are unchangeable when 19

it comes to Flutter development are pretty much all of our stateless widgets. The widgets are kind of 20

like a Lego block and each of the blocks itself can't be changed. 21

You can't really break a Lego piece in half or try to saw it. 22

Well you could probably saw it in half, but then that's not really in the spirit of the game is it? 23

So even though each of the lego blocks are immutable, they can't be changed. 24

So how do we make changes to our app which is built up using a whole bunch of immutable or unchangeable 25

blocks? 26

Well, we can simply take one of these immutable widgets that needs to be changed, destroy it and in its 27

place, build a new one that has the changes that we want. 28

What that means is that when we update a particular widget on screen, what happens is the old widget 29

because it's immutable, can't be changed. So it actually gets destroyed and a new one gets created in 30

its place with the update. 31

So for example in this case, the widget used to have a white background. 32

And when that widget needs update to have a blue background, then it will get destroyed and a new one with 33

a blue background will get created in its place. 34

So this is how immutability works. 35

And speaking of immutability, stateless widgets are immutable. They can't be changed. Their states don't 36

change because they're stateless. 37

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

update it, you have to create a new one and pass in a new color for the new reusable card. 39

So that's why we have to add that keyword final in front of the property in order for this to only be 40

set once and then it cannot be changed. 41

It's the final value of the color of the reusable card. 42

Now we're talking about immutable, 43

there's actually two different types of properties that can both be immutable. And you'll commonly see 44

these two different keywords used across your Flutter projects. 45

And it's very very easy to get confused between what they actually do. 46

So I wanted to spend this lesson talking quickly about what is the difference between the final keyword 47

and the const keyword. 48

And when you mark something as final or const, what it actually means. 49

So round one, fight. In order to do that, 50

let's head over to DartPad and let's create a const and a final. 51

So we know that we can create a new variable by writing something like int myNumber = 2. 52

Now in this case, the first keyword marks the data type that the variable can contain. 53

The second is the name of the variable. 54

And then after the equal sign is the value that's contained in the variable. 55

We've seen this lots of times. But if we wanted this variable to be not variable anymore, if we want it 56

to never be able to change, then we can have a choice of using a constant or a final. 57

Either way, we would add those keywords at the very beginning. 58

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

name this myFinal and I'm going to make this equal to three. 60

Now the right hand side doesn't really matter other than to be able to show you that if at a later date, 61

I decided that I actually want myConst to hold a different value, 62

so I wanted to write myConst now equals four, 63

then I will get an error because constants are immutable. And you can see down here, constant variables 64

can't be assigned a value again. And it's because it already has a starting value, 65

and that will never ever change. 66

It will always hold on to that value. 67

This particular myConst can only be two and it cannot be changed after it's created. 68

Now the same thing applies to final. 69

So if we want to change myFinal to let's say six, it also gives us an error. 70

Final is a final variable can only be set once. In both of these cases, they're immutable. 71

But if we had on the other hand, a variable a normal variable. 72

So let's bring out myNumber again, and we wanted to set myNumber to be a new value say four. 73

Well that's of course possible because this is how variables work. 74

They can be created and then at a later date, they can be changed. 75

They can be varied. 76

This is why they're called variables. But for constants and for final variables, they can't change in 77

value. 78

So the immutability part is usually pretty easy to grasp. 79

You assign it a value to begin with 80

when you create it and then it has to be that value from now on. You can't change it ever again. 81

But the hard part is knowing when do I use const and when do I use final? 82

Because at first glance, it seems like they pretty much do the same thing right? 83

Well there's some subtle differences between the two of them and that is what we're going to explore 84

in this lesson. So if you read the Dart language tour, it will talk about final and const. And it will 85

say that a final variable can be set only once whereas a const variable is a compile-time constant. 86

So what does this mean? 87

Well the moment when I click on the run button, my code that I've written here in the Dart language will 88

be compiled to a format that the machine can understand, 89

so something closer to the ones and zeros. And in that momentm it has to be able to work out the value 90

that should be held inside the constant. 91

But for a final, this doesn't have to be the case. 92

It can be worked out at any point down the line. 93

Let me demonstrate this. Our constant could be for example, 2 + 5 * 8. 94

This is perfectly valid as a const because it can be calculated the moment that I click run and the 95

value of that right hand side will be set to my const. Now 96

what we can't do though is at runtime or when our app is actually running on the phone, if I want to 97

use something that is only available at that point, say a button that's on screen, and I want to try and 98

get its dimensions then I can't do that with a const and I would have to use a final. So a const 99

can't have access to anything at runtime, 100

so when your app is running. If there's something that's created after the code has been compiled, then 101

it shouldn't be set to a const. 102

For example if I wanted to calculate the current time, then I wouldn't need to create a new object from 103

the dateTime and then I could use the dateTime object and I could tap into something called now. And 104

this should give me the current date and time. But it can't be assigned to a constant because this has 105

to be worked out after my code has run. 106

And then we can get access to the dateTime. But if I had instead moved this into my final, then you'll 107

see that this is perfectly valid code, other than the fact that it's not an integer that comes out. 108

If I print now myFinal, then you can see that it calculates the date and time after the code is compiled 109

and it shows you what that time is. 110

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

a const because the color comes from when we create a new reusable card 112

and that could be created at any time not just at the time when the code is compiled, but it could be 113

any time when our app is running. And it is in that moment when we get the value for color and so we 114

can't actually use a const here. 115

It has to be a final. 116

Now similarly, it can't just be a simple variable because our reusable card is immutable. 117

So whenever we create a new reusable card, then it will create an immutable stateless widget. 118

And whenever the reusable card needs to change say its color or its size, then that reusable card, that 119

specific one, actually gets destroyed. And a new one takes its place. So its properties can't be mutable. 120

It can't change. 121

Which is why we need to declare it as final. Now usually when we're writing our code, numbers and hardcoded 122

things in our design are usually represented by a constant. 123

So let's say that if we were to create the bottom part of our design which is simply just a container 124

that has a fixed height, then we might do that there at the very bottom of our column. 125

So just before the column ends probably right here and we can add our new container which is going to 126

have a color of 0xFFEB1555. And this is a nice sort of pink color that we got from the 127

design on the Dribbble side down here. 128

And then we're going to add a margin. 129

And in this case we only actually want the margin to be there for the top of this container. And all 130

the other parts of the container, the side and the bottom, 131

we actually want to have no margin so that it very much sticks to all sides. 132

So instead of saying EdgeInsets.all, we're going to say 133

EdgeInsets.only. 134

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

the width of our container. 136

And in my case we want to have this container stretch out all the way across the width of the screen, 137

no matter which screen is on. 138

So it could be on a small screen an iPhone 4, or a large iPad, doesn't matter. 139

We want it to stretch. 140

So the easiest way of doing this is simply writing double.infinity. 141

And this will give us a value that is going to be equal to the full width of the screen. 142

So now all we need to do is to simply give our container a fixed height of 80 pixels. 143

And if we hit save, we should be up to see it right here, 144

and this is what it looks like, which is pretty neat. Now here where we have our height as a fixed 80 145

pixels, 146

we might at a later stage decide that that's too high. 147

Maybe we want to make it smaller or maybe you want to make it taller, and it's quite hard digging through 148

the actual code to be able to change this. 149

So very often, you see constants being used in this case where they're defined at the very top of a file. 150

And let's call it bottomContainerHeight and we're going to set it to 80.0. 151

And now inside our container, we can change the height to that constant bottomContainerHeight. 152

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

places where that exists. 154

Now we can simply look at the top and look at our constants and change them if we need to. 155

So this can easily be a constant because we can work it out at the point when we click run. 156

So it's 80 pixels, 157

even if it was 80* 2, that's all things that we can work out at the time when we actually run 158

our app. 159

But what we can't make a constant is something that requires our app to be currently running. 160

So we can't for example decide that we want to create a constant that's based on our color. 161

So for example, what if we want to know the string value of our color and we want to create a constant 162

called colorString and we set it to equal the value of our colour property .toString which would normally 163

create a string value from that color? 164

But this is completely illegal because const variables must be initialized with a constant value. It can't 165

be something that has to be worked out at a later stage or when color actually receives a value. 166

So this is illegal. 167

Now it's your turn. 168

And the challenge is we have all of these colors which are created using the raw hex codes. And they're 169

kind of inside our widgets in many places cluttering up our code. 170

So can you create a constant to collect them together at the very top? 171

And if we wanted to change the color of our reusable cards, then we only need to do it in one place instead 172

of six. 173

So pause the video and try to complete this challenge. 174

All right. 175

So this is as easy as creating our bottomContainerHeight . 176

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

call, but I'm going to call it activeCardColour and we're going to set that to equal the color that 178

we have over here. 179

So we're gonna copy that and paste it here. And then now every time we use that color, we can simply use 180

the activeCardColor in its place. 181

And this again is something that can be worked out at the moment when we press the run button. 182

Now we have our active card color and you might want to go a step further and move our bottom container 183

color up to the top as well. 184

So let's cut that and let's add another constant code bottomContainerColour, 185

and this is going to be equal to that pinkish color up here. And now we can replace it down here with 186

bottomContainerColour. 187

So now our code looks a lot cleaner and everything that is hardcoded now refers to a constant that lives 188

at the top the screen which is very easily found and easily changed. And we know that all the changes 189

that we make here will get reflected in all the places where they're used. 190

So this is a really common use for constants. Now in the coming lessons, 191

we're going to be using constants and final in a lot of places. 192

So you'll have plenty of practice and plenty of exposure. 193

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

going to revisit it in the coming lessons. In the next lesson though, 195

we're going to add a child to our reusable card and make it even more customized with some custom content 196

that's contained inside the code. 197

So for all of that and more, I'll see you on the next lesson.