hey everyone my name is Nick Manning and
I'm a flutter engineer so I create
flutter apps in my free time and I kind
of also create tutorial videos about it
so I am the creator of flutter crash
course calm
thanks very much to free code camp org
for sponsoring this video and let's get
started
hey everyone my name is Nick Manning and
this is my flutter crash course so I'm
really excited to offer this to you
because I've taken about six or eight
months of filming and content creation
and I've boiled it down into this course
and what it's meant to do is save you
time learning flutter so what you see
here is my show notes and as every video
I'm gonna do I'm gonna walk through my
show notes so you can read along and
take notes on your own and in terms of
my background I've been writing software
for about 20 years five of those as an
iOS engineer so to follow along some of
you might not want to follow along you
just want to watch that's fine but
you're gonna need everything that the
flutter website said so any kind of main
operating system popular operating
system latest version of flutter and an
iOS simulator or Android emulator so
make sure you have that installed and
all set up so if you want to if you
don't know how to set that up you're
having problems you can go to my website
or the YouTube channel that I have and I
have specific videos on how to set up
flutter step-by-step for Windows and OS
X so experience level required so you
need to have experience with one
existing programming language and also
you something that you've coded like a
website or a web app or even a mobile
app you don't need to but something that
you've done in the past so that you know
some basic programming you have some
basic programming skills so let's get
started here if you want to again go see
other videos check out flutter crash
course comm but we're gonna now start
our first lesson which is chapter 1
which is creating a basic screen so stay
tuned
hey everyone so in this lesson we're
going to cover layout and flutter so
we're gonna be using a widget called
column and what column does it's lets us
layout widgets from top to bottom so let
me show you what we're going to be
eventually coding this is the location
detail screen of our app it's called the
tourism Co app and the location details
screen show
a number of things and you can tell that
we can use this column widget because
things are widgets here are laid out
from top to bottom so there's another
widget called a row and row lets you
layout stuff from left to right for
example so but you're pretty much most
of the time I'm going to use this column
widget because a lot of content on a
mobile app is all is is a column style
layout so in this video we're gonna
cover implementing three text sections
so text sections let us define the area
for let's say let's say we want to show
summary and then this snippet of text
that's what a text section will be so
let's get coding so last time we have
this we left off with this home page and
we're going to rename it to location
detail so let's do that really quick and
name this directory location detail
because that's the convention of the
code order organization we're going to
use so we have a number of screens and
each directory is the name of the screen
and then the name of the file the main
file that defines that screen is also
that name so let's define that and I'm
going to now stop my app and restart it
I can't use the hot reload because I am
changing the file name so sometimes we
can't use hot reload so while that's
starting let's go over columns so I'm
gonna render three text sections but now
I'm not going to just display text I'm
gonna display colored boxes so colored
boxes are going to show us how that
content is the the bounding areas for
each piece of content so one way we can
define a colored box is using a widget
in flutter called container so a
container is kind of like the div of
flutter it's a div in HTML is just a
bounding area that's flexible you have
different parameters you can define one
of those parameters is color so I could
just say container and
some color I can use a property called
decoration so there's different types of
decorations one is a box decoration it's
just a generic way to define a box some
sort and I can style that box using the
color parameter so I'm going to say
color and I'm going to say colors dot
red so this in dart means colors that
red red is a static member meaning you
don't need to instantiate the colors
class to refer to it so that's why you
have class name dot and then the value
here so lastly container will take a
child so we're gonna say child text and
then whatever and then we're gonna save
it and one thing we didn't do is define
our column forgot to do that so column
has a parameter called children and
children is an ER it's a list it's not a
single widget so and it is a list
because you can have multiple items in
your list so we're gonna define three
containers here so I'm gonna just copy
and paste this and one's gonna be red
one's gonna have background of green and
we're gonna is gonna have a background
of blue now nothing's happening here
because we want to define some
parameters here I can define some text
that's fine I'll just do that real quick
but you know look at the screen I mean
nothing really is happening that's
interesting it's just defining these
little tiny boxes here you can't even
see the text so what what I want to do
is define something called main axis
alignment and what main axis alignment
does is it lets us control how each
child is vertically spaced on the screen
or how it's laid out
and when I say vertically for column
it's vertically so main axis is
something generic so I'll take a step
back so main axis is the
main axis of the widget that you're
using so if you're using a column the
main axis will be a vertical line on the
screen from top to bottom if you're
using the row widgets the main axis will
be a horizontal line from left to right
so the main axis says something that's
loosely defined and it depends on the
widget that you're using so so the main
axis alignment controls how content is
laid out on from top to bottom I have
the following options I have spaced
evenly so let's try that I'll just go
ahead and you'll see that the each box
is spaced evenly on the screen pretty
simple I can also say let's say end so
if I say end each item will be rendered
from the very bottom of my column and
column occupies the entire screen
there's other options I don't need to
cover right now but the most common one
is start so we're gonna stick to that
the second parameter for column or row
we're not going to cover a row in this
video but it's also a parameter for row
is cross axis alignment
and cross axis alignment is the exact
opposite of the main axis it's the kind
of the kind of a virtual horizontal line
on the screen so if the main axis goes
from top to bottom the cross axis goes
from left to right on the screen and let
me show you what options you have here
so I have cross that says access
alignment baseline center and start
stretch so we're not going to cover all
of these but one of the most common ones
is stretch so it's making sure that each
item of my column is stretched from left
to right so let's save that and I'll
show you now each item is stretched from
left to right and cool that's it so this
code looks pretty ugly but at least we
have some containers where we can store
text so once we do continue on
implementing this screen we'll have a
nice bounding area and
content will flow nicely from top to
bottom and it'll also be stretched so
let's clean up the code that's the last
step of this video and since these are
reusable kind of pieces of code here
we're gonna make this into a widget so
I'm gonna take the template of this file
like all to import the class here the
build method and I'm gonna copy it and
I'm gonna create a new file called text
section so the reason why we're defining
the file here in the location detail
screen is because we're not going to
reuse this widget we're going to define
anywhere else in the app so we can keep
it local to this screen we're going to
paste this in and we have a nice
template for our stateless widget we're
gonna build which is defining a text
section we're going to name it like that
and then in the location detail screen I
can copy or cut the content we want to
show and I'm gonna say container and I'm
gonna say return here and now we can
just update this so we can say text
section and we can define let's say
let's say three of these it later it's
going to be dynamic based on the types
of text sections that we have but for
now we'll just define a finite list and
we're gonna say imports text section
cool so this defines three red boxes
pretty useless so what we want to be
able to do is for now customize the
background color even though we're not
going to use it in our final screen this
background color property I just want to
show you how you can define parameters
so how to parameterize a stateless
widget or really any widget so if we
want to pass in a color first off I
define a private member private meaning
it should be accessed outside of this
widget it's just something that this
widget should know about and to do that
I say the type of member it is which is
a color and I have an underscore for the
name of the member
because that underscore means that it's
going to be private so I'm going to say
color and to customize it I'm going to
create a custom constructor so a
constructor lets me customize how I
instantiate this class so I'm gonna say
text section because that's the name of
the class this is how you define a
constructor and well what I could do is
there's there's two types of parameters
for constructors there's an in dart
there is optional parameters and there's
named parameters so optional names ones
and positional sorry so we're gonna find
to keep it simple positional parameters
meaning if I say color here you know we
all will basically how we use it is in
location detail I'm gonna just say
colors red colors green and color blue
and as positional meaning based on the
you know this is the first argument it
knows that it's gonna associate it with
this parameter simple and then I can say
this dot underscore color equals color
so this means it's kind of like same
thing in JavaScript where this means
it's referring to the instance of this
class so I'm going to say this
underscore color and it's going to give
me the value of that parameter it's
going to sign it to this so in dart
there's a shortcut to this this
positional parameter and I don't have to
define the method body here I can just
say this dot underscore color and what
that does is for a positional parameter
it's going to take that value and it's
just gonna automatically make an
assignment to the member here this value
so whatever I pass in as the first
argument here it's going to sign
immediately to this dot color so that's
pretty cool so finally we're gonna refer
to our number here so it's customized
we're gonna hit save and let's see what
happens here
cool it worked what else we want to
cover
yeah that's position right I mean the
last thing that you should do is say
that this private member is final and
what final means is that once you said
it you can't change it and that's really
nice because it makes anyone reading the
code know that they shouldn't change it
they can't because the compiler will
give you an error and we don't need to
change it after that assignments been
made so I just say final here and that's
just like a best practice so that's it
later we're gonna add some real text
we're going to style it we're gonna see
now how the the layout is is defining
how the text is constrained but for now
it's pretty simple and I hope you have a
good idea of main axis alignment cross
axis alignment and if you want to do
like some bonus work changes to a row
and try that out or play out with the
different options you have here so let's
continue on hey everyone so in this
video we're going to cover how to add
images to your app and it's pretty
simple there's two main ways to do it
one is to use an image asset or a URL of
an image so in this video we're gonna
first import an actual image asset like
a file like a JPEG file to our app and
we're going to include it in our pub
spec yamo file and then we're gonna
implement it later we're gonna pull the
image from a URL so this should be
pretty simple but we're gonna cover some
things you probably don't know about yet
like constraints and how to layout the
image so in the last video we covered
layout let's just kind of cover what
we're review what we're gonna go over
and implement in the whole video series
so it's this detail page with a nice
banner image at the top and some text
sections so what we've done is we've
laid the groundwork for the text
sessions we it just shows some lines
which we will implement in the next
video with the text and all the
formatting
for now let's add an image to the top
and keep it simple so to add an image of
we're going to be basically going
through the blog post for this video so
if you want to look at the notes I will
be showing the notes as we go along so
you can read along we're going to create
a new directory called assets images so
assets is anything like font files
images any anything of that sort and
they're all going to be in one directory
so that's how we're gonna organize
things and we're going to use JPEGs and
yeah that's it so you can follow along
if you want to check out this branch of
the code or you can code from step two
on your own so what I'm gonna do is off
to the side here I have an image already
that I'm gonna copy and the image I'm
going to copy if you check out step 3 of
the code anything from step 3 onward has
this image so I'm just gonna copy it
here and it's off screen here you're not
going to see it but I'm going to copy it
to the following directory so in my code
here I have my main root directory so
I'm going to hit this button at the top
new folder and I'm going to create a new
folder in the root of the project called
assets oops let me move here so assets
is going to be alongside the Android
directory in the iOS directory and then
I'm going to create a new folder called
images and we'll have other folders
there later and then off in the video
I'm gonna in another screen here I'm
just copying the actual actual image
file so I'm getting it from my code on
branch on the branch that I have at the
Ricoh the the link to the repo is here
in the blog post and it's in step 3 so
I've already copied it and let me show
you the fact that it is copied so since
this is a tourism app it's going to be
of all Japanese locations just I just
decided to pick that ran
so this is a location in Japan and this
is the image file so later we're gonna
load it from a server so now that I have
my images there I can't just use it
straight away I have to go into my pub
spec EML file and let me hide the code
here and so the pub so kml file is like
a configuration for your project it's in
the root of the project you can see the
file name there and you get to list
like what packages you're going to use
and all of that we haven't added any
packages yet we will get to that in
another video but if you scroll down
here you'll see that there's some
example configurations you can enable so
in dart to comment something out there
they use this pound symbol right this
number symbol here so if you just
comment it out you'll actually be able
to use that config and so the important
part is to configure this correctly so
that'll work
or else if the formatting is messed up
it may not work so what we're gonna do
is say it says here in the description
to add assets to your application add an
assets section so we have to have this
line here and it has to be indented
properly so the parent of this is
flutter and then assets is here so it's
indented by it's indented here so like
that you can't do this has to be like
this and then we're not going to include
specific images we're gonna just include
the entire directory so we're gonna say
for all the assets we're using we're
gonna say what the path to the actual
images directory is and then that is
assets / images and then make sure to
include the slash at the end that way
flutter knows that you can include all
the images there so it's gonna look like
this this is the blogpost you can see
the notes we're gonna want it looking
like this
another gotcha is you want to make sure
that this is indented as well so the
actual directive here is indented
properly so we're gonna save that and
then let's implement the actual
so let's see we have the code here so
last time we have our we had a location
detail screen so this location detail
screen had just three text sections
we're gonna fill that out in the next
video but we're gonna want to do is add
an actual image banner at the top of the
screen so it's going to be one of our
children of our column so let's add that
now let me look at what we want to do
here so because we want this to be its
own widget we're gonna create a new
widget the same way we like we created
the text section widget so I'm gonna
call this new widget image banner so
this is an image it we're gonna create
in just a second
and before we even implement it we're
gonna just code what how we want to
customize it so what do we want to pass
in to the instantiation of this widget
which is only basically the file name so
that's what we're gonna do we're gonna
say include the path to the image so
we're gonna say assets slash images
slash and then the name of the file it's
kind of weird because it's Japanese of
course so if you don't speak Japanese
it'll look weird to you but that's the
name of the file that's the name that's
going to be the name of our location
when we show the text corresponding text
with that image and note that later
we're gonna change this app to be
dynamic so we're not gonna hard code the
image we're gonna pull it from a web
service API right for now we're just
gonna hard-coded just just get it to
work so next we're going to include the
widget that we haven't even implemented
yet and I'm just doing this for brevity
here so I'm gonna say image underscore
banner so that's going to be the name of
the file we're about to create remember
that in darts if you don't know already
the the import should be in alphabetical
order so I'm gonna make sure that this
is before this and it's underlined red
because we haven't created it yet so
let's create it now we're going to go
into our location detail folder here and
because this widget is only
gonna be used by location detail we're
not going to have it live anywhere else
it's a widget that's local to location
detail if it was shared across the app
we would put it in a separate place so
let's call the let's name the file the
same name of the widget image underscore
banner and make sure it's all lowercase
and then since this is a stateless
widget and we're going to implement it
much like we did the text section widget
we did in the last video so I'm just
gonna copy this code here just as a
template and note that Visual Studio
code also gives you some options and
there's extensions to kind of use a
hotkey to auto generate a stateless
widget really quickly but that's not
what we're not going to cover that
that's something more advanced
so let's name it to our image banner and
this is the name of our widget here and
what we're not going to want to
customize the color but what we're gonna
do is be able to customize the path to
the asset so we're gonna have a private
member here and it's going to be a
string called asset path so it's private
again because there's an underscore here
second we're gonna pass in asset path so
this is going to be a positional
parameter to our constructor so that
means that when the person wants to use
this widget the first argument they
provide to the constructor will be the
asset path and this dart I if you didn't
follow this in last video when we use
this positional parameter and we use
this dot and then the name of our
private member it automatically assigns
the value so really quick if you didn't
see it last time if we just have
something like this this would be the
the long way of doing it so this has the
past asset path so this is kind of the
long way of doing it but we can't work
this is just better to do it this way so
let's implement our
image banner now so what we're gonna do
is we're gonna display use the flutter
widget the image widget but we're going
to wrap it in a container what that
allows us to do is provide some option
other options like padding or the height
and all that so you're gonna want to
wrap your images in a container or some
other widget like that so let's get
started on that so there's gonna be if
you look at the screenshot there's gonna
be a certain height to the image so
we're gonna want to expand the image all
the way from to the maximum it can go in
the container but we want to still
constrain the container of the image to
a specific height and to do that we're
going to use something called
constraints and that's a parameter on
the container widget and much like
decoration that you know there's also
something called you know there's box
decoration but there's also box
constraints and what box constraints
does is it lets us provide all these
other options for how it the content in
that container is constrained so the
most common names constructor for this
is called expand and what that does is
it says let me expand everything all the
content in my container as long as the
height stays at 200 pixels so to de
specify the height in flutter or dart
we're going to use a double and a double
is a certain data type you can see it
here that just basically it has a
decimal point that's all that's all you
have to know so if you can say 200 like
this but sometimes the original studio
code will give you a warning you don't
also do like this but using a decimal
like a proper decimal even if it's dot
zero is probably better
and that's constraint so that's we'll
see how it works in a second but
constraints is going to say expands all
the content until the height is 200
we're gonna have a decoration and we're
gonna give it a decoration of a
background color we've already covered
this in the other video and we're just
say gray here
the reason why we're giving the
container of background-color is because
later when we loaded as from a URL if
that URL fails to load the image we
still want to show some kind of
placeholder not just white space so
that's just a decision I made you don't
have to do that so the child now is
going to be the image widget so we just
say image and to use the image widget
we're going to use also a named
constructor and remember an named
constructor is goes like the name of the
widget and then dot and then the name of
that constructor so there's as you can
see here there's different ways to name
the use that different named with
constructors you can use one of them's
asset which we're going to use there's
also file memory and network so we'll
use network later let's use asset for
now that's basically taking any asset
you've specified in your pub spec camel
file so we can now just provide it the
name of the asset path so I'm going to
say asset path and the last thing we
want to cover in this video
unless main thing is how image wants to
expand and behave based on the screen
size or the container that it's in so
much like HTML or CSS you can specify
how it expands and all that and the way
you do that in flutter is we use this
Fitz parameter and we use this kind of
value called box fit cover so box fit
like box decoration box can constraints
box fit gives you additional options
like this so fit hide fit with cover
fill contain you can use these in your
free time and click into them and read
about them in the documentation the
documentation will explain how to use
these but in this video we're just going
to use cover and what cover does is it
fills the image all the way as much as
it can within the container that it's in
cool they have something similar in CSS
as well so let's save this there's some
syntax error so we're going to make sure
we have the image asset finished here
and then the container finished and
let's see what else we didn't okay like
this make sure this is finished and what
else I need a semicolon here that's what
it was the semicolon so I'm gonna
restart it and there we go the image
loads and it's exactly 200 pixels high
and now we can get started on the text
of our app so that was the tutorial here
and if again if you want to read through
the blog post it has all the code and
you can read through it in your free
time and yeah that's it so thanks for
watching
hey everyone so in this video we're
going to be covering how to use custom
fonts and flutter and we're gonna be
building out our screen here
where we already added the image at the
top but we're gonna start adding text
sections here so a text section will
have as you see here where it says
summary it'll have a title I don't have
a body so we're gonna implement that
widget and then we're finally going to
cover our text theming and flutter so
text steaming allows you to define all
your style in one place for different
types of elements in your app and then
that way your code is very clean because
it knows what kind of style to pull from
so let's get started if you want to
follow along I have the blog post here
and to get the font files that we're
going to be using those font assets
simply check out step / step zero for
branch of this the code repository and
the link is in the blog post so let's
get started we're gonna implement first
we're not going to quite follow the step
by step the blog post in the blog posts
order we're just gonna implement the
actual text section first because then I
can apply the font and it'll just look
like nicer it'll be more understandable
so the first thing we're going to do is
implement more features of this text
section because right now it's very
contrived it just shows
that's it what we want to do is remove
this color and be able to show a title
and a body so let's implement that now
so instead of color we're gonna
implement two private members one is
title and one is body we're gonna update
the constructor and this so this dot
body so whatever you pass it in pass in
here as positional parameters will be
assigned to these members and then let's
basically define how we want our widget
to be structured so this each widget can
have its own layout so in the location
detail screen we do use something called
a column where we already covered that
in the layout video but each text
section will have its own column because
content is laid out from top to bottom
in a column format so it's going to be
summary and then this body of text so
instead of container here let's
implement a column and it's gonna be its
own column main axis alignment is going
to be start meaning the each child is
going to be laid out from top to bottom
sequentially without any padding cross
axis alignment will be stretch so I want
it to stretch to the full width of the
container what we're going to do is
remove decoration we don't need that
and for child I'm going to have some
text here well we have two state
children because it's going to be a
column and it's gonna be a list of items
here we're just gonna have title and
then the other one is body then we're
gonna end our columns
nobody already did here and and our
children here hit save and then we're
going to there's an error because we
have to update our location detail
screens to use this so we already have
text section imported here we don't need
to do that and now we're just gonna say
we'll hard codes and values in here so
we're gonna say summary
something one and then something too and
something great so later we're gonna
make all this text dynamic it's gonna
pull from a web server API what API
running on a web server somewhere and it
we're not going to hard-code anything
like the image names and all that so
cool it looks really boring because
there's no formatting to it
so let's cover that next first thing we
want to do is add padding to each of our
widgets so to add padding to each text
bit of text here we're going to wrap
each text widget in a container widget
the container widget lets us define that
that the text doesn't so to add padding
to a container because we want to
control the different padding scheme so
we want to control padding on the left
and right and the top and bottom and
it's going to be different for each
we're gonna say Const which is a
constant edge in sets and then from LT
RB so that's a special named constructor
for edge in sets and lets you granularly
define all that padding so because this
each this text section widget is going
to share the same left and right padding
I'm going to for simplicity sake define
a constant up here and it's well it's a
it's going to be a static constant and
I'll get to that why it has to be
static in a second but we're gonna call
it horizontal padding and from just
brevity because I use this lot I'm gonna
say H pad and people usually will figure
out what that means the reason why it's
static is because since I'm using a
Const here it just has to be static I
can't I can't you see if I remove it
here I can't define a constant as a as a
member of a class here and has to be
static that's just the rules of dart so
for the left and the right padding it's
gonna have that value for the top of the
bottom I'm just going to use a custom
value so I'm gonna use 32 and 4 you
don't really need to specify the decimal
point but
I just like to because it's a double and
just more consistent that way
so then we define the padding here I'm
gonna end a let's see a text and in my
container and then I'm gonna add let me
add my child and then I'm gonna add the
other container and it's just gonna have
different padding because of because of
the fact that it's a just based on the
design of the app it's gonna have
different type of padding so that
padding will be let me look at my notes
it's gonna be ten and just use the same
value as horizontal padding here save it
so cool now we have the things like
nicely padded and I'll add some more
text here so you can see it like kind of
looking a little more realistic in the
next video we're gonna add in real text
here so let me just paste that in cool
so that's just really really ugly
looking text but it shows you that it's
gonna flow nicely and the padding looks
okay
okay so let's cover the style of the app
um before we do that though the style
that we're gonna implement uses a custom
font and so we can't implement that
style without it failing until we add
our font file so let's go add a custom
font so to get the custom font file
we're gonna need and let me show you the
screenshot that the the font looks
really nice that it's this font
montserrat I'm gonna I've checked out
the step for branch of the code and I'm
just gonna copy the assets that already
have I'm going to do that off screen
here because it's just easier and what
we're gonna do is in the assets
directory we're gonna have a child
called fonts so that's going to be a
sibling of the images directory and then
I'm gonna just paste it in here
off-screen and boom okay so the fonts
got added so each font file I downloaded
these from google fonts each font file
has a special like family name and what
we're gonna do is in our
pubs Becky mo file as you remember the
public the mo file lets you define
packages that we're going to cover that
what we haven't used the custom package
yet it lets you define where your image
assets are so here assets such images
but for this video I've implemented this
already which you're going to have to
type in yourself or copy from the
example code we can define a section
called fonts and it has to be indented
properly so you just do one indentation
because it lives under the flutter
section that's very important we're
gonna call it Montserrat so the family
name you define here is the family name
you'll refer to in your style when you
define styles so for each font file I
can specify the weight I want to use so
for this file it's going to be 300 which
is kind of like regular light slash
regular weight and then 600 is kind of a
bold weight so we're gonna have two
different weights so make sure you save
that and the indentation is all proper
it's like using two spaces for each
section that's how ya Moe that format
EML is defining indentation so how do we
use these fonts um but one thing we can
do is in our text section we can define
in each text widget just to get
something to work
we can just say style and then we can
define text style and then we can define
all kinds of parameters for that style
but for just for cleaner simpler code we
don't need to do that verbose way of
doing things because that's going to get
very repetitive what we want to do is to
find one single style throughout the app
and it kind of works like CSS as well
and to define the style throughout the
app because we're using a material app
widget the material app widget gives us
these shortcuts and one thing when we
look at my notes here one thing we can
do here is define something called a
theme so this is how we use themes in
flutter so a theme is something general
and there's different types of theme so
we're going to safety
and then theme data and theme data lets
us define various how various widgets
are styled in the app so the first thing
we're going to define is the app bar
theme so the app bar is a material
design terminology for the navigation
bar at the top so for iOS users it's
called a navigation bar so we say app
bar theme and you instantiate an app bar
theme class exactly and so that app bar
theme class is going to give you certain
parameters one is the just basic text
theme of the navigation bar at the top
so let's define a text team and the text
theme we instantiate here and for the
title of that texting there's different
there's different options you can use
for text theme you can go over it in
your free time but these are the
different these are basically all the
main options for a general texting and I
won't get into us too much but for the
sake of brevity in this video I'm gonna
find the text theme that I want to use
and instead of hard-coding it into my
file here I'm going to define the text
theme in a separate file so it's nicely
organized but for now I'm just going to
type in what I want to implement and
that's going to be app bar text style
this is going to be something I define
as a custom thing in just a moment I'm
gonna now I'm gonna implement it so to
organize your style properly what I
personally typically do is I create a
file called styled art and that style
that dart is going to define all the
style in my app and what I'm gonna do is
import material and I'm gonna define
some constants at the top because I'm
just gonna paste it in here and what
this does it lets me keep my style file
very succinct and clear so I'm defining
specific different categories of text
sizes and then the name of the font I
want to use this is the core
family name i defined in my pub spec EML
file so I'm gonna paste this in here
this is going to be my app bar style
it's going to be it again it's a text
style and it works again it works a lot
like CSS so it's very easy to follow it
has a font family so refers to my font
name
montserrat a weight so for font weight
in flutter you can define different font
weights so they all go from 100 to 900
and because I defined one that's called
300 in my pub spec email file see here I
can use that weight so that's the font
weight and then the font size it's
medium it's 20 and then the colors it's
just going to be kind of white because
the fact that I have a colored nav bar
up here so I'm gonna save that and then
I'm gonna import it in my app dark style
dark I'm gonna save it and cool now our
navbar is styled with the custom font
you see it's kind of like lightweight
here and will will style it more later
because that's not this is not quite the
final design we want to use but will it
will continue with this later so let's
finish up the style of our app so now
that we have the app bar theme the
indentation is a bit strange looking
here because of the way auto formats it
but for me do this so that you can read
it better and the last style we're going
to define here is our style for just
basically the text section so I'm gonna
go look at my notes here so for the text
theme we're gonna define there's various
text theme that for throughout the app
that we can define here so texts team
could be for various different
components so one is for just to loose
something loosely named called title you
can I'll show you how to use it in a
second but it's basically for any title
you use so we're gonna call it a title
text style we're gonna implement this in
a second because this style same with
the app bar textile will come from our
style
and then we're gonna say body 1 so body
1 is just another name we're gonna refer
to later in our code and that's for any
body text bodies that we're gonna call
it body 1 text style so let's implement
this now in our style file so in our
style dart I'm gonna paste these in
first off I'm going to paste in the
title text style and the tiles textile
is gonna be looking like the same thing
but it's just gonna have a black color
and that's going to be large the next
one is body 1 textile same thing but
it's just gonna have a different text
size so body text size of 16 so now that
I pasted those in and I have these
defined here the general style for all
the text in the app now is changed so
it's going to use the basic font of the
style but there's certain elements about
it that are not going to be used so for
let's say the title text style it's not
going to use this certain elements of
this so it's not going to be large yet
so to to kind of deliberately say hey
for this title here let's say summary 1
I want to use the title text style I
have to deliberately go into my text
section widget and we're gonna have to
update that so how we're going to update
that is for here we're gonna say for the
text widget style and then we're gonna
say theme use the name constructor of
we're gonna pass it our context and
again our context is something we pass
around in the app and it just is a way
for flutter to kind of know certain uh
certain contextual information about the
rendering tree the widget tree and now
we can refer to any style that we have
defined here so we can refer to text
style texting rather so because of the
fact we defined a text theme I'll go
back to here here
so in our theme data widget here we
defined a texting
so now we can use it so I could say
theme of context text theme and now I
can specify exactly what subset of my
text theme so I'm because I define a
title text theme again going back to app
dart C I defined a title text theme I
can use that now so I say title here and
I'm gonna save it and now it's using the
actual text theme I want it it's the
exact text size that I wanted to use all
along I'm gonna do the same thing for my
body so I'm going to paste this in here
and I'm gonna say body one so basically
it's not gonna be I don't have to do
this because it's already taking the
style of that because this is just
normal text if I define a text theme of
body 1 all the just general text of the
app is going to be styled like this but
I'm still defining this style here and
I'm using explicitly body 1 because it's
just more explicit that way it's clear
and but you don't have to do it like
that so yeah that's that's how you style
text and flutter I think that wraps it
up for this lesson yeah and we're gonna
just you know style this more later and
in the next episode we're gonna actually
use dynamic text so we're not gonna hard
code anything in but yeah that's it so
thanks for watching
hey everyone Nick here so in this
episode we're going to talk about three
things one is how to use models to
represent data and functionality and
we're gonna update our code to make our
screens dynamic and not hard code any
data in there and also we're going to be
covering dart concepts such as generics
the map function anonymous functions and
Cascades so if you want to follow along
I'm gonna be going through this blog
post as I go through the lesson and you
can find the blog post on flutter crash
course comm and then go down to the
episode working with models here if you
want the code there the links in the
blog post right here you have to just
check out this branch here I have
highlighted to have it actually have the
code we're gonna be implementing so
let's talk about the significance of the
and apps data model so a data model is
something very very generic to any kind
of app it's not only flutter' apps it
could be a web app just a traditional
app software application or could be a
mobile app doesn't matter so a model is
basically a glorified class in darts so
when we have an app that we're going to
write the app usually has input and
output so like any software program so
the input of the data is going to be
probably some data we fetch from an API
somewhere so it could be a firebase API
or a normal traditional HTTP based
restful api so that's the input to our
app because the data is coming into our
app but the problem is we need to when
we take that data into our app we need
to represent it somehow in memory and
that data might be complex it might have
different types of data with different
types of fields to it and properties and
also that data might relate to each
other in different ways so let's say we
have our tourism Enco app here the input
of the data would be a list of locations
that can be shown to the user and each
location could have a list of facts of
that location like fun interesting
things that you want to show to the user
so if we want to represent that data in
our app we're going to create two
classes a location class and a location
fact class and we're going to have a
relationship between them so the model
also represents the relationships
between different pieces of data so the
location of model or class if you will
will have a list item a member that's a
list the dart list that's going to be a
list of facts so there's a one to many
relationship between location and
location facts so all of this data
taxonomy and all that stuff we're going
to represent in classes and we're going
to call them models that's just like a
terminology that a lot of people use so
when we fetch the data from the API
we're going to write certain code that
creates instances of the location class
and when we want to use that data in our
app let's say we load a given screen
say we load a location detail screen we
can easily work with that data if we
have them cleanly separated into
separate model files so so again
scrolling down here we have the models
location and location fact that we're
going to create in the lesson and again
it's gonna be a one-to-many relationship
so that's more coming from database
design terminology one-to-many and all
that stuff but that's just like stuff
that you should know as well you could
use that not only for databases but also
for how your models relate to each other
in your flutter app so this is how we're
going to use our models I'm scrolling
down here this is how it just as a given
use case of how we're going to use our
models so our app loads and then since
we don't have multiple screens yet in
our app we're going to do that in the
next lesson we have a single location
detail screen it's going to load we're
gonna say hey just give me like from a
list of given locations based on a
location identifier or ID we're gonna
also add that in this lesson give us the
name of the location and then render it
in the navigation bar and then for each
location fact again it's a one to many
relationship between location location
facts render a given text section and on
our screen so right now as you can see
in my simulator I have three text
sections that's just hard coded so what
we're gonna do is update the code to
render a given text session based on
each fact we have associated with that
it could be one fact it could be five
facts it depends on the location
instance we're rendering so how do we
add our models so basically I'm going to
show you the best practices for when
you're adding models where to add them
and also how you can use code commenting
and what the best practices are to make
sure that if anyone else is reading the
code that it's easy to read so let's get
started on the code example that we're
gonna code is in this blog post so I am
going to open my basically I'm going to
open my code here
and I'm going to explore here and I'm
going to create a directory called
models so basically in terms of code
organization best practices in the Lib
directory there's going to be a sibling
directory two screens the screens
directory that we have and we're going
to call it models then we're going to
create a new file called location dark
and now we can let me increase the size
we can just implement our location model
so it's going to be again a class and
each class and dart is gonna be in title
case meaning the first initial of every
word is going to be capitalized and I'm
gonna have three fields here I'm gonna
have string I'm gonna locate in has a
given name it's gonna be let's say image
path and then it's going to be a list of
location facts final list location fact
and I haven't created that yet so it's
gonna have an error here facts and then
I'm gonna update a constructor so that I
can create this model very easily so
we've gone over this before but we're
gonna use a shortcut here where if we
use this dot name this dot image path
and this dot facts we can the
constructor will automatically assign
the values you pass in to your members
and that way we don't have to actually
implement the the class like the
constructor like this and we've gone
over those previously so I won't go over
that too much and then we're gonna
import which a file we haven't created
yet location fact dark make sure that
the name of your model is in single case
like a location because it is one given
location so don't make it plural and
also that goes for the file name so I'm
going to create a file name called
location fact not fax or anything like
that it's a one single fact in a
location fact again its title case let's
see what we want it's going to have
title and a text let me just paste this
in because it's faster from the blog
post it's not rocket science here so a
location fax gonna have title
texts and that's really it so no errors
are here that's great
so yeah let's see so let's talk about
how we're gonna add business logic to
our models so business logic again is
just a glorified term for just some code
and there's some rules to that code
based on your business or your what
you're trying to accomplish so we're
gonna implement that and an one
traditional way to implement business
logic is you can add them to the model
directly if it's not such a big app if
it's not if the kind of a small to
medium-size app a lot of people just add
the business logic and core
functionality to their models so let's
say I want to get a list of locations
I'm gonna add a method that fetches
those locations and I'm gonna add that
method to the location class so that's
pretty much a common approach so in this
method here I'm gonna implement that
it's going to I'm gonna paste this in
because there's a lot of code here and I
I suggest you not typing it in because
it's it's tedious you can just check out
the code here let's go through this so
this is going to be a function that's
static and and static meaning you don't
have to instantiate location to invoke
the function you can just say fetch all
so this is going to be a function called
fetch all it's gonna fetch all the
locations in our virtual database it's
hard-coded now but in a few lessons
we're going to fetch it from an actual
back-end API so we're gonna say fetch
all and this is not a realistic fetch
all function because usually you would
add like you know pagination parameters
they fetch from 1 to 10 or whatever or
fetch numbers 10 to 20 or all that but
this is very trivial example and it's
going to return a list of locations so
each location we're gonna call is the
constructor we're gonna pass in a name
here and this is the path to the image
and all these and then it's going to be
a list and for each list item we're
going to stay in
a location fact so this is going to be
summary how to get there etc so it's
really ugly now but once we have an
actual web service API hooked up
it'll this will all go away and also
note that for now we are using this kind
of ordered parameters for our
constructors there's there's if you're
having a lot of parameters that's and
there's another way of doing that we'll
cover in another lesson but for now this
is like the simplest way great so we
have our models let's continue so let's
make our code dynamic now so we're gonna
take and use this fetch all function and
we're going to update our location
detail screen so let's import the
location class and we're gonna update
the following we're gonna update the app
bar title we're gonna update this image
banner and then we're going to iterate
over every fact of every of the location
we're going to load and render a given
text section so how we're gonna do that
is a simple way at first we're gonna
load all those locations in the build
method so we're gonna say location dot
fetch all and then we're gonna assign a
given location so so for a given list
locations is a list type there's a
special kind of property called first
and that's just like saying like this
basically and right now we don't have
multiple locations we're gonna implement
the next lesson we're just gonna assume
we just have one location because we're
just loading a location detail screen
here in the next lesson we're gonna pass
in an identifier it's a location detail
screen and then loaded by identifier
another word before I continue is that
usually don't want to load data in the
builds function because the build
function of any widget can be called
multiple times so we don't want to be
doing that but just to get it to work
for now we're going to be doing it here
and I'll explain in later lessons how
the kind of ideal way to do it so now we
have access to our given location so I
can update the title here and I could
say location got name because location
has a name property as you can see here
this is the name
property and then I can say in the image
banner say location dot image pass
that's the another property here so
let's reload that and it looks like it's
working pretty well
so what are we going to do with each
text section so basically in darts
there is a special function called map
and what a map does is it converts a
list or an array and artists called list
of of stuff to another list but an but
of another type of data so if I have a
list of let's say strings I can use map
to convert it to a list of actual
objects like a list of widgets right in
our case what we're gonna do is we're
gonna have a list of location facts
which is an array of I'll show you the
model it's going to be this data type
list of location facts and again just
touching over this again this is what we
call generics so we've went over this in
the last few lessons but I want to
refresh real quick before I continue
it's going to be a list of location
facts so generics is basically the
ability to define a given type for
specifying the type of something so you
have to specify a list of something you
could say list of string you could say a
list of integers and in our case we're
gonna have a list of location facts so
that's what generics is anyway where the
map function was we're gonna say for a
given list of location facts we're going
to convert that to a list of widgets of
type text section so that's what Matt
does it transforms of one type of list
into another type of list so how are we
gonna do that let's make a function
where we're gonna take all this stuff
we're gonna cut it out and we're gonna
say some list of widgets and and then
we're gonna just add it in here
after the fact so before we do go ahead
and do that let me implement a function
that returns that list of widgets that
implements our map function
so what we're gonna do is we're gonna
have a list of widgets that's the
function is going to return and let me
look at the code real quick what we're
gonna call it it was called text
sections so the blog post I just brought
up has the kind of final implementation
but I wanted to do it from scratch here
it's gonna it's going to take a single
location and that location is gonna
we're gonna say location got fax again
it's a it's a list item and we're gonna
say dot map and that math takes a what's
called a anonymous function in other
words it's another word for it is a
closure in dart and a closures are
something very pervasive through other
programming languages and the syntax is
just kind of weird a closure or an
anonymous function is a function but you
don't give it a name it just it's
anonymous you don't have a name for so F
is our function and we're gonna
implement our function right in here so
the function because how map works the
function will take one single parameter
and the parameter is it's a given fact
so anonymous functions in dart have
three parts to it the first part is the
actual list of parameters of the
function just like any other function
this is a list of parameters and the
number of parameters that's available is
defined by this actual map here so we
know that if we click into it this is
pretty cryptic this function that it's
defining that we pass in will only allow
us to have one kind of parameter but I
would look at this is pretty complex
anyway it's a list of parameters and
then there is a arrow here it's called
what's at rocket notation or something
which is saying hey we want to define a
single line implementation of our
function so in theory we can do this we
can use curly braces and implement our
function here but with this arrow does
is it lets us define if it's the
function is a single line it lets us
define the function
as a single line of code so we can say
and and whatever we define here as a
statement it returns so we can if we
want to return let's say fubar it'll we
can do it like this right so what we
want to do is the implementation of this
is return a text section so remember we
had a text section widget here and
that's what we're gonna implement so
text section and then for the fact we're
gonna have fact what is it a fact has a
title and text so fact title in fact
text so this again as I said just to go
over this one more time because you're
gonna be using this lot in in flutter
apses map will convert a list of one
type to a list of another type right so
in here we're gonna take it's going to
iterate each fact in the facts list and
for each fact we're gonna execute a
single statement as denoted by this and
that statement is going to return what's
going to be pushed into the new list so
it's going to return a text section and
we're gonna we implement the
instantiation of our text section and
then it's going to return it so this is
gonna return a iterable kind of list of
stuff so iterable of a given type so
iterable is another thing in dart that's
kind of a kind of like a parent
grandfather type of something that you
can iterate over it's something generic
but we're not going to be it's not
useful to us so what we can do is we
need to get a list
so for iterable we can just say two
lists and two lists will convert
something that's iterable to an actual
list type here so yeah that's it that's
the implementation when you return this
and then we need to use this list of
text sessions we return here so we can't
just call text sections like this and
pass in location
because we want to add that because this
is a list we want to add it to the
existing list of it we want to inject it
into our list here so this is already
our list we want to inject it here and
basically we're gonna do this we're
gonna use darts spread operator and it's
called the Cascade spread is coming out
in the next version of dart and and
that's different but Cascade is two dots
and what cascade does is it takes a
given item and it lets you run a
function against it or or make an
assignment or do something else so I'm
gonna say the Cascade operator and then
we're just gonna to say at all so I'm
gonna there's a special function in dark
called at all and what that does is it
depends all objects of something that's
iterable to the end of the list so if we
have a given list here we're gonna say
at all and then we're gonna pass it a
something that's iterable so text
sections is iterable and that's what
we're gonna do so there's a lot to
unpack there on the but like this is
kind of a common situation in dart 2.3
which is coming out very soon you'll be
able to use a another operator called a
spread operator which is three dots and
kind of kind of tack on list items like
that more easily so anyway let's reload
the screen and yeah
there we have the text here so all the
text looks nice here and that's it let's
see what else we have to cover here so
if you want to go over what Cascades are
I have links to what Cascades are I have
a link to what the map function is when
I have notes on it but I also have a
link to the actual documentation in the
in the dart web site so this is a link
to it and yeah like you know I would say
play around with this stuff and in
summary basically I guess that's what we
cut that's all we need to cover so our
app now
dynamically adapts to whatever data
we've defined so in the next section
next lesson we're going to be covering
more advanced features and building out
a new screen so thanks for watching so
in this episode we're going to be
covering navigation in flutter and also
the ListView widget which is a really
important widget because most apps are
made up of some kind of ListView of
stuff
it could be news feed items photos
whatever so and finally we're going to
be covering gesturedetector also so
we're going to be implementing the
second major screen of our app the
tourism Co app and you'll be able to
browse through a list of locations and
tap on one to get to this detail screen
that we've already implemented here so
let's get started if you want to follow
the code and and just get a copy of the
code we're going to be implementing this
lesson you can check out the repo at
this blog post on flutter crash course
calm
it's called navigation and flutter and
there's a link for the code for this
lesson up here and you have to check out
the branch step slash step zero six so
first thing we want to do is update our
fixture data so fixed your data again is
just test data but we want to show a lot
more locations so we can show this list
view widget easily we're also going to
add a new field to the location model
which is ID and what ID is going to do
is it's a unique identifier that lets us
pass around in our app so that we can
load a given detail screen so if I tap
on location with ID too for example I
then make a call to my back-end to say
hey fetch me all the data for location
two so we're not integrating with a
back-end quite yet but that's the kind
of code we're going to implement before
we actually do that integration just to
wire things up so you can check out the
branch to just copy and paste this new
location data if you want
I'm gonna do that right now so let's
open our project so the we're gonna open
the location model and right now we only
have one instance of a location so we're
gonna want to create three and before we
paste that in I'm gonna actually
implement this ID member so int ID for
location and it's going to be an int
different apps to use different forms of
identifiers sometimes they use a string
as a gooood but in our case we're just
going to use an old-fashioned just int
so we have to update our controller here
our constructor rather sorry and then
I'm just gonna paste in what I have here
to the side and that'll be a lot easier
so boom done that's it let's make sure
we have the images in our app so every
location refers to an image so an image
file locally later we're gonna be
loading it from a URL so right now I
don't have all the images so I'm gonna
have to take the images from and exit
the the branch called step sizes step
zero six and I'm just gonna copy it now
off-screen so I've checked it out
off-screen I'm gonna copy it and then
I'm going to now paste it into the
assets directory and the images
subdirectory there so I'm gonna paste it
in and boom they show up right here so
make sure you have these images here or
else they won't show up great so let's
go back to my blog post so as you know
in every lesson I follow my blog post so
if you you want to see the show notes
you can as I talked when we increase the
size for you so our fixture data is done
so next thing we want to do is implement
a new screen which is the location
listing screen and this is going to be a
stateless widget because it's not going
to need to maintain any state and it's
going to also use a scaffold which is
that it's that convenience widget that
lets us create
new screen and we're gonna create a
ListView inside of it and a ListView
basically takes in a list of items
whatever that is it's just a bunch of
data and it will render those items and
automatically scroll let you scroll
those items if there's you know if it
overflows the screen so this is the
boilerplate as you see in front of you
for the list how we would use ListView
we would basically fetch all of our
locations and pass it map them and we've
covered map in the last lesson so if you
don't know about that check it out and
for each location we're going to display
the locations name period and that's it
and then we're gonna return a list for
the ListView so let's continue on here I
will just implement it now and we can
build upon this so we can add an image
or make it tap label' or whatever so
let's actually implement this okay let's
continue here so open the so the screens
directory shows all of our existing
screens right now there's there's one
folder per screen we already went over
code organization so this is how we're
gonna continue to organize our code so
I'm going to hit new folder and we're
gonna call it locations because it's
basically a list of locations and for
naming your screens you want to
basically name them as simple as
possible so you don't want it you don't
want to name it location list thing it's
just too verbose you can if you want but
it's just to be verbose so I'm gonna
call it locations and because it's the
main screen I'm gonna name it the same
name as my directory and that's really
important to be consistent so let's
start implementing this I'm gonna paste
in the boilerplate code for a stateless
widget and also our imports so I need to
import app dart and also the location
model so in terms of the simple screen
pasting that in we
want to use a scaffold so I'm gonna
paste that in because we already went
over this before let me increase the
text size for you so and then I'm gonna
hide the left panel here so you can see
it better so the scaffold takes in a
body as you know and let's go ahead and
implement ListView so let's say ListView
and so there's different versions of
ListView you can use right now we're
going to use the traditional ListView
constructor there's some names
constructors we're going to use later
but we'll cover that so if you're used
to list view already and you're you're
implementing it in a different way just
like just follow along and and just see
how I implement ListView because the
main way to implement it is there is a
children parameter and that children
parameter takes the list of a list of
whatever you want to render so it's
going to be a list of widgets at the end
of the day and for now we're gonna make
it really really simple so let's go back
to the example in the blog post right
now we're gonna just implement a list of
text widgets so let me when I fetch my
locations I'm gonna say map and map
takes a is basically an anonymous
function so so for each item in the map
which is a location I'm gonna execute
the following function and that function
is going to return a widget that
represents each item in my ListView so
I'm gonna return a text widget and I'm
just gonna use the location name for the
text widget and then finally I'm going
to convert it back to a list because map
returns a an iterable type and that's
more of an advanced type that you don't
really need to know about right now but
you just have to convert it back to a
list because that's what children is
it's a list of widgets so we have to
save that and let's see I guess that's
it let's see if that rendered so I have
my emulator open here and we have the
detail page open now so now we have to
update the app dart to to kind of show
this view right here
so let's go to app dart and a shortcut
for opening things in vs code is command
P or if you're on Windows or Linux it's
ctrl P and then you just type the name
of the file so that's really useful so
basically the homescreen is now not
going to be location detail that was
just there for examples sake it's gonna
be now location so let's update our
imports and I'm gonna update this save
it and now let me let me just do this
here
bear with me that way you can see the
code and the screen here cool now this
is a very basic ListView it doesn't look
really cool it just shows like a single
name and that's it there's nothing fancy
about it we're gonna be adding an image
for each item here later so oops I'm
going to show you that so I have the
mock-up of like the actual end result of
our app here and I've showed it to you
before let me open it for you here in a
new window because it's not letting me
show it to you
let's see location list yeah so this is
gonna be our final list view we're going
to implement the ListView is going to
have one image per item and it's going
to have a widget at the bottom with with
the name the opening times of the
location and just to some subtitle so
that's what we're gonna get to so what
we're not gonna render those images
quite yet though so great
now let's we let's cover how to interact
with an actual ListView item so we're
going to implement a gesture detector
and the gesture detector is something
very basic and flutter most other
widgets already include the ability to
detect a tap it could be in the form of
a button or whatever but a gesture
detector is the kind of parent type that
can be used for really any widget so we
can wrap anything with a gesture
detector and actually pass on an
anonymous method and that method can do
what
we want and in this case we're going to
navigate to the location details screen
so let's implement a gesture detector so
basically to implement gesture detector
it's it's its own widget so because it's
it's just a widget here let me just do a
word wrap here right or wrap great and
I'm gonna hide a left bar here so it's
it's another widget so we can wrap the
text widget here with a gesture detector
and a gesture detector has a child which
is going to be the actual thing and
let's see child text right there and
then and the parenthesis here and save
it it's going to automatically format
and it's not going to do anything yet
because we have to implement a new kind
of parameter here so instead of only
providing a child there's another
parameter you're gonna provide which is
called on tap and on tap takes let's
click into it to see how you implement
that an on tap is a type of gesture tap
call back and if you type tap into
gesture tap call back if you click into
it you're gonna see it's just going to
be a function a general function so you
can click into this as much as you want
to see how things are implemented but
just trust the process for now that it's
it's going to be a actual function
anonymous function and let's implement
that now so because it's just a generic
function it doesn't take any parameters
so we're gonna do the parenthesis here
because without any list of parameters
and then the arrow here the rocket
notation and now we're going to
implement the function for on tap and
because it's a little bit more complex
we're gonna pass it the name of another
function so that we're not implementing
the function right in here with like a
block it's gonna just get too messy so
we're going to implement a function
called on location tap so it's really
important to name your functions very
explicitly so we're tapping as
specific location what's not ideal in my
opinion is to name it something like
handle tap or handle location tap well I
guess the handle location tap is fine
but on location tab is something a
little more concise and it's already
like explicit that it's a handler so on
location tap I think is the best
terminology and it's important to be
good about terminology when you code
something because it makes sure that
your code is nice and concise okay so
let's implement this now it's gonna
we're going to pass in the context so as
you're gonna see in a sec we're gonna
need to use this context variable and
what we're gonna do is pass in the ID of
the location what's important is we're
not going to pass in the actual location
because in dart it's gonna make a copy
of that location instance and that's not
really memory efficient what we want to
do is pass only the absolute minimum
data we need to any function we're going
to use because because we don't again we
don't want to copy actual entire object
instances so we're gonna do that and
let's implement that method right now so
because this method doesn't return
anything we can say void on location tab
but what I usually do is I just leave
out the void if it's returning void you
can just omit that and it passes a build
context and then the location ID and so
what this is gonna do is gonna navigate
to the new screen so now let's talk
about navigation next before we actually
implement it okay so before we start any
implementation
let's just talk some navigation concepts
so in any mobile app navigation works
like a deck of cards where every card in
the deck is a screen and when your app
loads for the first time it's only gonna
start off with one card because there's
only one screen loaded and that is
defined in app dart here in the material
app widget by the home parameter and we
already went over this but that home is
the starter screen for your app so your
app just starts and it starts with one
screen and one card in the deck now when
I tap on an item in my
ListView here which we're going to
implement it's gonna load a new screen
it's gonna load the location detail
screen which is another card and your
virtual deck of cards and it's gonna
take that card and move it on top of the
other card in your deck into the view
for the user so that you're pushing and
popping cards at the end of the day so
it's basically in computer science terms
a stack and that stack you can push more
cards on top of the deck and the card on
the very top of the deck is what shows
to the user and when you want to go back
so let's say they tap the back button
that card slides off the top of the deck
and the previous screen is still there
for the user so the previous screen is
still in memory so when we define a
series of screens in our app in flutter
and a lot of other kind of mobile
frameworks you're defining a list of
what we call routes and that that
borrows from web app development
terminology where a route is a basic URL
that is a path to a page so the home
page route is just slash another screen
route is like slash whatever
so in flutter you're defining routes and
these are called named routes because
for every route you're giving it a name
so let's define that there's a parameter
here in material app called routes now
ultimately we won't be using this
parameter because I'll show you the
shortcomings of it but it for very
simple applications it works really well
because if you don't have any kind of
like fancy context you want to pass to
your new screen it works fine and I'll
explain that in a second I'll explain
what I mean by that in a sec so let's
open up the blog post to show you the
example here and I'm just gonna copy and
paste this in because it doesn't make
sense to type it all out so in a very
very traditional app when we have routes
we have the slash as the just we can
call it whatever you want but it's
usually using slash as the homescreen
this is the first screen that loads
right and instead of home we can say
like initial route and we can just refer
to that route
name because the name of that route is
just slash when we want to navigate to
another screen we have to do first to
find that route to that screen and that
screen is like slash second or like
fubar or whatever you want to name it
right and to navigate to that screen
then I can refer to that screen by name
or the route name so I can say navigator
pushed named context slash and then you
know the name of the route so going back
to my detail page if I tap on a location
I can say navigator which is a to
basically work with navigation and
flutter there's a class called navigator
and you say push names which is a named
route and you pass it the build context
and then the name of the route you
defined very simple now the shortcoming
to this is like pretty clear because if
your second screen needs to pass any
parameters if you need to pass any
parameters to it like fubar whatever
like this right where are you gonna get
the values to those parameters that's a
shortcoming because there's no way to
define how those parameters that data is
going to get there if those parameters
are dynamic so for example if I have the
location
detail screen here location detail and I
need to pass the ID of the location
we're loading how am I going to know
what ID that is by defining it up here
in material route so there's a solution
that we're gonna implement and its
standard flutter but it's not like
documented very clearly it's it's kind
of a little bit more ways into the
official documentation so I don't
recommend defining routes like this
because they're really it's just that's
that's the big shortcoming to that and I
hope it that makes that explanation
makes sense so let's basically take a
pause and implement the location detail
screen on how we need to load it because
I can't implement a working example of
the location detail screen unless we
update it now we went over the fact that
the location detail screen right now
only takes it doesn't takes any per
look it just loads any random location
right this is my location detail screen
it just fetches all locations and then
it says whatever first location has just
loaded so we're now gonna have to
quickly update the location detail
screen to take in a parameter so let's
go do that now so we're gonna have an
int as a private member called location
ID now remember this is still a
stateless widget because location ID we
don't need this data to react to any
kind of state changes it just loads this
location ID when it loads and that
really doesn't change so let's create a
constructor now a custom one so that we
can load the location ID and make an
assignment to the private member so I
can call location detail passing the ID
and then we're gonna need a way to fetch
a specific location by ID and then load
it here and we don't have a method for
that so the only methods we have in the
location model is just fetch all so
we're gonna have to implement a method
that closely resembles what we're going
to ultimately be implementing which is a
call to our back-end service which
fetches a model by ID identifier so
let's go ahead and implement a function
called fetch by ID so we still have the
fetch all that that's gonna be you still
but I'm gonna implement static a static
method because we don't need to
instantiate a location and it's going to
return a location fetch by ID and that's
gonna be the name of it and we're gonna
pass in a location ID and then what
we're gonna do is whenever you implement
a function that the easiest way to
implement it is just to write out
pseudocode so and then implement that
because it's just easier to implement so
we're gonna say fetch all locations
iterate them and when we find the
location with the ID we want a kind of
return it's immediately
of course is going to get this is a
trivial example we're gonna be replacing
it with a back-end API call but it's
it's not an efficient way of kind of
implementing this but it gets the job
done for now so we're going to first
sketch all our locations so we're gonna
say location fetch all and and then I'm
gonna have a for loop and in a for loop
in dart is pretty stripped simple it
looks like a lot for loops to use and
other programming languages so I don't
need to explain too much so we're going
to say iterate all the locations and
then on locations I so the location at
index I if the ID matches location ID
return immediately the location at index
I and I know you're saying we can
probably load all the locations and a
map and it instantly fetch those
locations via a map but this is just a
simpler example so we're gonna have now
fetch by ID now later we're gonna be
going over this is an error because
we're not implementing haven't fully
implemented our screen yet in the future
you're gonna write a an actual test for
this and we'll go over testing later
like that you're not gonna just write
functions and then just expect them to
work it's best to have a unit test for
that but that's it for another episode
also let's move this method down here so
that because it's a little bit more of
an explicit method and we want to show
all of this data up here just to make it
nicer looking
so now let's implement the location
detail and the location details screen
we'll call this method so we're gonna
say location fetch by ID and then we can
pass it simply our location ID and name
it the variable location and then we can
remove this so now we we will this this
is working fine we can instantiates
location detail and stance eats it has a
location ID automatically and then when
the screen loads we fetch it by ID great
so now let's implement a basically
we can't implement push names as I
talked to you about like like we have to
pass in an actual ID so I'm gonna now go
over how to pass in dynamic arguments to
the screen we want to load okay so let's
implement what we're actually going to
be coding at the final implementation of
this so instead of a we're not going to
use the normal push names we're going to
use a more extended version of push
named and we're gonna pass in an
argument to push names which is the ID
the location ID here so let's implement
that now so before we do that first I'm
going to go to app dart and this is how
I personally implement this like there's
many different ways of implementing
routes but I'm gonna have two constants
at the top of app because constants
allow me to define like refer to
location route globally by the actual
name without having to it just prevents
mistakes so I can refer to location name
by an actual like variable name and in
constants in dart should be starting
with a capital letter so this is going
to be in title case these aren't classes
they're actual variables so they look
like classes but they're actual
variables but again they're in title
case because they're constant so I
define all the names of my routes up
here I have the home route which is just
slash and the location detail route now
when you pass the slash route to flutter
it's already gonna know hey this is my
first screen I'm gonna load great so now
let's go back and now I can say push
named and then locations route and then
I'm going to show you how I can pass an
argument to that so we're gonna have to
pass this location ID to this push named
function and to pass an argument to it
there's an arguments parameter so for
push means we have arguments and all
that arguments is a map so a map type
and then we could define whatever we
want here I can say ID and then location
ID and our screen is actually going to
you use this and I'll show you in a
minute how it's going to use this so
we're gonna refer to it by name like ID
and then the value location ID and we're
gonna remember that we use this ID key
to our map so let's continue on
so in apt arts here's what we're gonna
do we're not going to use the routes
parameter here so I'm going to remove
that also we don't really need initial
route because we already have a route
called slash and that just loads first
we're gonna have we're gonna use a
special parameter called
on generate route an on generate route
is giving us a dynamic list of routes
it's in the form of what's called a
route factoring and route factories just
a fancy term which is a basically a
payload that of data so chunk of data
that just says hey here are my routes so
let's create a pass at a function we're
gonna implement it's a private function
so it's starting with underscore called
routes and now we're gonna implement
that here because it's in our app dot
dart it's on the highest level it's
easiest to define that here so it's
gonna return a route factory and I'll
show you what a route Factory is at the
end of the day in a second rather and
this function is going to return some
data so it's going to return an actual
function so if you click into on
generate route that is a route factory
let's click in a route factory and route
factory is actually a function that
takes in a bunch of settings and returns
a route of type dynamic so I won't like
drill into this too much let me
implement that and that will make a lot
more sense but what we have to do at the
end of the day is return a function so a
function with the parameter settings so
we're gonna use settings here and I'll
show you how we're going to use settings
so first we're going to get the
arguments to our whatever route was
tapped so arguments
and settings has this member called
arguments so we can use the settings for
getting all kinds of information but
arguments is one of them and now we're
gonna create a variable called screen
and screen is the actual widget and the
final screen that's going to be returned
to us based on the name of the route so
the name of the route that we have is
defined as settings that name so if a
user taps on whatever they tap on the
given route that that they're wanting to
reach is defined by the name which is
going to be either / or / location
detail and what we're gonna do is use a
new feature of dart called switch and
switch let's it's basically a glorified
if and then else if statement and it has
can have as many else ifs as you want
but it's just a more concise way of
saying if something and then else if
something and then else if something
else right so instead of doing that we
can say switch and we pass it the name
of the route and then I can say in this
case if it's the locations route I'm
gonna do something custom I'm gonna say
my screen that I want to return is a
basically a new instance of the
locations widget and then I'm gonna say
break because in a switch statement it
will go through every case until it
breaks or you return something so next
case is the location detail routes and
remember every case has to be ended by a
colon not a semicolon that's really
important
and most programming languages have a
switch statement so most of you if
you're familiar with this it this is
gonna look like second nature to you so
for the location detail route if I want
to navigate to the location detail route
here and that's defined by slash
location detail I have to do something
custom now and I'm gonna say location
detail and I'm gonna use my arguments
map here and I'm going to refer to it by
the ID key
that's what we defined here so locations
the arguments is a map and there's a key
in that map called ID you should use
single quotes by the way by default and
then I'm and now I can instantiate it
with a custom argument so now I have my
screen I have to import it real quick
location detail location detail greats
and now I can return it so break and now
the switch statement has this final case
which is if none of the cases match
there's this default case and you define
it with just default colon and then by
default just we're going to return null
and do nothing and then finally what I'm
gonna do is return what's called a
material page routes and we know that we
need to return this because a route
factory is a function and yeah I won't
get into it too much right now but let
me just say that you it expects the
material page route to be returned right
and material page route is a type of is
a basically type of route so going back
to the basically that route factory type
a material page route basically I didn't
want to get too much into it but it is a
type of route so you can use any type of
relative multiple types of route but the
most popular is a material page route
and then material tape eight route takes
in a builder and I wouldn't worry about
builder all it is is a fancy way of
being able to pass in something dynamic
like an anonymous function here so the
syntax is a little weird but basically
it's a function that takes into context
and you say ok what what am i returning
I'm returning my screen widget and
that's it so I know this looks a little
weird but basically this is how we
define all like put all the routes in
our app that need to be dynamic
and what's nice about it is that it's
defined upfront in our app widget so
let's get this working and then I'll
show you how it's gonna work now so on
generate route is routes and before we
get it working I'm going to quickly
clean this up real quick because I want
to use the I'm basically going to take
my theme data before this before we get
it to work real quick let me just tidy
this up because it looks pretty pretty
pretty ugly I'm gonna say team data
sorry for the tangent here but I want to
just put this here and I'll show you how
easy it is to quickly get this tidied up
great so our main screen is very clear
on our app widget we have just on
generate route and our theme and it's in
a method here so that it's nice and
clean cool so now that we've gone over
that it was a little tedious but let's
see if this will work so let's check our
code again push named okay this should
work let's see if this works
cool now it's not loading the location
details screen and see it's just like
loading the location screens so let's
troubleshoot why this is happening
so in our app dart locations to those
location details location detail route
and just the name we're loading is C
location detail route so we have to push
names location detail Brown so let's hot
reload this and when I click on
something cool it comes up so we got it
working I can go back and when I go back
it will pop it off the route so there's
no you don't need to implement this pop
method like you don't need to manually
write some code that says push this card
that's on top of our deck off the stack
it'll just do it automatically because
we're using the material apps material
designs at bar widget so app bar widget
automatically will show a back button
when the screen appears if it's not the
home
it's say cool so in our next episode
we're gonna actually implement the the
beautiful location listing screen but
this is just the nitty-gritty kind of
mechanism for navigation let me make
sure I didn't miss anything because the
blog post basically explains in detail
how this is all implemented and it gives
you also links to the documentation
let's see yeah I guess that's it final a
dart file cool and I talked about going
back and all that stuff like that so
there might be a better way that you
have for implementing routes that are
dynamic that need dynamic parameters but
you know feel free to reach out if you
have a better way of doing this but for
now and how floaters implemented this is
pretty much the most clear-cut way of
doing that
everything's defined up front in app
dark so thanks for watching and yeah