All language subtitles for 13. Multi-Screen Apps Using Routes and Navigation

All right.
1

So in this lesson we're going to talk about routes and navigation in Flutter. And these are ways for
2

us to be able to have multi-screen or multi-page apps and not something that's limited to just a single
3

page.
4

And in order to do that we need to know about routes and navigation.
5

So in Flutter there's a little bit of terminology here.
6

When we talk about routes, it's actually synonymous with screens and pages. And so whenever I'm talking
7

about routes just think a way of getting to a screen or a page in your app.
8

Now we have different routes in real life.
9

So if I wanted to go from home to a restaurant I might take one route,
10

so that's the restaurant route.
11

But if I wanted to go to the airport, then I would take the airport route
12

right?
13

And this is the same with our apps.
14

If I wanted to go to a particular screen, say screen 1, I would need to trigger the screen 1 route.
15

So this is how we organize multi-page multi-screen apps in Flutter. So for every single screen that you
16

have in your app, you should have a tour guide, or in this case a Flutter navigator, that takes you on
17

each of these routes to see each of these screens. So if you head over to our repo here under londonappbrewery
18

/Navigation-Flutter-demo which all of course linked to in the course resources,
19

we've got a simple Flutter app here that I want you to clone.
20

So go ahead and copy the URL and go into Android Studio and create a new project from our version control.
21

So we're gonna select Git, and then we're going to paste this in here and then save it anywhere you wish.
22

So clone and we should we have to open up that demo project that I created.
23

Run as usual. You'll get dependencies and go into the Navigation-Flutter-Demo library to see the four files
24

that we've really created for you.
25

Now the main.dart file is not very exciting.
26

All it does is it returns a material app that has a home that starts at Screen 1.
27

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

and a button which says go forwards to screen 2. So Screen 2 is pretty much the same story but
29

it has a blue app bar and has a button that says go back to Screen 1.
30

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

app bar and a button.
32

Now at the moment when I click on this button to go to screen 2, nothing happens. And this is as expected
33

because in the onPressed it's completely empty in that callback.
34

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

Now Flutter has done a really good job of creating these cookbooks that we've been seeing along the
36

course.
37

And one of these tells you exactly how to create a navigation towards a new screen and how to go back.
38

So we've already created our two routes, the screen 1 and screen 2.
39

Now all we need to do is use something called navigator.push to add a route to the stack of routes.
40

And what pushed us is very similar to when you push pancakes onto a stack right?
41

You would just add them one by one on top of each other.
42

It's a stack that goes on top
43

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

one that comes off.
45

So this is very similar to how our screens are organized in our app.
46

They each go on top of each other
47

and it's only when the top ones come off that we actually see the screen that's behind it.
48

So let's try and do this pancake maneuver in code. Now as it says, we have to use the navigator.push
49

method and we have to pass in two things, a context and also build a material page route and tell it
50

where we want to go. Now the context refers to the build context.
51

We saw this a little bit earlier on when we tried to copy the current slider theme. And to do that we
52

said give me the slider theme of the current context.
53

So that's the current build context and every widget has one.
54

It's simply a way to figure out where in the widget tree this particular widget lives. And by passing
55

in a context, it helps Flutter figure out where we are and where we need to go.
56

So let's try and go ahead and push screen 2 onto screen 1.
57

So inside the file called screen 1 inside the onPressed, we're going to call navigator.
58

And remember every single stateless widget has one.
59

As long as your scaffold is inside its own widget then it should be able to call navigator.push
60

and the context is going to be the current build context of our screen 1 widget, which is the current
61

location of our widget in the overall widget tree.
62

So this is a small widget tree which is going to be embedded in a large widget tree when the app runs
63

and the location of it is determined by this context.
64

So that's the first thing it needs.
65

The second thing it needs is a route. And we're going to be using that material page route to build the
66

second route.
67

So let's pass in the MaterialPageRoute and the builder is going to take a function.
68

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

return whatever it is that we want to navigate to.
70

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

all of our commas so that Dart will be have to reformat our code.
72

Now at the moment it doesn't know what screen 2 is even though we can see clearly that we have a screen
73

2. And this is because we haven't yet imported the screen2.dart file.
74

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

And it's even clever enough to know that for example on iOS when new screens come on top it comes
76

usually from the right and it gets pushed on top
77

in this kind of animation.
78

So by using this material page route, it actually helps us automatically determine what kind of animation
79

