All language subtitles for 15. Designing the Result Page

All right. So most of our input page is now complete and all of the components now work on this page
1

as expected.
2

Now there's just a couple of styling things to tidy up.
3

For example at the bottom here, we've got this calculate button and ideally we'd like to maybe format
4

that text to make it look a little bit better.
5

So let's go ahead and add a style to this.
6

And of course we're going to create it as a constant in here.
7

So I'm going to create a new const called kLargeButtonText style or you could call it anything
8

you like.
9

And it's going to be a text style widget.
10

And I'm going to set the font size as probably 25 and the font weight as bold.
11

And now I'm going to apply this constant to my text here.
12

So k It was LargeButtonText.
13

All right let's check that out.
14

So that looks a lot better.
15

And now all I need is to center my text into that container so that it's right in the middle here rather
16

than all the way to the left.
17

Now there's just one last thing which is our calculate text widget is just a little bit too close to
18

the bottom.
19

It would be nice, especially on an iPhone where we know that this is an interactive area,
20

it would be nice to bring that word up a little bit so that the user target area is a little bit higher
21

so they don't accidentally quit the app.
22

So in order to do that, we can add a little bit of padding to our container. And we're going to add some
23

padding that only adds it to the bottom.
24

And I'm going to put 20 pixels of padding here.
25

So now when I hit save, you can see it pushes it right up so that it's actually properly within the safe
26

area.
27

And that's pretty much our input page complete now.
28

So we're ready to move on to the next page in our application which is the result page.
29

So that's what we're going to be doing mostly in this lesson and we're going to be building it out so
30

that it can look like the one that we have in our demo here, where we have a card and we have the results
31

and we have another button to head back so that we can recalculate our result as necessary.
32

We've already created a result page that looks really really simple. And we can get to it to look at
33

it by clicking on the calculate button.
34

So we don't actually really need this text in the middle.
35

That was just to make sure that we can tell that this is the second screen.
36

But what we do need are all of the components that's going to make up this page.
37

So let's go ahead and build it out.
38

Firstly it's going to be a top-to-bottom vertical layout.
39

So I'm going to add my column as usual, and my column is going to be spaced out evenly.
40

So I'm going to go for a space evenly for my main axis alignment.
41

And if you forgot about what that does, just hit CONTROL + J or CONTROL +
42

Q On Windows and it tells you exactly what it is that this particular selection will do.
43

Now we're ready to add our children to our column. And the first child is going to be an expanded widget
44

which is going to contain just a container. And our container is going to have a child that is a little
45

bit of text.
46

The text is just going to say the words 'Your Result'.
47

So if we hit save we can see that it just shows up as a little bit of body text.
48

So we're going to need to style it up a little bit.
49

Now while I'm going along creating the entire user interface for the second page, all that I'm doing is
50

just following along with the design that I'm seeing on this page. Although I've simplified it a little
51

bit so that we don't spend ages adding loads of little components, I still kept most of the design
52

consistent with what we see here.
53

Now if you want to simply create this design all by yourself then feel free to just use this screen
54

as your guide to create the design from scratch by yourself.
55

But if you want to follow along with me, then I'm gonna quickly style it out so that we have the same
56

code and we stay consistent with each other.
57

So now that I've added my text, I want to add a little bit of style. And when I'm adding a style, it's
58

easier to simply just add it to my constants because I might want to use it a little bit later on.
59

So let's add a little bit of style for that title.
60

So I'm going to add a const kTitleTextStyle and this is going to be a text style widget. And the
61

font size I'm going to set to quite large, maybe a 50 and then the font weight is going to be bold. All
62

right.
63

So now I can use this kTitleTextStyle in my result page as long as I import the constants file.
64

So let's go ahead and add that in.
65

All right.
66

So now that I've added this we can check it out and it should look a lot bigger like this. Let's go ahead
67

and add our next widget inside our column.
68

So after the expanded widget, I'm going to add another expanded widget but this one is going to be a
69

lot larger.
70

I want it to take up more space in this column so that it takes up maybe five times as much as this one
71

or this one.
72

And in order to do that, I'm going to use the flex property.
73

So by default all expanded widgets get a flex of 1,
74

so they're laid out evenly.
75

But in this case I'm going to give this one a flex of 5, so that it takes up more space. And the child
76

that's going to be in this expanded widget is going to be a reusable card widget which we can only get
77

access to if we import the reusable card widget.
78

So we're only adding in the files that we actually need.
79

So let's create our reusable card
80

and it has color as a required property.
81

So I'm going to put in the constant that's the active card color.
82

Let's check that out and make sure that it's taking up as much space as we want it to.
83

