Original subtitles

0 Now in the last lesson we learned about the gesture detector and we added it as a parent to our reusable 1

card, 2

at the top. The ones with our male and female icons. 3

And we created a method called updateColor that allows us to select one of these genders and be able 4

to activate these cards by changing their color. 5

Now at the moment our code works just fine. 6

But it's a little bit wordy and also there's a few things that are not so great. 7

And the first thing that comes to mind is the fact that we're passing in a integer to represent a gender. 8

So we're saying that one is going to equal male and two is going to equal female. 9

So that's why we're checking to see if the gender is one then that means the male card got pressed. 10

But if the gender was two then that means the female card got pressed. 11

Now as you can imagine, if you came back to this code in six months time or if somebody else was looking 12

at it, they might get a little bit confused because it doesn't make a lot of sense. 13

And even though we have a lot of comments here it's not great. 14

So how can we solve this? In this lesson, 15

we're going to address all of this by learning a concept in programming that is super useful which are 16

Enums. Enums stand for enumeration. 17

And if you look it up in a dictionary, it means the action of establishing the number of something. 18

And that's kind of what we've been doing here right? 19

We've been establishing that the male gender is the number one and the female gender is the number two. 20

But this is super painful and quite confusing. 21

But in programming, this need crops up very frequently. 22

Say if you're trying to encode different types of cars in your app and you say that we have this thing 23

called carType and if it's equal to one, then it's convertible, if it's equal to two then it's an SUV, 24

if it's three then it's a hatchback. 25

Now these numbers don't actually inherently have any meaning. 26

And we're actually assigning it a meaning and trying to remember it down the line. And trying to force 27

other people who we work with also to follow this convention, and that's difficult. 28

But imagine if instead, we can actually give it a word which already has meaning. 29

So if we said that the first one has a carType of .convertible and the second one was .SUV or 30

third one was .hatchback. 31

That makes a lot more sense and is a lot easier to work with and you can see at a glance in the code 32

what it is that we're talking about 33

when we're coding up these different types of cars. 34

If you imagine that we already have booleans which we know to be either on or off or true or false, and 35

is a bit like a light bulb. It's very binary right? 36

It has two states, on and off. 37

But what if we wanted more states, then a light bulb can hold. 38

Well then that's where we kind of start using Enums. And I would say that you names are almost a bit 39

like a blender where you have multiple options right? 40

You might have a high setting, you might have a low setting, you might have a medium or a juice or a blend 41

or alter blend, whatever it may be. And it's more than just on or off. 42

There's many different options and that's exactly what we use enums for, when there's a lot of different 43

options that we want to be able to encode and not just have to rely on numbers. 44

And we can actually give each of the options a name that has meaning. An enum looks like this in Dart. 45

We first start out with the keyword enum, to show that we're creating an enum. And then we give the 46

enum a name. 47

So it could be carType or it could be gender. But the naming convention for enum names are the same 48

as class names. 49

So there are camel cased but they start off with a capital letter. And then we have a set of curly braces 50

that describes each of the different types. 51

So say typeA, typeB, typeC or hatchback, coupé, convertible. 52

And then when we actually need to use the enum, then we can simply writeEnumName. typeA or . 53

typeB. Let's head over to a Dartpad to see this in a little bit more detail. 54

Now let's say that we had a class of Car and previously we only had things such as number of seats or number 55

of doors, which makes a lot of sense to use an integer for right? Five doors is literally an integer. 56

But if we wanted to encode a carStyle then we might have to use an integer and we have to make a note 57

to ourselves that remember that you know if this is one then that means it's a hatchback. 58

And if it's a two then it means it's an SUV etc. which is quite painful. But it does mean that if 59

we decided to initialize our car, 60

say we create our constructor and we set our this.carStyle when we create the car. 61

Then we could go into our main function and we could create a new car. 62

So let's it's a data type of car. 63

Let's call it myCar 64

and it's going to be equal to a car that's constructed. 65