we need.
80

So if you go into the Flutter inspector and you click on this button right here which toggles the platform.
81

So now I have a Android looking screen even though I'm running it on an iOS simulator. And you know
82

this because our title is right at the left corner of our app bar.
83

And when I click on the button to go to screen 2, it actually pops it up from the bottom which is the
84

difference between iOS and Android.
85

And that's all prebaked-in by the Flutter team and all you have to do is use this material page route
86

builder.
87

So let's toggle our platform back to iOS or keep it on Android if you want.
88

And now we're going to try and figure out how can we go back to screen 1 by pressing this button? Just
89

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

to destroy the top screen so that we go back to the one that's below. Inside our screen2.dart,
91

when the go back to screen 1 button is pressed, all we need to do is write
92

Navigator.pop and it'll pop the current screen and destroy it.
93

So now let's hit save and check it out. Go back to screen 1.
94

That's exactly what it does.
95

And we can now go between 1 and 2 as much as we wish. So that's pretty cool.
96

But what if we had a more complex app with lots of routes?
97

Say for example we had a screen 0 which had two buttons, one to go to screen 1 and the second button
98

should take us to screen 2.
99

Well we can achieve that quite easily using named routes. Again in the cookbook,
100

it describes how we can do this.
101

So let's go to the one which is navigate with named routes.
102

And we've already created our two screens and now we have to define the routes.
103

And we're going to do that where we create our material app.
104

So in our case that's going to be in our main.dart file.
105

So instead of having our home or our starting point as screen 1, let's change it to screen 0 so
106

I can show you what it looks like.
107

Now of course we have to import screen0.dart in order to be able to use it.
108

So that's right screen0.dart
109

and let's hit save.
110

And now because we want to go right back to the beginning, we're going to click on a hot restart.
111

So we go back into our main.dart and we go on to screen 0.
112

So screen 0 has two buttons, go to screen 1 or go to screen 2.
113

And when I click on them, it should take me to the correct route.
114

How do I implement this?
115

Well our material app also has a property called routes and this allows us to define what's called a
116

map.
117

So a map is similar to a dictionary
118

in other programming languages,
119

and it's basically a collection type. Just as lists are collections of items,
120

maps are also collections.
121

But the difference between maps and lists is that maps have a key and a value. Just as your dictionary
122

has a term and the definition, maps also have the same thing.
123

So we can define our route using this map construct which we're going to talk a lot more about in the
124

next lesson.
125

So we're going to see it in action but if you want to get a deeper understanding of Dart maps, keep going
126

through this lesson.
127

And once you get to the next lesson we're going to explain it in greater detail. But it's super simple
128

to use
129

and just looking at it, you'll probably already understand how it works.
130

Let's look at how routes are defined.
131

We can create a map which has a key and a value.
132

So it means that when the route that is / is requested, we should build the first screen
133

or when the route that's called /second is requested then we should build the second screen.
134

So pretty simple so far.
135

Now let's define that for our app.
136

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

hitting Enter. So inside here is going to be on a map and it's going to have some keys and some values
138

and the keys and values will match up.
139

So the key is the name of the route.
140

So let's have a route that's just '/'.
141

And then we add a call on to specify the value for that route and you can see that all route expect
142

a function as the value of the map.
143

So the string is going to be the ,in this case it's the name of the route. And the value is going
144

to be a function that takes a context as an input and returns a widget.
145

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

going to be the widget that we want displayed when this route is requested.
147

So the one that we want is going to be screen0 for when the route is /.
148

Now then we can go ahead and define some more routes . Let's have a /first.
149

And this is the key.
150

So the value for it is going to be another context that returns maybe screen 1 in this case.
151

So now we've associated the name of / with going to screen 0 and /first
152

with going to screen one.
153

Now all we need to do is to add one last one which is /second.
154

And this should go to the second screen of course, so screen 2.
155

And we have to add this into our imports to tell it about this screen2.dart file.
156

Now that we've created all of our named routes.
157

Let's go ahead and use it.
158

Now you can see that we normally use a home property for our material app to define where the app should
159

start, which screen it should display first.
160

But instead of this we could also use a property called initialRoute.
161

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

defined.
163

So let's tell it to start off at screen 0 by giving it just the string that is /.
164

So now if I go ahead and hot restart my app, it should look exactly the same because it's still going
165

to go to screen 0.
166