So at the moment this is taking up 1 times the available space on the screen,
84

and this is going to take up five times the height of this one.
85

Now I'm ready to add a card child to my reusable card.
86

And this is going to contain another column.
87

So it's gonna be a column inside a column.
88

And in this column, we have a main axis that is going to be again spaced evenly.
89

And we're also going to add a cross alignment that is going to center everything in the horizontal axis.
90

And then we're ready to add our children which is going to be some text widgets.
91

So the first text widget is going to be the result of the BMI, so we'll say overweight, normal or underweight.
92

And then the second text widget is going to be the actual reading rounded to one decimal place.
93

And finally we have an interpretation for their weight so that the user can actually understand what
94

this BMI means.
95

Let's go ahead and add our first text widget which is simply going to be a result.
96

So I'm gonna start out with just the string of maybe normal over here. And then we're gonna give it a
97

style which is going to be relatively large and I'm going to call it resultTextStyle.
98

So this is going to be a green color as I've picked it out from this particular design.
99

So the color is going to be a custom hex code and it's going to be 0xFF, so fully opaque and then
100

24D876. And you can see that it shows up as a nice bright limy me sort of green.
101

Now I've got my color down, I'm going to add some font size. Let's keep it about 22, should do.
102

And then the font weight is going to be again bold.
103

Forgot to add the k here
104

so let's just change that to kResultTextStyle.
105

All right.
106

So now we can go ahead and apply this to our results page right here.
107

So it's going to be the kResultTextStyle.
108

Let's check that out.
109

All right.
110

So it's looking pretty good. But our card is now shrunken to a very small size.
111

So if we want to stretch it out, all we have to do is add a cross axis alignment property and make it
112

stretch across the screen.
113

So now our card will take up as much width as it possibly can.
114

And in the center we've got that normal interpretation.
115

So this is the first text widget and the second one is going to be the actual BMI reading,
116

so it's going to be another text widget inside the column. And let's start this one out with a , I don't know,
117

18.3 or whatever number comes to your mind.
118

And it's going to be as a string rather than as a number because that's what we need inside the text
119

widget. And then we're going to style this one up as well,
120

and it's gonna go at the bottom here.
121

So this is going to be the kBMITextStyle and this is going to be quite large.
122

So we're going to change the font size to maybe about 100 just to make it super large and also change
123

the font weight to bold as well, just so that it has the biggest emphasis on the screen. So that's the
124

kBMITextStyle. And you can see it's absolutely massive.
125

You can't miss that when you head over to the screen.
126

Now all we need is the final text widget which is going to be the interpretation.
127

And in this case I'm just gonna write a little bit of 'Your BMI result is quite low.
128

You should eat more'.
129

And we're of course going to style this up as well.
130

So let's add a k
131

BodyTextStyle
132

and this is going to be a slightly smaller style so the font size is gonna be about 22 and we're not
133

gonna change anything else about it. So let's go ahead and add the KBodyTextStyle and if we hit save
134

right now, you can see that by default all text is aligned to the left.
135

So if we wanted to change the text alignment we have to do that inside the text widget.
136

So we'll check the text align and we'll will make it centered. And this way it goes right in the middle
137

so that it looks more consistent with our design. Now the final thing that we need is that button at
138

the bottom here telling the user that they can recalculate their BMI result if they think that they
139

inputted something wrong.
140

This is going to be exactly the same as the button that we had earlier which is the calculate button.
141

So instead of creating it from scratch again, let's go ahead and select the widget that we want to extract
142

and go into our Flutter outline
143

and it's also highlighted over here and you can see it the last one in our tree in our column.
144

So let's right click on it and extract our widget.
145

I'm simply going to call it the bottom button.
146

You can call anything else you like.
147

And we're going to click refactor.
148

So now it takes our bottom button out and we can delete that new keyword if it pops up for you.
149

If it doesn't, then it means the Flutter team updated the tooling and it's no longer using the earlier
150

version of Dart.
151

So the latest version Dart there is no new.
152

And then we're going to delete the the constructor for our bottom button and we're going to set it up
153

with a custom onTap and some custom text because these are the parts that will differ between the first
154

page and the second.
155

So let's go ahead and add some properties in here.
156

So we've got a final function that's going to be called onTap,
157

and we're also going to have a final string that's going to be the buttonTitle.
158

So now we can create our custom constructor which is going to be bottomButton
159

and this is going to take two inputs and both of them should be required because it's a button.
160

It probably needs some text and it probably needs to handle a tap.
161

So this.onTap and also add required this.buttonTitle.
162

