Flutter 25 - Routing and Navigation Video Lecture | Flutter: Build beautiful native apps in record time - App Development

hey everybody this is Brian welcome to
the 25th flutter tutorial in the last
tutorial flutter 24 we showed a couple
key concepts but one thing that we
really kind of drilled in on well how to
change a widget in the body of a
scaffold now that's actually not the
correct way to navigate around an
application it's just very simple way of
switching that widget out so one thing I
want to cover today is how to navigate
through an application now when I say
navigate what am I talking about
if you go to the flutter website and I
have to apologize I still have a cold so
if my voice cracks or I cough it might
get a little nasty but the goal of
flutter website routing and navigation
and read up on core concepts you'll need
to understand two main concepts a route
and a navigator a route is exactly what
it sounds like a route going from point
A to point B you're going to go from
your house to your friend's house how
are you getting there now let's see you
want to go back from your friend's house
back to your house how are you getting
there that's really what a route does
navigator actually takes those routes
and makes them do things makes your
application move from point A to point B
and you can see kind of a simple example
here and we're gonna build something as
always so we've got our little
application up and it does absolutely
nothing it's magnificent is that so
what we're going to do here is we are
going to make a new material app in that
material app we're just going to say the
title oops
I don't want clutter let's call it
navigation
now a couple things you should note
right off the bat we need to put our
routes here but our routes don't exist
yet so if you type routes it's gonna
want to know some things so we're gonna
say we need a comments that have a
period that's why that's freaking out on
us there and in there is where we will
put our routes but as I said they don't
exist yet we're getting to that point
now we need our home and for now we're
just going to say no let's build this
out here so first thing we want to do is
create a new and I like putting a
directory and I like saying screens but
you can kind of do this just really
however you want
we're gonna import the material Dart
all I know is I have had this call for
about a week my girlfriend gave it to me
and I am so so over this cold right now
it's just like it's one of those that
started like in your nose and then
started working its way down I like
didn't even have a voice yesterday it
was ridiculous
so if I sound horrible today I mean
yesterday was just really bad all right
so we've got our build method remember
whenever I say build means render so
we're gonna actually render something
onto the screen here we're gonna return
a new scaffold all right now in our
scaffold we're gonna say at bar
now we want a body and this is what
we're swapping out in our previous
tutorial here but this is the what we're
doing today routing a navigation is the
actual correct way to do it doesn't mean
you can't swap out I mean it works as
designed
it just means this is probably the most
efficient way especially when you start
getting to a lot of different things and
you'll see why here in just a bit
so we're gonna say edge in sets all so
30.0 just because I really like 32 and
then child NewsCenter
this is a pretty typical design pattern
here where you'll have a container for
your padding and then you're going to
Center something and then you'll have a
column and in the column you'll have a
series of widgets and in this case our
widgets are going to be a text box or
I'm sorry a text field not text field
just a text and a raise button alright
so we have our on pressed and what we
need to do here is we need to fill this
in a little bit now this is the actual
route and we're going to be working with
the Navigator so what we're going to say
here is make our anonymous function
navigator dot of because we want the
context that we're currently in think of
the context of it's like a context of a
conversation if I say I'm going out but
the context is I'm talking to my wife
well that might not be too well but if I
say I'm going out the context is to my
friends then hey that might be a good
thing
so really the context is what context is
the application currently looking at and
it gets really deep but basically what
it means is how is the application
currently running what is currently on
the screen and it gets really deep we're
not there yet so just kind of you know
drink the kool-aid and just agree for a
moment so what we're doing here is we're
saying when the raise button is pressed
the navigator of the current context is
going to pushed named now what that
means is there's push and pop push means
like you're going to push something onto
a table you're gonna push a new screen
out there pop means you're gonna pull it
away why is it called push and pop well
those are actually you know legacy terms
from the old C C++ Dave's that have just
kind of carried over into every language
out there it exists
so we also need our little semicolon
there
now push named this is the actual route
the route does not exist yet and we will
build that here in a second but we're
gonna have this on every single screen
here so that is kind of the basic design
pattern and I'm gonna actually start my
virtual device here let's start a
different device I'm gonna use the pixel
excel shiny mu let that thing boot up
alright so while that is booting up we
are going to just copy that make a new
file call this second dart and we'll
make yet another file third Dart my
phone made the weirdest noise I don't
know what is up with this I need a whole
new phone alright so second and we'll
call this second this is the second
screen and we want this to go to the
third screen pretty simple I mean it's
exactly the same now the third screen
we're gonna do something a little bit
different here we're going to paste that
in spell third correctly is what we're
going to do
and let's say on this one we're gonna
actually just copy and paste this
alright so on the third screen what we
want to do is show how to go backwards
so let's say we want to go backwards in
time and we actually didn't put any text
anis did we well looky here let's fix
these real quick while I'm in here
thinking about it
there we go and there's our raise button
let's fix that in our second one - all
right now let's actually just wipe both
of these out and redo em all right so
back to where we were we want this
button to be the back button not the
back button geez back button and instead
of pushed name we want to pop pops just
gonna go backwards now this one we want
to go back to the home screen and this
one gets a little bit different and
you'll see why here in just a second
actually let's just fix this up and run
it real quick and then I'll show you
exactly what's going on here all right
so we're gonna actually import a few
things here import package
all right so we're gonna import those
screens now in our routes we need to
actually flush these routes out and we
do that using this syntax right here
meaning we're going to give it the route
say home build context and we're gonna
give it the context so basically what
this is saying is when the home route is
called slash home you can name this
pretty much whatever you want I just
like using the slash slash home then
it's going to create a new home under
the current build context that may not
be a thousand percent accurate but I
think you get the gist of it and then
we're going to make our third
all right so we've got that we've got
our little emulator up and running with
a whole ton of apps on there let's save
this give it a good bill push it out to
the emulator and see what happens now
the concept of a route is actually a
little more involved especially in other
frameworks routes can get really kind of
messy and you end up tracking a lot of
the stuff under the hood yourself some
frameworks don't even have the concept
of a navigator and you actually have to
kind of build your own navigator class
which is a royal pain
this actually is pretty pretty seamless
and I like it oh is this oh yeah we
didn't set the home that's why all right
so hot real oh just pick that up there
we go so this is our home screen if we
hit next
you can see how it takes us to this is
the second screen and we have this
little back arrow here and we can click
back and it goes to the home that's
called insurance I think that's called
intrinsic intrinsic or internal
navigation I remember but in part that's
the Navigator class helping us out here
I think I could be dead wrong that might
be part of the app bar but let's just go
with it so anyways you can click Next it
goes a second you can click Next again
and it goes to third now if I click back
it goes back to second so I go second
third back and forth back and forth now
this time if I want to go home see how
there's home but it has this little
arrow up here which takes us back to
third let's say we want to get rid of
that arrow then we need to do something
a little bit different here so what we
need to do is just go back in a third
and instead of pushed named what we're
going to do is we're going to dot and
this is a little a little bit of a long
one it's called push named and remove
until wow that's a long
so what this bad boy does Wow I just hit
my funny bone and that was not funny
gosh it here I'm all worried about
coughing and I'm like jacking up my
elbow yeah well here what we need to do
is actually just say route and we want a
dynamic let me see if I can push this
over here a little bit oh wait you can
actually see what's going on so what
we're doing here is we're saying the
route of a type dynamic which is
actually a route miracle is false so
basically we're just going to keep going
until we get to the home screen so what
this thing really does is going to push
through that whole route list it's gonna
say bang-bang-bang until it gets to home
and then it's just gonna remove
everything else
hence the removed until all right so
let's hot reload this actually lets push
it back out next next back works is
expected home bang there's suddenly no
arrow so that is what the push named and
removed until does in case you ever need
that functionality and then it just
works as expected
so that is routing and that is how you
would get around from I should say
routing and navigation that is how you
would get around from one screen to the
next now some things to kind of pay
attention to for design patterns is
you'll notice that each screen is
building an entire new app bar in itself
that's kind of just the way I've done it
and then what I do is I take the app bar
and I put it into its own special class
that way every single one of these uses
the exact same app bar and then the app
bar is rebuilt every single time if you
don't do that one thing that I have
noticed is you'll get double app bars
like you'll have home here and you'll
have another blue bar Internet
underneath it so you kind of got to be
careful about that
this is just one of many ways to
navigate around your application but
it's probably one of the simpler ones
and I wanted to cover it first so I have
not coughed or sneezed the whole time
I'm very proud of that fact give me some
feedback in the video once I post it let
me know if you guys like these or if you
don't like them I'm really liking
flutter it's just very fluid that's I
worked with a couple other mobile
frameworks and I've got to just say it
just it once you get over the dart
learning curve it actually kind of
thinks the way I want it to and I'm
really impressed with even an alpha just
how easy this is to work with I'm kind
of can't wait to give this some more
complex topics here so that's it for
this tutorial for the source code for
this and all other tutorials go onto my
website void realms comm click on github
and it will take you right out to the
tutorials there's the flutter tutorials
you just clone all those down to your
hard drive and feel free to join the
void rums Facebook group there's
seventeen hundred and Counting
programmers out there all walks of life
and this site is funded 100% by your
donations so if you've got an extra
couple bucks laying around please feel
free to donate
help keep this site up and running
that's it thank you for watching