Now be careful though because if you have an initial route and you also have a home property defined,
167

so let's add what we had before which is screen 0,
168

now these two will conflict with each other.
169

And if I hit save right now, you can see my app will crash.
170

And it tells me that only one of them can exist.
171

So I can't define both a start and a beginning. That doesn't make any sense in code.
172

So let's delete the home whenever we're using an initial route.
173

And if you want you can just use home instead of initial route,
174

but given that we've got all the routes define already it makes sense to do it this way.
175

It's much easier.
176

So now let's try and use these roots inside our screen0.dartat the place where we want to navigate
177

to screen 1.
178

We can do this using unnamed roots by simply saying Navigator.push but instead of pushing
179

and creating a route, we can push a named route instead.
180

So in this case we have our current context of where we are in the app but we also are going to define
181

the route name which is just the string that we created here. So we can simply write /first
182

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

second screen button, then we can say go to /second and this of course corresponds to the
184

routes that we created in here.
185

So it's going to look at the key that matches /first to figure out what it should do from
186

the value.
187

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

When I click on go to screen 2, it goes to screen 2.
189

Now all of my buttons that use the navigator where I create the routes from scratch still work.
190

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

stacked on top of each other.
192

And if I keep clicking the back button, it'll take me all the way back to the beginning. So the navigator
193

is a really easy way of going between screens and going between our routes. And as your app gets more
194

complex you're probably going to have more and more routes and you're going to need complex ways of
195

navigating between them.
196

So I would say that if you have a very simple app with only two or three screens, then probably creating
197

the route at the point where you need to is probably good enough.
198

But if you have a complex app with four or more screens then it makes sense to list out all the routes
199

in the beginning and make the navigation code much more expressive and easier to write in the actual
200

screen.
201

So now that you've learned all about routes and navigation then guess what, we need to create a new page
202

and we need to navigate to it.
203

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

be called results_page and I'm going to hit
205

OK to create my new results_page.dart I'm going to import my material package and we're going to
206

create a very simple stateless widget in here.
207

So it's gonna be called ResultsPage and here we're going to simply return a scaffold that contains
208

a app bar which is simply going to have the title of BMI CALCULATOR.
209

And it's also going to have a body which is just going to have a little bit of text that says hello,
210

or whatever you want it to be.
211

It's just so that we can confirm when we've navigated to this new page that we've actually got the code
212

set up correctly. Now that we have our results page,
213

we can go back to our inputs page and at the very last part where we have a container,
214

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

to say CALCULATE. Now our container in order for it to receive taps,
216

we have to wrap it with a gesture detector.
217

And when it is tapped we're going to go ahead and create our route.
218

Now the challenge is in your court. Implement what you've learned about route to navigation to be able
219

to take the user from the first screen where we have all our inputs to the second screen when they click
220

on that calculate button. Pause the video and try to complete the challenge.
221

All right.
222

So in this case we're only navigating between two screens so we're probably not going to create named
223

routes. But we can instead use our trusty Navigator.push method. And we've got our context as the
224

current context and the route is going to be a material page route.
225

And in order to build it, we need to give it a function which takes a context as the input and it returns...
226

So you could either use a set of curly braces and write return or remember that the shorthand way of
227

doing this if you have a single line of code is just a fat arrow. So an equal sign an angle bracket. And
228

we can return our ResultsPage. And it's not showing up because we don't yet have it imported.
229

So let's import that at the top and we have our results_page.dart imported.
230

So now if we hit save and we run our app, then you can see that when we click on the calculate button
231

which is anywhere inside this pink area, it will take us to our second screen which has the word hello
232

and the app bar of BMI CALCUATOR.
233

And this is also a good point to point out that all of the hard work that we've did in defining the
234

theme for our app is now carried through to our second screen as well with the same primary color and
235

the same scaffold background color and text colors. Now that we're able to navigate between our pages,
236

the only thing left to do is to update the styling a little bit more and to actually calculate the user's
237

BMI and display it on screen.
238

But as promised, in the next lesson we're going to do a deep dive on Dart maps so that you can learn
239

a bit more about what all of these maps are that you're seeing in the namedRoute and how these key value
240

pairs work in that.
241

Now if you're already quite familiar with maps or dictionaries and how they look and how they work in
242

Dart, then feel free to skip the next lesson and go to the lesson afterwards where we continue building
243

out our app.
244

But either way, I'll see you on the next lesson.