Original subtitles

0 Now in the last lesson we learn all about Dart enums. And our enums are making our code a lot easier 1

to read and it's starting to make a lot more sense. 2

But there's still so much code for achieving some functionality that's actually really simple which 3

is toggling a card's color. 4

Why do we need so much code? In order to reduce the amount of code but still have the same logic and 5

have the same behavior, 6

we need to learn about something else 7

that Dart gives us, which is the ternary operator. 8

Now previously we saw that we could use the IF, ELSE IF, ELSE statements to be able to perform a different 9

behavior depending on what the condition was. 10

And we talked about it in terms of a rail track right? Deciding which way to go depending on which conditions 11

were currently in play. 12

Now the Dart ternary operator is actually just a bit of what we call syntactic sugar to make something 13

that's actually very long and very wordy, say an if condition is true then do this else do this. 14

And there's a lot of brackets, there's a lot of keywords and there's a lot of lines of code to achieve 15

this. But if we used a Dart ternary operator instead, then it simplifies that into a single line where 16

we check the condition, if that condition is true then we carry out this. 17

And if the condition was false then we carry out this. And all that we need here is a question mark and 18

a colon. If that seems a little bit magical don't worry because we're going to head over to our trusty 19

DartPad to flesh it out and see how it works. 20

So let's say that in our main function we have a new variable and it's of type boolean, so it can be 21

true or false. 22

And let's give it a name. 23

Let's say that we're trying to track to see if jackBauerIsAwesome, which obviously is true. 24

So if anybody doesn't watch the show 24 then just ignore me. 25

Just pretend that this is a normal boolean variable. So you can just change this to a different variable 26

if you want, 27

say durianIsAwesome. 28

It doesn't really matter. 29

It's simply just a variable that can be true or false. 30

Now at some point in our program maybe this gets changed to false or maybe it gets changed true, 31

so we need to check for it using an IF statement, 32

right? 33

We might say something like if jackBauerIsAwesome 34

then if that's equal to true, then maybe we would want to print 35

'That's great.' 36

Or else if that's not true maybe we want to print 37

'Oh no.' 38

And let me just make sure I've got all the quotation marks where it's needed and escape that quotation 39

mark there. 40

So now if we run our code, it will print 41

that's great because jackBauerIsAwesome is equal to true. 42

And we check to see if that is indeed the case. 43

And so it falls into these brackets and it prints 44

'That's great.' 45

So this is classic 46

IF ELSE statement behavior. Now we can cut down all of these lines of code into a single line just by 47

using a ternary operator. And in order to do that the first part that comes is the condition that we're 48

checking for. 49

So we're saying jackBauerIsAwesome is equal to so double equals remember checks to see if the left 50

hand side is equal to the right hand side. 51

And if this is true, then what we'll do is print 52

that's great. 53

And we add a question mark to say that this is what we're checking for. 54

Well if that is true then we're going to print that is great. 55

But if that is false, then we're going to add a colon to say this is what we should do 56

if it was false. 57

So we're going to print oh no. This line of code does exactly the same thing as all of these lines of 58

code. 59

And I can comment that out and hit run to just confirm to you that it's exactly what happens. 60

And if I change this to false, then we should now be triggering this part and it will print 'Oh no'. Pretty 61

cool right? 62

Cutting down on a lot of code. 63

Now the first time when you see this in the wild, it can be a little bit confusing because it's not quite 64

as laid out as all of this. Now, 65

we can also cut down this line even further because the computer will look for all the parts before 66

the question mark to see if it's equal to true. 67

So we don't actually have to check if it's equal to true. 68

It's the same as in here in the IF statement. 69

We don't actually need that equality check. As long as this has a value of true, then it will trigger 70

this part, but if it has a value of false it will trigger this part. Now you always want to avoid playing 71

code golf where the only goal is to cut down on the number of lines of code and to make things as short 72

in the number of characters as physically possible. 73

This is an actual game, code golf, but that's not really the goal. 74

Most cases you want to make sure that your code is succinct but it's still expressive. 75

It still shows what's actually going on. 76

So whenever you're choosing between whether if I want to just cut down the lines of code or whether 77

if I can cut it down and make it clearer and easier to read and less confusing, then that's always what 78

you want to choose. 79

So we're not just doing it to cut down on the number of lines of code. 80

