Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,690 --> 00:00:00,990
All right.
1
2
00:00:01,020 --> 00:00:07,890
So in this lesson we're going to talk about routes and navigation in Flutter. And these are ways for
2
3
00:00:07,890 --> 00:00:15,120
us to be able to have multi-screen or multi-page apps and not something that's limited to just a single
3
4
00:00:15,120 --> 00:00:15,940
page.
4
5
00:00:16,140 --> 00:00:20,260
And in order to do that we need to know about routes and navigation.
5
6
00:00:20,670 --> 00:00:23,700
So in Flutter there's a little bit of terminology here.
6
7
00:00:23,880 --> 00:00:30,750
When we talk about routes, it's actually synonymous with screens and pages. And so whenever I'm talking
7
8
00:00:30,750 --> 00:00:36,270
about routes just think a way of getting to a screen or a page in your app.
8
9
00:00:36,270 --> 00:00:39,440
Now we have different routes in real life.
9
10
00:00:39,450 --> 00:00:45,420
So if I wanted to go from home to a restaurant I might take one route,
10
11
00:00:45,420 --> 00:00:47,190
so that's the restaurant route.
11
12
00:00:47,190 --> 00:00:51,740
But if I wanted to go to the airport, then I would take the airport route
12
13
00:00:51,810 --> 00:00:52,540
right?
13
14
00:00:52,620 --> 00:00:55,370
And this is the same with our apps.
14
15
00:00:55,440 --> 00:01:02,550
If I wanted to go to a particular screen, say screen 1, I would need to trigger the screen 1 route.
15
16
00:01:02,560 --> 00:01:11,170
So this is how we organize multi-page multi-screen apps in Flutter. So for every single screen that you
16
17
00:01:11,170 --> 00:01:18,880
have in your app, you should have a tour guide, or in this case a Flutter navigator, that takes you on
17
18
00:01:18,880 --> 00:01:28,460
each of these routes to see each of these screens. So if you head over to our repo here under londonappbrewery
18
19
00:01:28,460 --> 00:01:34,920
/Navigation-Flutter-demo which all of course linked to in the course resources,
19
20
00:01:34,980 --> 00:01:38,610
we've got a simple Flutter app here that I want you to clone.
20
21
00:01:39,000 --> 00:01:47,550
So go ahead and copy the URL and go into Android Studio and create a new project from our version control.
21
22
00:01:47,580 --> 00:01:52,290
So we're gonna select Git, and then we're going to paste this in here and then save it anywhere you wish.
22
23
00:01:52,290 --> 00:01:58,110
So clone and we should we have to open up that demo project that I created.
23
24
00:01:58,110 --> 00:02:06,150
Run as usual. You'll get dependencies and go into the Navigation-Flutter-Demo library to see the four files
24
25
00:02:06,180 --> 00:02:08,350
that we've really created for you.
25
26
00:02:08,550 --> 00:02:11,070
Now the main.dart file is not very exciting.
26
27
00:02:11,070 --> 00:02:17,760
All it does is it returns a material app that has a home that starts at Screen 1.
27
28
00:02:17,790 --> 00:02:24,360
So let's open up screen 1 and you can see all that has is an app bar that's red, has the name screen 1
28
29
00:02:24,360 --> 00:02:31,770
and a button which says go forwards to screen 2. So Screen 2 is pretty much the same story but
29
30
00:02:31,770 --> 00:02:37,200
it has a blue app bar and has a button that says go back to Screen 1.
30
31
00:02:37,320 --> 00:02:43,710
So if we go ahead and run our app, you can see as promised Screen 1 is pretty simple. It's just got a
31
32
00:02:43,770 --> 00:02:45,520
app bar and a button.
32
33
00:02:45,540 --> 00:02:52,560
Now at the moment when I click on this button to go to screen 2, nothing happens. And this is as expected
33
34
00:02:52,590 --> 00:02:57,180
because in the onPressed it's completely empty in that callback.
34
35
00:02:57,180 --> 00:03:03,260
So let's see how we can create a route to Screen 2 so that we can see it when we press on that button.
35
36
00:03:04,660 --> 00:03:10,210
Now Flutter has done a really good job of creating these cookbooks that we've been seeing along the
36
37
00:03:10,210 --> 00:03:10,830
course.
37
38
00:03:10,930 --> 00:03:18,500
And one of these tells you exactly how to create a navigation towards a new screen and how to go back.
38
39
00:03:18,550 --> 00:03:23,340
So we've already created our two routes, the screen 1 and screen 2.
39
40
00:03:23,380 --> 00:03:30,970
Now all we need to do is use something called navigator.push to add a route to the stack of routes.
40
41
00:03:31,660 --> 00:03:36,920
And what pushed us is very similar to when you push pancakes onto a stack right?
41
42
00:03:36,940 --> 00:03:40,920
You would just add them one by one on top of each other.
42
43
00:03:41,050 --> 00:03:42,920
It's a stack that goes on top
43
44
00:03:43,030 --> 00:03:49,300
and when you decide that you want to eat a pancake or you want to pop off a pancake, then it's the top
44
45
00:03:49,300 --> 00:03:50,650
one that comes off.
45
46
00:03:51,010 --> 00:03:56,290
So this is very similar to how our screens are organized in our app.
46
47
00:03:56,290 --> 00:03:58,690
They each go on top of each other
47
48
00:03:58,840 --> 00:04:04,990
and it's only when the top ones come off that we actually see the screen that's behind it.
48
49
00:04:04,990 --> 00:04:12,760
So let's try and do this pancake maneuver in code. Now as it says, we have to use the navigator.push
49
50
00:04:12,760 --> 00:04:21,820
method and we have to pass in two things, a context and also build a material page route and tell it
50
51
00:04:21,940 --> 00:04:29,790
where we want to go. Now the context refers to the build context.
51
52
00:04:29,790 --> 00:04:36,270
We saw this a little bit earlier on when we tried to copy the current slider theme. And to do that we
52
53
00:04:36,270 --> 00:04:41,310
said give me the slider theme of the current context.
53
54
00:04:41,310 --> 00:04:45,960
So that's the current build context and every widget has one.
54
55
00:04:45,960 --> 00:04:54,360
It's simply a way to figure out where in the widget tree this particular widget lives. And by passing
55
56
00:04:54,360 --> 00:04:59,630
in a context, it helps Flutter figure out where we are and where we need to go.
56
57
00:05:00,360 --> 00:05:05,000
So let's try and go ahead and push screen 2 onto screen 1.
57
58
00:05:05,220 --> 00:05:12,280
So inside the file called screen 1 inside the onPressed, we're going to call navigator.
58
59
00:05:12,720 --> 00:05:16,370
And remember every single stateless widget has one.
59
60
00:05:16,380 --> 00:05:22,830
As long as your scaffold is inside its own widget then it should be able to call navigator.push
60
61
00:05:23,370 --> 00:05:31,260
and the context is going to be the current build context of our screen 1 widget, which is the current
61
62
00:05:31,350 --> 00:05:35,250
location of our widget in the overall widget tree.
62
63
00:05:35,280 --> 00:05:40,920
So this is a small widget tree which is going to be embedded in a large widget tree when the app runs
63
64
00:05:41,310 --> 00:05:44,910
and the location of it is determined by this context.
64
65
00:05:44,910 --> 00:05:46,590
So that's the first thing it needs.
65
66
00:05:46,590 --> 00:05:53,670
The second thing it needs is a route. And we're going to be using that material page route to build the
66
67
00:05:53,670 --> 00:05:54,240
second route.
67
68
00:05:54,390 --> 00:06:03,490
So let's pass in the MaterialPageRoute and the builder is going to take a function.
68
69
00:06:03,630 --> 00:06:12,770
So it's going to be a function that has a input called context and then it has a body which is going to
69
70
00:06:13,040 --> 00:06:16,820
return whatever it is that we want to navigate to.
70
71
00:06:16,820 --> 00:06:27,270
So in this case, it's a new screen 2 object. And let's cap that off with a semicolon as well and add
71
72
00:06:27,390 --> 00:06:32,520
all of our commas so that Dart will be have to reformat our code.
72
73
00:06:32,580 --> 00:06:39,570
Now at the moment it doesn't know what screen 2 is even though we can see clearly that we have a screen
73
74
00:06:39,570 --> 00:06:45,950
2. And this is because we haven't yet imported the screen2.dart file.
74
75
00:06:46,020 --> 00:06:53,220
So now if we hit save and we check out our app, when I click on this button it takes me to screen 2.
75
76
00:06:53,910 --> 00:07:02,190
And it's even clever enough to know that for example on iOS when new screens come on top it comes
76
77
00:07:02,190 --> 00:07:05,500
usually from the right and it gets pushed on top
77
78
00:07:05,670 --> 00:07:07,460
in this kind of animation.
78
79
00:07:07,560 --> 00:07:15,000
So by using this material page route, it actually helps us automatically determine what kind of animation
79
80
00:07:15,000 --> 00:07:15,810
we need.
80
81
00:07:15,810 --> 00:07:22,040
So if you go into the Flutter inspector and you click on this button right here which toggles the platform.
81
82
00:07:22,080 --> 00:07:29,820
So now I have a Android looking screen even though I'm running it on an iOS simulator. And you know
82
83
00:07:29,820 --> 00:07:34,970
this because our title is right at the left corner of our app bar.
83
84
00:07:35,520 --> 00:07:41,310
And when I click on the button to go to screen 2, it actually pops it up from the bottom which is the
84
85
00:07:41,310 --> 00:07:43,450
difference between iOS and Android.
85
86
00:07:43,560 --> 00:07:49,740
And that's all prebaked-in by the Flutter team and all you have to do is use this material page route
86
87
00:07:49,820 --> 00:07:50,350
builder.
87
88
00:07:50,700 --> 00:07:55,110
So let's toggle our platform back to iOS or keep it on Android if you want.
88
89
00:07:56,580 --> 00:08:05,080
And now we're going to try and figure out how can we go back to screen 1 by pressing this button? Just
89
90
00:08:05,080 --> 00:08:12,190
as I said before, we can push and we can also pop. So pop is much easier because all it needs to do is
90
91
00:08:12,190 --> 00:08:19,390
to destroy the top screen so that we go back to the one that's below. Inside our screen2.dart,
91
92
00:08:19,390 --> 00:08:24,640
when the go back to screen 1 button is pressed, all we need to do is write
92
93
00:08:24,640 --> 00:08:30,360
Navigator.pop and it'll pop the current screen and destroy it.
93
94
00:08:30,370 --> 00:08:34,210
So now let's hit save and check it out. Go back to screen 1.
94
95
00:08:34,210 --> 00:08:35,780
That's exactly what it does.
95
96
00:08:35,880 --> 00:08:43,330
And we can now go between 1 and 2 as much as we wish. So that's pretty cool.
96
97
00:08:43,390 --> 00:08:48,640
But what if we had a more complex app with lots of routes?
97
98
00:08:48,640 --> 00:08:56,650
Say for example we had a screen 0 which had two buttons, one to go to screen 1 and the second button
98
99
00:08:56,890 --> 00:08:59,190
should take us to screen 2.
99
100
00:08:59,230 --> 00:09:06,200
Well we can achieve that quite easily using named routes. Again in the cookbook,
100
101
00:09:06,250 --> 00:09:08,360
it describes how we can do this.
101
102
00:09:08,380 --> 00:09:12,260
So let's go to the one which is navigate with named routes.
102
103
00:09:12,430 --> 00:09:17,560
And we've already created our two screens and now we have to define the routes.
103
104
00:09:17,740 --> 00:09:21,050
And we're going to do that where we create our material app.
104
105
00:09:21,100 --> 00:09:24,930
So in our case that's going to be in our main.dart file.
105
106
00:09:25,780 --> 00:09:32,320
So instead of having our home or our starting point as screen 1, let's change it to screen 0 so
106
107
00:09:32,320 --> 00:09:33,720
I can show you what it looks like.
107
108
00:09:34,210 --> 00:09:38,950
Now of course we have to import screen0.dart in order to be able to use it.
108
109
00:09:38,950 --> 00:09:41,400
So that's right screen0.dart
109
110
00:09:41,620 --> 00:09:42,750
and let's hit save.
110
111
00:09:43,480 --> 00:09:49,150
And now because we want to go right back to the beginning, we're going to click on a hot restart.
111
112
00:09:49,150 --> 00:09:53,740
So we go back into our main.dart and we go on to screen 0.
112
113
00:09:54,050 --> 00:09:58,230
So screen 0 has two buttons, go to screen 1 or go to screen 2.
113
114
00:09:58,270 --> 00:10:03,290
And when I click on them, it should take me to the correct route.
114
115
00:10:03,310 --> 00:10:05,770
How do I implement this?
115
116
00:10:05,770 --> 00:10:14,110
Well our material app also has a property called routes and this allows us to define what's called a
116
117
00:10:14,110 --> 00:10:15,100
map.
117
118
00:10:15,100 --> 00:10:18,540
So a map is similar to a dictionary
118
119
00:10:18,580 --> 00:10:20,450
in other programming languages,
119
120
00:10:20,620 --> 00:10:26,010
and it's basically a collection type. Just as lists are collections of items,
120
121
00:10:26,080 --> 00:10:27,730
maps are also collections.
121
122
00:10:28,060 --> 00:10:36,430
But the difference between maps and lists is that maps have a key and a value. Just as your dictionary
122
123
00:10:36,460 --> 00:10:41,470
has a term and the definition, maps also have the same thing.
123
124
00:10:41,500 --> 00:10:48,250
So we can define our route using this map construct which we're going to talk a lot more about in the
124
125
00:10:48,250 --> 00:10:48,970
next lesson.
125
126
00:10:49,690 --> 00:10:54,580
So we're going to see it in action but if you want to get a deeper understanding of Dart maps, keep going
126
127
00:10:54,580 --> 00:10:55,460
through this lesson.
127
128
00:10:55,600 --> 00:11:00,070
And once you get to the next lesson we're going to explain it in greater detail. But it's super simple
128
129
00:11:00,070 --> 00:11:00,490
to use
129
130
00:11:00,580 --> 00:11:04,430
and just looking at it, you'll probably already understand how it works.
130
131
00:11:04,450 --> 00:11:07,150
Let's look at how routes are defined.
131
132
00:11:07,150 --> 00:11:12,680
We can create a map which has a key and a value.
132
133
00:11:12,790 --> 00:11:20,200
So it means that when the route that is / is requested, we should build the first screen
133
134
00:11:21,250 --> 00:11:27,220
or when the route that's called /second is requested then we should build the second screen.
134
135
00:11:27,520 --> 00:11:28,840
So pretty simple so far.
135
136
00:11:29,290 --> 00:11:31,780
Now let's define that for our app.
136
137
00:11:32,200 --> 00:11:39,250
So let's go ahead and create a map first and we can do that just by opening a set of curly braces and
137
138
00:11:39,250 --> 00:11:46,570
hitting Enter. So inside here is going to be on a map and it's going to have some keys and some values
138
139
00:11:46,930 --> 00:11:48,550
and the keys and values will match up.
139
140
00:11:49,060 --> 00:11:51,730
So the key is the name of the route.
140
141
00:11:51,970 --> 00:11:55,300
So let's have a route that's just '/'.
141
142
00:11:55,570 --> 00:12:04,420
And then we add a call on to specify the value for that route and you can see that all route expect
142
143
00:12:04,690 --> 00:12:07,840
a function as the value of the map.
143
144
00:12:08,080 --> 00:12:13,450
So the string is going to be the ,in this case it's the name of the route. And the value is going
144
145
00:12:13,450 --> 00:12:19,390
to be a function that takes a context as an input and returns a widget.
145
146
00:12:19,810 --> 00:12:27,100
So in our case it's going to take a context as the input and it's going to return a widget which is
146
147
00:12:27,100 --> 00:12:32,770
going to be the widget that we want displayed when this route is requested.
147
148
00:12:32,770 --> 00:12:39,550
So the one that we want is going to be screen0 for when the route is /.
148
149
00:12:39,550 --> 00:12:46,350
Now then we can go ahead and define some more routes . Let's have a /first.
149
150
00:12:46,660 --> 00:12:48,340
And this is the key.
150
151
00:12:48,670 --> 00:12:57,260
So the value for it is going to be another context that returns maybe screen 1 in this case.
151
152
00:12:57,280 --> 00:13:04,800
So now we've associated the name of / with going to screen 0 and /first
152
153
00:13:04,810 --> 00:13:06,780
with going to screen one.
153
154
00:13:07,030 --> 00:13:12,790
Now all we need to do is to add one last one which is /second.
154
155
00:13:13,240 --> 00:13:21,150
And this should go to the second screen of course, so screen 2.
155
156
00:13:21,250 --> 00:13:29,740
And we have to add this into our imports to tell it about this screen2.dart file.
156
157
00:13:29,740 --> 00:13:33,240
Now that we've created all of our named routes.
157
158
00:13:33,430 --> 00:13:35,090
Let's go ahead and use it.
158
159
00:13:35,260 --> 00:13:42,660
Now you can see that we normally use a home property for our material app to define where the app should
159
160
00:13:42,660 --> 00:13:45,470
start, which screen it should display first.
160
161
00:13:45,930 --> 00:13:50,440
But instead of this we could also use a property called initialRoute.
161
162
00:13:50,610 --> 00:13:56,970
And we can simply just give it a string to tell it which route we want out of all the ones that we've
162
163
00:13:56,970 --> 00:13:57,980
defined.
163
164
00:13:58,080 --> 00:14:05,010
So let's tell it to start off at screen 0 by giving it just the string that is /.
164
165
00:14:05,460 --> 00:14:13,970
So now if I go ahead and hot restart my app, it should look exactly the same because it's still going
165
166
00:14:13,970 --> 00:14:16,300
to go to screen 0.
166
167
00:14:16,320 --> 00:14:25,530
Now be careful though because if you have an initial route and you also have a home property defined,
167
168
00:14:25,950 --> 00:14:30,420
so let's add what we had before which is screen 0,
168
169
00:14:30,480 --> 00:14:33,610
now these two will conflict with each other.
169
170
00:14:33,690 --> 00:14:37,650
And if I hit save right now, you can see my app will crash.
170
171
00:14:37,890 --> 00:14:41,030
And it tells me that only one of them can exist.
171
172
00:14:41,280 --> 00:14:46,800
So I can't define both a start and a beginning. That doesn't make any sense in code.
172
173
00:14:46,800 --> 00:14:51,270
So let's delete the home whenever we're using an initial route.
173
174
00:14:51,270 --> 00:14:54,910
And if you want you can just use home instead of initial route,
174
175
00:14:54,930 --> 00:14:59,060
but given that we've got all the routes define already it makes sense to do it this way.
175
176
00:14:59,060 --> 00:15:02,250
It's much easier.
176
177
00:15:02,430 --> 00:15:10,230
So now let's try and use these roots inside our screen0.dartat the place where we want to navigate
177
178
00:15:10,230 --> 00:15:11,500
to screen 1.
178
179
00:15:11,520 --> 00:15:19,830
We can do this using unnamed roots by simply saying Navigator.push but instead of pushing
179
180
00:15:19,830 --> 00:15:24,390
and creating a route, we can push a named route instead.
180
181
00:15:24,390 --> 00:15:32,100
So in this case we have our current context of where we are in the app but we also are going to define
181
182
00:15:32,190 --> 00:15:40,440
the route name which is just the string that we created here. So we can simply write /first
182
183
00:15:40,680 --> 00:15:48,240
if we want to go to the first screen and if we wanted to go to the second screen when we click on this
183
184
00:15:48,360 --> 00:15:56,070
second screen button, then we can say go to /second and this of course corresponds to the
184
185
00:15:56,070 --> 00:15:57,900
routes that we created in here.
185
186
00:15:58,290 --> 00:16:04,290
So it's going to look at the key that matches /first to figure out what it should do from
186
187
00:16:04,290 --> 00:16:05,250
the value.
187
188
00:16:05,250 --> 00:16:11,730
So now if we hit save and we check out our app, when I click on go to screen 1, it goes to screen 1.
188
189
00:16:11,940 --> 00:16:15,180
When I click on go to screen 2, it goes to screen 2.
189
190
00:16:15,210 --> 00:16:21,500
Now all of my buttons that use the navigator where I create the routes from scratch still work.
190
191
00:16:21,640 --> 00:16:29,970
So I can still go to screen 2 from screen 1. But now in my stack I have three screens: 0, 1 and 2, all
191
192
00:16:29,970 --> 00:16:31,740
stacked on top of each other.
192
193
00:16:31,860 --> 00:16:38,640
And if I keep clicking the back button, it'll take me all the way back to the beginning. So the navigator
193
194
00:16:38,670 --> 00:16:45,960
is a really easy way of going between screens and going between our routes. And as your app gets more
194
195
00:16:45,960 --> 00:16:50,550
complex you're probably going to have more and more routes and you're going to need complex ways of
195
196
00:16:50,550 --> 00:16:52,120
navigating between them.
196
197
00:16:52,140 --> 00:16:57,690
So I would say that if you have a very simple app with only two or three screens, then probably creating
197
198
00:16:57,690 --> 00:17:01,320
the route at the point where you need to is probably good enough.
198
199
00:17:01,320 --> 00:17:07,740
But if you have a complex app with four or more screens then it makes sense to list out all the routes
199
200
00:17:07,860 --> 00:17:14,310
in the beginning and make the navigation code much more expressive and easier to write in the actual
200
201
00:17:14,370 --> 00:17:16,420
screen.
201
202
00:17:16,790 --> 00:17:24,830
So now that you've learned all about routes and navigation then guess what, we need to create a new page
202
203
00:17:25,040 --> 00:17:26,680
and we need to navigate to it.
203
204
00:17:26,690 --> 00:17:32,510
So I'm going to right click on my lib folder and I'm going to create a new Dart file which is going to
204
205
00:17:32,510 --> 00:17:37,970
be called results_page and I'm going to hit
205
206
00:17:38,000 --> 00:17:46,880
OK to create my new results_page.dart I'm going to import my material package and we're going to
206
207
00:17:46,880 --> 00:17:49,420
create a very simple stateless widget in here.
207
208
00:17:49,820 --> 00:17:59,640
So it's gonna be called ResultsPage and here we're going to simply return a scaffold that contains
208
209
00:17:59,670 --> 00:18:06,120
a app bar which is simply going to have the title of BMI CALCULATOR.
209
210
00:18:09,760 --> 00:18:16,540
And it's also going to have a body which is just going to have a little bit of text that says hello,
210
211
00:18:16,930 --> 00:18:18,870
or whatever you want it to be.
211
212
00:18:18,940 --> 00:18:24,580
It's just so that we can confirm when we've navigated to this new page that we've actually got the code
212
213
00:18:24,640 --> 00:18:28,180
set up correctly. Now that we have our results page,
213
214
00:18:28,180 --> 00:18:35,440
we can go back to our inputs page and at the very last part where we have a container,
214
215
00:18:35,800 --> 00:18:41,950
we're going to give it a little bit of text. So we'll add a child that is a text widget and it's going
215
216
00:18:41,950 --> 00:18:48,840
to say CALCULATE. Now our container in order for it to receive taps,
216
217
00:18:48,840 --> 00:18:52,000
we have to wrap it with a gesture detector.
217
218
00:18:52,290 --> 00:18:59,330
And when it is tapped we're going to go ahead and create our route.
218
219
00:18:59,340 --> 00:19:07,310
Now the challenge is in your court. Implement what you've learned about route to navigation to be able
219
220
00:19:07,310 --> 00:19:13,950
to take the user from the first screen where we have all our inputs to the second screen when they click
220
221
00:19:14,010 --> 00:19:19,710
on that calculate button. Pause the video and try to complete the challenge.
221
222
00:19:23,220 --> 00:19:23,590
All right.
222
223
00:19:23,620 --> 00:19:29,260
So in this case we're only navigating between two screens so we're probably not going to create named
223
224
00:19:29,260 --> 00:19:37,570
routes. But we can instead use our trusty Navigator.push method. And we've got our context as the
224
225
00:19:37,570 --> 00:19:42,950
current context and the route is going to be a material page route.
225
226
00:19:43,660 --> 00:19:51,910
And in order to build it, we need to give it a function which takes a context as the input and it returns...
226
227
00:19:51,910 --> 00:19:58,900
So you could either use a set of curly braces and write return or remember that the shorthand way of
227
228
00:19:58,900 --> 00:20:06,100
doing this if you have a single line of code is just a fat arrow. So an equal sign an angle bracket. And
228
229
00:20:06,100 --> 00:20:15,210
we can return our ResultsPage. And it's not showing up because we don't yet have it imported.
229
230
00:20:15,210 --> 00:20:21,540
So let's import that at the top and we have our results_page.dart imported.
230
231
00:20:21,540 --> 00:20:29,500
So now if we hit save and we run our app, then you can see that when we click on the calculate button
231
232
00:20:29,500 --> 00:20:37,350
which is anywhere inside this pink area, it will take us to our second screen which has the word hello
232
233
00:20:37,420 --> 00:20:40,110
and the app bar of BMI CALCUATOR.
233
234
00:20:40,390 --> 00:20:45,880
And this is also a good point to point out that all of the hard work that we've did in defining the
234
235
00:20:45,880 --> 00:20:52,690
theme for our app is now carried through to our second screen as well with the same primary color and
235
236
00:20:52,690 --> 00:21:01,300
the same scaffold background color and text colors. Now that we're able to navigate between our pages,
236
237
00:21:01,300 --> 00:21:07,000
the only thing left to do is to update the styling a little bit more and to actually calculate the user's
237
238
00:21:07,000 --> 00:21:09,090
BMI and display it on screen.
238
239
00:21:09,580 --> 00:21:15,460
But as promised, in the next lesson we're going to do a deep dive on Dart maps so that you can learn
239
240
00:21:15,460 --> 00:21:21,970
a bit more about what all of these maps are that you're seeing in the namedRoute and how these key value
240
241
00:21:21,970 --> 00:21:23,940
pairs work in that.
241
242
00:21:23,980 --> 00:21:30,010
Now if you're already quite familiar with maps or dictionaries and how they look and how they work in
242
243
00:21:30,010 --> 00:21:35,950
Dart, then feel free to skip the next lesson and go to the lesson afterwards where we continue building
243
244
00:21:35,950 --> 00:21:37,280
out our app.
244
245
00:21:37,390 --> 00:21:39,520
But either way, I'll see you on the next lesson.
27891
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.