And we have to give it a carStyle and let's say it's equal to an SUV. 66

My car's an SUV. 67

Now if you read this line of code, it makes absolutely no sense whatsoever to a human unless we add a 68

whole bunch of comments to say that, oh actually this car style 2 means that I'm creating a new SUV. 69

Now it's good practice to have comments that explain the logic of your thinking of what your program 70

does. 71

But it's not great when you need comments to be able to understand what's actually going on in a particular 72

line. 73

And this is a classic case where enums can come in and save the day, because if we lost all of these 74

comments and we came along to this code two months later, then this makes no sense whatsoever. So what 75

if we created an enum? 76

So let's do this here outside of any other classes and we're going to use the enum keyword to say 77

that we're creating a new enum. And the enum is going to have a name which is going to be a capitalized 78

camel case. 79

And we're going to call it CarType. 80

And then we open up a set of curly braces and we add all the different car types that we might want 81

in our program. 82

So we might have hatchback, we might have a SUV and maybe a convertible. And let's just add a coupé 83

just for fun. 84

So we've now got four types of cars and they're enclosed inside an enum and now we can use these car 85

types. 86

So instead of having a car style that's represented by an integer, we can change the data type to a enum 87

type, 88

so our carType. And now when we initialize our carStyle, instead of writing 1 for coupé or 2 for 89

hatchback, we can actually provide the enum as a named value. 90

So we could write carType. and you can see that we're already getting all of our values in our dropdown 91

list. 92

So let's say that we're creating a new convertible. 93

Then we've got myCar, which is created from the car constructor, and the property for its carStyle is 94

a convertible carType. 95

Now look at how much better that reads. 96

Even if I came back to this code a million years later, well maybe I'd already be enslaved to the computers. 97

But either way if I came back to this after a long time, this line of code still makes a lot of sense. 98

So let's head back to our code and here's the challenge for you. Create a gender enum at the top of file. 99

You can't create enums inside classes. So make sure it's outside of any of the other classes, maybe 100

somewhere below the constants. And then use that gender enum inside our update color and inside our gesture 101

detector to be able to say that, in this case it was the male card that was pressed 102

and in this case it was the female card that was pressed so that we can process it differently inside 103

this updateColor method. 104

So pause the video and try to upgrade your code by using Dart enums. 105

All right. 106

So first things first, we're going to create our enum using the enum keyword. And we're just gonna call it 107

Gender but we're going to make sure it's capitalized at the beginning to show that it's not the same 108

as a variable or a constant. 109

Now gender is going to have only two different values and it's going to be male and it's going to be 110

female. 111

So now we can use this enum gender.male or gender.female in our code. For example our updateColor 112

can now instead of taking a int type input, we can have it as a gender type input so we can either leave 113

that name as gender or if you find that a bit confusing, you can change it to selected gender, just to 114

know that it's the name that we're giving the input. And now we can check to see that if the selected 115

gender is equal to, not one, but gender.male, then we should do all of this but if the selected gender 116

was instead equal to gender.female then we would do all of this. 117

And now in our code here where we update color, instead of passing in one, we can pass in gender.male and 118

over here we can pass in gender.female. 119

So now look at how much better our code reads. When this card has a tap detected, we update the state 120

by updating and update the color and we tell it that the female card was pressed. And then it goes into 121

our updateColor method and it checks to see if the gender was male that was selected or if the selected 122

gender was female that was selected and then we carry out all of the rest of this code. 123

So enums are really useful when you have more than one option for a property. 124

So things such as car types or high-low medium settings or in our case genders male female etc. It's 125

really really useful to clean up our code and make it more expressive. But still our problem is that 126

our code is so wordy that it's actually painful to look at. 127

So in the next lesson, we're going to learn another thing that we get access to in Dart which are ternary 128

operators. And we're going to clean up all of this to reduce it down to maybe one or two lines of code. 129

So if you're ready for all of that magic, head over to the next lesson.