Original subtitles

0 Now that all of our design is complete, we're ready to actually write the functionality. 1

And as I mentioned in the beginning, the design is really the hardest part of this app and the functionality 2

of actually calculating the BMI is in fact the easiest. 3

Let's get started by creating a new Dart file which is going to contain the functionality of calculating 4

the BMI. 5

So let's call it maybe the calculator_brain. And in this file we don't need any material components, but 6

what we are going to create is a new class. 7

And it's going to be called the CalculatorBrain. And this class is going to have two properties. 8

We're going to pass it a height which is going to be an integer 9

and we're also going to pass it a weight. Now the way that we're gonna pass over these properties is 10

of course when we construct the calculator brain. 11

So let's create a constructor with the height and the weight. 12

So now that we have a constructor, we'll be able to supply the values for the height and weight when 13

we create a new object from the calculator brain. And we can now start writing some of the functionality. 14

The first thing we'll need is to be able to calculate the actual BMI. 15

Now the BMI stands for the body mass index. And it's a way of normalising somebody's weight against their 16

height. 17

So the formula for calculating the BMI is the mass or weight in kilograms divided by the height in meters 18

squared. 19

But because our height is currently in centimeters, so we might have to do a little bit of adjustment here. 20

Let's go ahead and create our function which is going to return the BMI as a string and we're going 21

to call it maybe calculateBMI. And this is going to take no inputs because we'll be able to really have 22

access to everything we need height and weight when the calculator brain is initialized. 23

But it is going to do some work and the work that it's going to do is it's going to calculate the BMI 24

which is going to be a double. And it's going to record the BMI and it's going to be equal to the weight 25

which is already in kilograms divided by the height squared. 26

So as we saw earlier, the easiest way of squaring a number is by using the Dart math library. 27

So let's import that so that we can use the power function which takes a number and an exponent. So we're 28

able to provide the height and then we're able to provide the power, which in this case, is to to be up 29

to square the height. 30

Now remember I mentioned earlier that our height is in centimeters. 31

So in order to convert it to meters, we have to divide it by 100. 32

So now we have our BMI calculated from this super simple formula, 33

we can now use it and convert it into a string. 34

So at this point in time, the BMI is going to be a super long value because we said it's a double. Now 35

all that we want in our app is actually just a single decimal place. 36

So 18.something but not like a million lines long because it's so large it's gonna go off 37

the screen and nobody needs that degree of accuracy. In order to convert our double into a single decimal 38

place and also convert it into a string, 39

there's a really convenient method. So we can write BMI.toStringAsFixed and this returns a decimal 40

point string and we can specify how many decimal places we want as the input. 41

So let's use that method and say that we only want one decimal place and we can output this value using 42

the return keyword. 43

So now our calculateBMI is able to calculate the BMI based on the weight and the height and it's also 44

able to convert it to a single decimal point value and return it as a string. 45

The next thing that we want is to be able to provide a result based off that BMI. 46

So we're going to create another method that is going to return a string which is going to be the result 47

and we're gonna call the method getResult. 48

So again it takes no inputs but it's going to check inside this method if the BMI is greater or equal 49

to 25 in which case it will maybe return the words Overweight. 50

And then it's going to check else if it's not greater than 25, 51

well then is it maybe greater than 18.5. 52

Well in that case then the results should be normal. 53

And finally for all the results that are lower than 18.5, we're simply going to return 54

Underweight. 55

Now these interpretations are based off most of the common BMI charts which you can take a look at on 56

Wikipedia or elsewhere if you wish. 57

So at the moment, we don't have access to BMI though which is why I'm getting this error. 58

It doesn't know about BMI because the BMI that's calculated in here is limited to these curly braces. 59

It's only visible locally inside here. 60

But if we wanted to get access to it, we need to make it visible to this method. 61

So let's go ahead and create a private property up here. 62

So we're going to create it as a double and it's going to be a private variable. So we're going to add 63

the underscore beforehand and it's going to be equal to nothing to begin with. 64

And then when we calculate our BMI, we're going to assign it to that value and then we can return it 65

as the string as well. 66

And we're now able to use it in all the places where we need that BMI. But remember because this is a 67

private value, we won't be able to access it from any other class other than the calculator brain because 68

frankly it's nobody's business trying to get access to the BMI or trying to change it. If they need it 69

they can get it through this method which we know only returns it in the way that we want it to, which 70