Now what we can also do is use the same comparatives that we can use in our IF statement using our ternary 81

operator. 82

So let's say that we create integer called myAge and let's say it's 12. 83

Don't worry I'm not 12. 84

It's fine. But if we wanted to say create a boolean that is called canBuyAlcohol, and we want to assign 85

it a value of true or false, depending on the value of my age then we can also use a ternary operator 86

here on the right hand side. 87

So we could say something like if myAge is greater than 21 ? 88

So we're going to check to see if this condition is true. 89

Well if that is the case, then we're going to set canBuyAcohol to true. 90

But if that is not the case, then we're gonna set it to false. This is something that the IF and ELSE statements 91

can't do. We can't put down multiple lines of code on the right hand side of an equal sign. 92

But because a ternary operator is simply just a one line expression, then we can in this case. 93

So if I go ahead and print canBuyAlcohol, then you can see that while my age is equal to 12 we will 94

get false and if I change this to a little bit larger, then you can see that we get true. 95

So we're basically assigning this value to this variable depending on this condition. 96

And we're doing this all by using our ternary operator. 97

So in most cases, this is what you will see happen. 98

So this is super useful when we need to check something 99

and depending on that check, we give our variables a different value to work on. Back to our code, 100

it's again challenge time. And this challenge is a little bit harder but essentially I want you to apply what 101

you've just learned about the ternary operator and I want you to get rid of this function. Instead simply 102

use a ternary operator to check in place right here where we have our color and to check if the condition 103

is that the maleCard is selected then we should give it an active color but if the female card was 104

selected, then the color should be an inactive color and it should be the opposite over here. 105

So we should have exactly the same functionality as what we've got right now 106

but without the need for this function. And you might need to add some custom variables you might need 107

to change the set state a little bit and you definitely need to use a ternary operator here to check 108

for which value color should be. 109

So it's a little bit of a harder challenge but I think you can do it. Pause a video and give it a go. 110

All right. 111

So first things first. 112

I said we're going to delete this function. 113

I'm just going to comment it out for now. And we won't really need this, 114

but instead we're going to create a new variable that's going to hold a gender and it's going to be 115

called selectedGender. 116

And it's going to start out being null, because no gender is selected to begin with. 117

But when the male card is pressed or when the female card is pressed, we're going to change the value 118

of the selected gender. When this card is selected, the select agenda is going to be equal to gender. 119

male. 120

And when this card is selected, the selected gender is going to be gender.female. And we're able to 121

write this expressive really clear code all because of our enum that we have. 122

And that's how we're able to have this property that's holding a gender value rather than just an integer 123

or something arbitrary. 124

So now that we're able to set which gender was selected and keep track of that value using our variable 125

called selectGender, then we can now address how we change the color of the card. 126

So we know that we can use our ternary operator as a way of evaluating a condition and assigning a value. 127

In this case for our male card, 128

we could check to see if the selectedGender is equal to gender.male. Then in that case the color of 129

our reusableCard should be the activeCardColor. 130

But if this was not the case i.e. if selectedGender equals male is false, then we should change it to 131

the inactiveCardColor. And in our reusableCard for our female card, 132

the opposite is true. 133

So we're going to check to see if the selectedGender is equal to female. Then in this case, we're going 134

to change this reusable card to have a color of the activeCardColor but otherwise i.e. if the male 135

gender was selected and this was false, then we would change it to the inactiveCardColor. 136

Now this also has the benefit when our app first starts out, 137

gender has no value. 138

So both of these statements will evaluate to false. selectedGender is not gonna be equal to male 139

and it's also not going to be equal to female. 140

So both cards will start out with the inactiveCardColor, which is exactly what we want now. 141

I'm going to go ahead and delete all of this code and now it's replaced by just these few lines of code. 142

Super simple, super easy. 143

And we're able to do this all because we're able to evaluate for an expression and assign this color 144

property a different value depending on that condition all in the same line because we're able to use 145

a ternary operator now instead of having to rely on IF and ELSE. Let's go ahead and test it out. 146

So I'm going to click on hot restart so that we reset the state of our app to the very beginning. 147

So that means that this gender, selectedGender is going to start out being null, which means both our cards 148

are going to be inactive. But as soon as I select one of the cards, it becomes the active color. 149

And if I select the opposite card, then it'll will deactivate that card. 150

So we have exactly the same functionality and it's created using just five lines of code.