Now we can go into our gesture detector and I'm going to simply cut out all of this because I'm going
163

to need it a little bit later on. And instead I'm going to use the onTap that gets passed in to the
164

bottomButton. And I'm also going to use the text that's passed in from the buttonTitle.
165

Now this is completely refactored.
166

We can go into here and add those properties in.
167

So we've got our button title which is going to be the word CALCULATE in all caps, and then we're going
168

to have onTap which is where I'm going to paste in everything that I had from before.
169

So it's that callback which pushes the next screen, which is the result page, onto the navigation stack.
170

And if you find it helpful, you can add some commas so that Dart will reformat it properly for you.
171

So now I'm going to take all of this out of my input page. And let's create a new Dart file and we'll
172

call it bottom_button and now I'm going to be have to paste in that entire class.
173

So let's add that into here.
174

And again import our material package so that everything works and also import our constants so that
175

we know what these colors and sizes and styles are.
176

And while I'm at it, I might as well separate out my round icon button as well just in case I need it
177

somewhere else too.
178

Doesn't make sense to keep it inside the input page and hold on to it there.
179

So let's create our round_icon_button and here I'm going to cut this out and paste it into this new
180

file.
181

Now we can again import our material package and that's all we need.
182

Now I can go into my import page and import the bottom_button.dart so that it knows what the bottom
183

button is, and also import my round_icon_button.dart file so that it knows what the round buttons
184

are.
185

So we have no more errors in this page and this entire page is now dedicated to the user interface and
186

the functionality of the inputs screen in our app.
187

If you want you can actually quite easily add a folder to organize your lib because as you can imagine,
188

as you create more custom components and more screens it can get a little bit messy. So you can go into
189

file, new and we can select new directory. And we can call this maybe components, and we can also create
190

a new one that is going to hold on to our screens so we'll call this one screens.
191

And now we can move our input page and our result page into screens and make sure that you keep the
192

search for references checked so that everything gets moved along correctly.
193

And we're also going to move our components,
194

so the bottom button, the icon content, the reusable card and round icon button into our components
195

folder just so that everything looks a lot neater.
196

We've got components,
197

we've got our screens but we've also got some errors. And the errors are because it no longer can see
198

constants in the same folder
199

right?
200

Whereas previously, the bottom_button.dart and the constants, they were all inside the same folder.
201

Now it's actually at a different level.
202

So all you have to do is delete that and retype it.
203

So start out with constants and we can search for it and we'll be able to find it inside our package
204

bmi_calculator/constants and now all your errors will go away.
205

So let's go ahead and copy this and replace it everywhere where there's an error for finding the constants
206

file and even in our screens we've got also the same issue up here.
207

We've got our icon content that is now moved inside the components folder,
208

the reusable card that's been moved
209

so we have to restructure all of these
210

and also do the same for all of the other places where we're using components.
211

So now we no longer have any errors with our imports and all our code will work just fine.
212

So the final one is our results page.
213

So let's go ahead and add the location of our constants and also our reusable card.
214

All right.
215

So now that we've refactored and tidied everything up, it's now time to actually add in that final component
216

into our column here.
217

So after that last expanded widget, we're going to add that bottom button.
218

So again we have to import that bottom button that's inside our components folder, and we'll be able
219

to use it down here to add a bottom button widget.
220

And we're going to add a button title which is going to say RE-CALCULATE.
221

So a little bit different
222

so it indicates that we go back. And then we're going to have a onTap which is going to have a callback.
223

Now when the user taps on this bottom button, what we want to happen is to pop off this second screen,
224

this result screen, and go back to this previous screen so that they can add new inputs and recalculate.
225

So as we saw earlier when we learned about navigation and route, it's really really simple to destroy
226

and pop off the screen that's at the very top.
227

All we need to do is write Navigator.pop and pass in the current context.
228

So now if we hit save and we calculate our BMI, we click on recalculate,
229

we can go back to the input screen. The very last thing that we're going to do is simply to just tweak
230

this top text widget just so that it comes down a little bit closer to the card and have a little bit
231

of margin from the left.
232

So let's go into that container widget and let's go ahead and add some padding, maybe around 15 of padding
233

so that it comes away a little bit from the top and the left. And then I'm also going to add some alignment
234

just so that it goes down a little bit maybe down to the bottom left.
235

So now let's hit save.
236

And now it looks a lot more coherent. It's closer to the card and further away from the top and it looks
237

like it's all grouped nicely together.
238

Now that we have pretty much all of our design done both for the input page as well as for the result
239

page, there's only one thing that's missing and that's some actual functionality. The actual ability to
240

calculate the BMI.
241

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