is a single decimal point. But inside our CalculatorBrain we now have free access to it and we can use 71

it to calculate the result but we can also use it to give an interpretation. 72

So let's create another method called getInterpretation and this is going to perform the same three 73

checks. 74

So I'm just going to copy and paste it in here. 75

But instead of just returning overweight, normal, underweight, we want to be able to give the user a little 76

bit of feedback about what their weight means. And maybe a little bit of advice if you really wanted 77

to. To save you from watching me type for an hour, I'm simply going to copy and paste some interpretations 78

that I've written earlier. 79

You can either use these ones or you can make up your own. It's your app so do it your way. 80

But now we have three methods inside our calculator brain, one that will give us the BMI, one that will 81

give us the results of the BMI and one that will give us an interpretation of the BMI. 82

So we're now ready to go and we're ready to use that class CalculatorBrain. 83

So let's go ahead and import the calculator brain into our current file and we can collapse all of those 84

imports after we're done. And the time when we need it is the moment when the user clicks on the calculate 85

button. 86

So inside the onTap is where we're going to initialize a new calculator brain object. And I'm just gonna 87

call it calc to keep it short. And it's going to be initialized using the constructor that we built earlier 88

on. 89

So it's going to expect a height, which will be the height that we got from our slider here, 90

and also the weight that we've got from our input page as well. 91

So let's set weight equal to the local weight. 92

So now that we've created our calculator brain and we can now get the calculation for the BMI, get the 93

interpretation, get the result, we want to be able to pass that over to the next page which is the result 94

page. 95

So if we go over to the result page, at the moment it has no properties that we can access from the outside. 96

But in order for us to pass some data over when we navigate over here, we have to create some of those 97

properties. 98

So let's create a final property that is going to be called bmiResult and this is going to be a string. 99

And then let's create another one that's going to be called the resultText. 100

And finally we'll have one that's going to be called the interpretation. And again we have our final 101

properties which will need initialization. 102

So let's go ahead and create our results page constructor and I'm gonna mark all of them as required 103

because frankly in order to load up the results page and make it not look weird, 104

we have to make sure it has both the BMI result, 105

the result text as well as the interpretation. 106

So let's mark all three as required. 107

We've got this.interpretation, 108

this.bmiResult and this.resultText. 109

So now when we create our results page in the moment when we want to navigate over, we can now pass over 110

the values that we get from our calculator brain. 111

So we've got three properties that we can initialize. 112

One is the BMI result, 113

another is the result text 114

and finally we've got our interpretation. 115

So the BMI result is going to be equal to calc using the calculator brain to calculate the BMI. 116

And remember this will return a string which is going to go straight into that property BMI result over 117

here and we're going to be able to use it inside our build method. 118

Now the next one is going to be calculated using the getResult method and the final one is going to 119

rely on the getInterpretation method. 120

So now that we've got all those strings from our calculator brain, we can go ahead and use it in our 121

build method. 122

So instead of having these hardcoded piece of text, we can go ahead and actually add the result text, 123

the BMI results and also the interpretation. 124

Now the final thing I'm going to do just to keep our style consistent with the one here, is I'm going 125

to capitalize all the words for the result text here. And as always there's always a simple way of doing 126

this. 127

And the one in this case is called toupperCase and this simply turns all the characters in the string 128

to uppercase which is what we need. Now, 129

I'm going to stop my app and I'm going to run it from scratch so it starts from the beginning. 130

So now let's test out our BMI calculator. 131

We know from coding it up and also from Wikipedia that the gender doesn't really matter. But we might 132

be using it in another part of our app, so we can select our agenda and it will activate our cards. And 133

we can also select our height so my height is 180 and let's adjust our weight and let's adjust our age 134

and go ahead and click calculate. 135

So it now calculates my BMI, gives me a result telling me that it's normal, and it tells me an interpretation 136

of my BMI. My BMI is rounded to one decimal place and it's displayed as this giant number. 137

Now if we wanted to try it again with maybe a little bit lower height, a little bit more weight, let's 138

click calculate and you can see we get a different result and a different interpretation. 139

In this module, we've learnt a lot of things and it might be worth reviewing some of those key concepts 140

especially if you're new to Dart programming. But I hope you had fun building this beautiful BMI app with 141

me and I hope you're inspired also to take your Flutter to designs to the next level using all the various 142

ways of customizing widgets for your UI designs. 143

So that's all from me in this module. 144

I see on the next one.