The Ultimate Flutter Tutorial for Beginners - 2025 Full Course

once you have installed flutter the next
thing you need to do is to create a new
flutter project and this is what we'll
do in this video so you will open the
terminal so I will go inside my Mac
will'll open Terminal and maximize this
things so you can see something next we
need to create the project what I like
to do is to always create the projects
at the same place so it's inside my
MacBook inside my development and this
is the flutter installation and this is
my project so I will create one inside
this so I will say CD and I will CD the
development folder and then CD the
projects folder great so this is where
we are now I will say flutter
create and we will call this one my
flutter app or flutter app you can write
anything you prefer but just make sure
that you don't have spaces and next you
say run perfect so this will create our
flutter project we need to open this
inside visual studio so I will go inside
I will say open and then I will go
inside development projects and I have
the flutter app right there so you will
click open great so now we are inside
our flutter project and we are ready to
run the application so we'll go inside
the library and the main. dart and then
you will press this little button if you
are on Visual Studio code and this will
start the application it will take like
30 seconds to launch all right but if
you are on Android Studio or something
else you can go in the terminal and you
can write flutter run and press enter so
if you press enter this will launch the
flutter app the next thing I need to
tell you is if you are on Visual Studio
code you can also create some sort of
configuration you can do this on Android
studio also but on Visual Studio is
pretty simple you just click this little
thing and now you have all your config
ation and you can launch the application
by going and clicking on this little
thing instead it doesn't really matter
how you launch it at least the only
thing you need is to launch flutter
right so this is the basic application
and on the next video we will start
building a real application right so
that's about it and I see you in the
next one
bye-bye okay so the next thing you need
to understand is flutter is really
widget inside widget inside widget this
is the key concept that once you
understand this you will see building
with FL will be so simple so let me show
you an example inside the main. dart
which is the entire code required to
build this application right now we will
change a couple of things so by example
if you change the you have pushed this
button many time blah blah blah you can
press this little thing which is called
the UT reload so the lightning bolt or
whatever and this will restart and just
update the screen all right so you you
can also just write something else and
press contrl s to save and this will
automatically update the screen so I
will always do this the next thing you
need to understand is flutter is widget
inside widget so I have a column widget
inside I have an argument called
children which will put inside a list of
other widget so this is why we can have
one widget and another over uh under
because we use a column widget so this
is what I I need you to understand is
flutter widget inside widget another
example is we have the center widget
which will put everything in the center
and then we have the column which will
allow you to put to Widget the text and
the number all right so if we take
another text and we just copy copy paste
right under like this you will see that
we have two numbers great another thing
we can do is maybe we can go inside the
text and we can go and press I don't
know text style or just style this is an
argument by the way but it doesn't
really matter if you don't understand
right now we will explain everything
later so I will say we'll use a text
style widget like this and you can CL
you can click the arrow to have more
information about it I prefer not to
click it because it kind of hide
everything in the screen so I will press
textile and I will press control space
because this is the way you can see all
the arguments inside and I will use by
example color and will say colors do
blue and I will save so now you can see
that the text is blue because inside the
text widget I've put a text style widget
which change the style so flutter is
really like that widget inside widget
inside widget and in the next video I
will show you how to understand and how
to put all these pieces together and
yeah that's about it so I see you in the
next video
bye-bye okay so how do you put a widget
inside a widget or how do I know when do
I need to use sty or when do I need to
use chill child or when do I need to use
children it's like it's so confusing
right so what I will need to do is by
example I will remove the column I will
delete all of this garbage right away
and what we'll do is we'll just put a
text widget like this and inside I will
press control space and you can see that
we can put many many arguments but the
text budget is is a little bit funky
because if you go over you will see that
you need to put right away the string
data and then you can put some arguments
so this one is a little bit funky so we
will put a string we'll say hello and
save but now how do we put arguments how
do we understand to put widget inside
widget to put arguments what you need to
do is you press the comma and you press
control space this will show you all the
possible arguments so by example we used
style previously so I will put my arrow
I will click this little thing and I
will see that the description of the
thing all right so I will click on style
and I will put a text stle like we did
earlier but the thing you have to
understand at this point is a widget is
a capital letter an argument is a
lowercase letter the first letter and
after this you do this forever you see
that after the argument we have another
widget which have the capital letter and
you guessed it if we go inside and we
use an argument by example the color
color is a lowercase letter and after
this again capital letter colors. Ember
so you understand right now that flutter
is widget inside widget but you
understand also that in order to put
another widget inside another one you
need to use an argument arguments use
lowercase letter and wiget use capital
letter so like this you have some sort
of visual idea of how to use flutter
right now this is the key concept once
you understand this you are ready to
jump and create your own app and this is
what we will do in the next video so I
see you in the next one
bye-bye okay so the next step you need
to have or understand is how to create
the data type with flutter once you have
this it's really like let's go and I
don't know what I mean by that but
anyway so um what you will need to do is
you will say string and you will we say
name is equal to by example um
Mammoth or whatever doesn't matter so
this is a string after this we have the
int which which will be a number and
this will be equal to one we have the
double which will be nobody care and the
double is like a number with a coma and
after this we have a list this is how
you create a list so my list is equal to
the square bracket the square bracket
will let no flutter that it's a list and
you can put many items inside each item
need to be separated with the Kaa like
this all right so the last thing we need
to do and talk about is a map so how to
create a map my map is equal to now we
use the curly bracket we put the
semicolon at the end
everywhere and next you need to put by
example a string and um what else a
string string whatever it doesn't really
matter for now now just so you have seen
how to create each of them uh first time
later inside this course when we need
them I will explain more if needed all
right so this is how you do it last
thing with the map if you want to put
the type for the map you can write it
just like this this will be a map string
string but if you have something else by
example I don't know uh something weird
you can use Dynamic and dynamic will be
all the type kind of right so by example
if I use this I put my coma to create
another thing the key to and we change
this for a number 444 now this will work
because we have the dynamic which will
be either a string or either a number so
this is how you use the type with
flutter later we will do like loops and
stuff like that but we don't need it
right now so we will not do it right now
that's about it and I see you in the
next video to start building a real
application that's it
bye-bye okay so I know we were supposed
to start building like apps and widgets
but I need to tell you this thing it's
so crazy as a tip that it will help you
build with flutter like crazy fast so I
don't I don't understand why people
don't tell about this more often it's
just so good so by example if you want
to create another argument we will right
now what we will do is we will work on
this little debug banner I hate it
because I don't think it's beautiful I
think it's ugly but if you want to have
a debug ban to know if you are in debug
mode you can keep it but I will remove
it so we will go inside the material app
and I will write show debug Banner or
something like this uh show debug Banner
yeah this one and I will select this
argument and if you go over the argument
you will see that flutter will give you
the answer you need to put a true or
false value so I will say I want this as
false and I will press crl s to save and
you see that the banner is not available
anymore if you like it keep it
personally I don't so we'll do again
this little tricks but with another
argument so let's go inside the color
scheme and inside the color scheme we
have the argument and we have the widget
color scheme inside this one we'll go
inside the arguments I will press comma
control space and we will use the
brightness argument so this one I will
press enter and now we need the answer
so we'll go over brightness
and you see we need to write brightness.
light so this is a widget so I will do
exactly that brightness but instead I
will say dot dark and if you save you
will see that the application is not
dark but another thing is you can see
that the the code is a little bit weird
so if you put a coma after each argument
or each argument in widget and save this
will automatically reput the code like
in a good way so you can see it if it
doesn't work for you when you press
control save this mean you need to like
format document so you need to press
this all right so that's about it so now
you know that when you press you put
your mouse over an argument you have
always the answer flutter is giving you
the answer so just use them so you
understand that flutter is widget inside
widget you understand that when you put
your mouse over the argument it give you
the answer and you understand that the
arguments start with a lowercase and the
widgets start with a capital letter so
right now you have like all the tools to
understand what we will do with flutter
so I see you in the next video to start
building
bye-bye okay so let's talk about
container a container is just like an
empty box that you can fill with
anything like you can decorate it so I
will go over the text wiet I will right
click and I will say
refactor then I will use the wrap with a
container but oh I have some bug on my
computer I will right click I will say
refactor and now I will select wrap with
the container but you can see also we
have the side the center padding size
box column row we will do all of them
after like in further video so I will
say wrap with a container after this
inside we will go in the arguments
control space and I will say color the
color will take a color widget so I will
say colors Dot and we'll use maybe red
and let's save so this is the container
the red color so what we can do also is
we can change the height for 10 Z and
the width for 100 and zero so let's save
so this is our container all right after
this what we can do is we can change the
corners of the the container I will go
inside the
decoration argument and if you go over
you will see that this take a decoration
but this is a little bit misleading
because it's better to use the Box
decoration
perfect so after this Inside the Box
decoration we will put the corners or
the Border
radius again if we go over you will see
that this said border radius geometry
but it's better to just use the Border
radius do circular and then you just put
like 25.0 inside and let's save and now
we have an error so in further video we
I will show you how to fix error by
yourself like it's it's a two-step
formula it's super simple but for now I
will just fix it pretty quick if you
don't understand don't worry because we
will talk about it later so what I will
do is you can see that we have the color
is equal to null or the decoration is
equal to null and right now we put a
color and a decoration so flutter is
like a just put one of them and after
after this it's also said box decoration
color color so you can change the color
inside the board the Box decoration okay
I know this means a lot of things and
maybe it's confusing but I will just
take this I will cut it and I will paste
it inside and maybe it will make more
sense for you all right so now we have
the rounded borders to 25 and that look
pretty cool can we change can we do
other stuff inside this the constraint
padding I can talk about padding uh
color yeah let's use padding so I will
say the padding go edent set.all this is
what you put inside if you go over
padding you you will see that it's
called ENT geometry it's better to use
the ENT set. all all right after this I
will use the value maybe
50.0 if I save you will see nothing
change the reason is it's like kind of
invin invisible the padding so what we
will do is we will change the height and
the width and I can show you something
cool at the same time it's called The
double. Infinity all right this will
tail flutter I will put my coma this
will tell flutter take as much place as
possible so inside the body argument or
inside the body of the scaffold take as
much place for the height and after this
we will do the same thing for
the the width we will say double
infinity and let's save okay so you can
see that the padding does again nothing
but it's because the padding is inside
like this if we change the padding for
margin you will see that now we have the
50 the 50 margin but if we do it for the
padding this means what is inside this
thing so let me show you we will take
another container I will copy this
entire container like this and I will go
inside the child I will change the text
for the container and now I will paste
another one and we'll change the color
for maybe orange and let's save so you
can see that the hello maybe the hello
is a little bit um I will put black
let's save so now you can see that we
have a margin we have a no no no margin
we have the padding and we can put a
margin also like this here we go so this
is everything about container or pretty
much everything you need to know about
container I see you in the next video
bye let's talk about column this one is
pretty cool because most of the time you
will need to put widget one over the
other because L it's all one inside the
other so what you can do is instead use
a column widget if we go inside the body
we have the container right there and
instead of this container I will delete
what is inside I will delete all the
child like this and save okay so what we
will do is we will wrap this container
with a column I will right click and I
will say refactor and then I will use uh
wrap with a column all right so as you
as you can see usually a container will
take a child widget okay we don't have
it right now but you could have a child
and then is what you put inside but the
column is pretty much the same thing but
it's children instead because you can
put multiple child inside we have the
list this is the list and then we have
the widget container so what you can do
is you can copy this container and paste
it right under and Save
and now we have a problem and it's
because we use a
Infinity height inside a column so a
column is infinite and we put an
infinite so it's like not it's not like
possible anyway so I will put contrl J
and you can see inside the debul console
also we have some sort of problem with
the
height uh has size all right so I will
remove this and what we'll do is we will
just remove the height like this and we
will save great so we have one container
and we have another one right under and
we have two type of padding so we will
remove all the paddings and the margins
and padding margins and let's save
so if we save now we have another
problem it's not working uh because we
don't have any height all right so a lot
of problems but this is how you learn so
height we will put
100.0 and we will put another height for
the this one and save so we have our two
containers inside a column all right
that's pretty cool but I have other
thing to show you instead we will
replace the two double do Infinity you
can press contrl D usually this will
select the next thing and you will write
maybe 100.0 let's say so we have our two
containers after this what we can do
with them is maybe we can put them in
the center so let's use the column in
order to we will do is we will go inside
the arguments we will say the main
axis alignment main access
alignment do Center and now the widget
are inside the center so let me explain
you what is the main axis alignment and
the cross axis alignment because we can
also change this one for by example end
and it will be at the end and I will
show you why it is not right now anyway
so a lot of things to explain this main
axis alignment is by example the column
the column is like this and the main
axis is vertical all right so this this
is why when we put it in the center it
goes in the center if we put it at the
end it will go at the end all right but
why this one doesn't work the reason is
for example if we take the column and we
wrap it refractor wrap with a container
and then we change the container for the
color
colors do blue and let's save this is
the container that's the reason but if
we take by Example The Container and we
put it at with double.
infinity oops that infinity and we save
now you can see that the cross axis
element is working and it goes up to the
end and if we change it to start it goes
to the start because now the colum take
all the width because by default the
column will take as less place as
possible all all right I knew this is a
lot of things we will redo this exercise
in the Le in the next video because uh
we will do the row instead of the column
so you will see it's a little bit
different but anyway and another thing
we can do is we will delete maybe we'll
put this as uh black 38 so it's less
aggressive and next we can change maybe
the width remove this and save great so
now we have our column and what we will
do is I will remove the cross alignment
we will save and we will change another
argument called the main access size so
if we do this we can change because by
default as I told you the column take as
much place as possible for the vertical
so we can change this we can say the
main access size do minimum so now it
will take as less place as possible and
the main access alignment will not work
anymore because it doesn't take all the
the height all right so you can remove
this and save so this is way to put it
in the center also you can remove this
and it will go back up all right so this
was a lot of things about the column in
the next video we will talk about the
row and that's about it see you in the
next one
bye-bye okay so let's talk about row
instead of using the column we will
replace this just by writing row and I
will save great so now you can see that
this is the row we have the color black
38 which Define the color of the row and
after this we have two container so
let's change a couple of things let's go
and try to put this in the center so
what we could do we could change the
main axis size um is it main AIS size
it's not inside the row sorry so yeah
it's the main
exercise like this and we'll say main
exercise the minimum try to think what
it will do before running it so for
example if I click on it this will
change the main access size to the
minimum so all the black will be reduced
so this will go in the center so let's
save great after this what we can do is
we can change the cross the main access
alignment and if we say main access
alignment do uh let's say start it will
do nothing for now so let's save it do
nothing because the main axis size is
minimum so if we remove this
now it would go to the start but I think
by default It Is by start yeah it is by
default def so what we could do we could
change it for Center and let save or end
and save great so there is also another
thing called the space around or space
between space evly let's use this one
this one can be pretty cool sometime so
yeah you can play with that and one last
is the cross AIS alignment because the
row is horizontal so the main axis is
horizontal and the cross axis of the row
is the invert which mean vertical all
right so we'll say the vertical axis we
want it to be cross AIS alignment do
start but this should not change
anything does it uh cross access do
start so I will save again yeah does
this does nothing because it was just um
the main access previously so that's why
it moved but uh if we just remove this
and we put save and then we put this
cross AIS cross AIS element do start it
was you see nothing change all right so
um that's good but how do we make it
change the reason is because the row the
height of the row is like the minimum as
possible so we can change this by going
in the container so the parent widget
and we can change the height to put
double. infinity and now it will work if
we save you see now it work for the
cross X so I know this was a lot of
things and maybe it's confusing for you
but it's pretty simple it's just if you
have the row what is the main axis of
the row it's like this and what is the
cross axis is like this and if you go
with the column the main axis is like
this and if you go with the the column
the cross axis is horizontal so that's
about it see you in the next one
bye-bye okay so now let's talk about the
center widget it so you can see that we
have a center that is wrapping
everything right now but why is this not
everything in the center in this case
all right let's figure out why first we
have a height of infinity so let's
remove this this might help a little bit
great so now we are going to the center
after this we have a row but the row is
saying that the cross X element is going
to the start which mean um this should
do nothing so if I remove it it should
do nothing yes sir perfect but why this
is still not in the center the reason is
the row take as much place as possible
for the main axis alignment so if you go
inside you will see that the main axis
size is maximum so let's change this for
main access size main access size do
minimum and let's save so now everything
is in the center so this is the goal of
the center wiet but if you change the
argument within other widget inside this
will not take
uh action anymore all right so this is
the center wiet what else can we do by
example if we go in this the container
we want to put a text inside and we want
it to be in the center so what we could
do is we could write the child to go
inside the container and next you will
say Center
widget let's click and then we will go
inside child again because this will go
in the center and we will write text and
then we will put I don't know uh blue BL
BL blue and let's save so now we have
the text in the center of the container
all right so this is how to use the
center widget I don't think there is
anything else inside we have the some
width Factor height factor I never use
them so it's not really useful that's
about it and I see you in the next video
bye-bye okay so how do you add an image
inside your flutter app for this you
have two ways to do it first you can
either use a URL or you can download the
image and put it inside your project we
will do both ways so first I will find
an image on the internet wallpaper I
will right
click on it and I will say open image in
a new tab great so after this you will
go at the end of this URL and you will
search for something called gpg or PNG
or any image format after this you can
copy all of this and if it's something
weird then maybe it will not work so
just now you know
after this we will go back inside the
code and we will replace the scaffold
body so we will change all the container
and one tip for you is I always click on
the bracket to know where the next
bracket is you see I always click like
container I know it's right there
because it's highlighted so I will take
the con the
center delete all of this and then we'll
use the image do Network perfect now we
can delete the source and we can put
um something like this the URL and we
can put the coma format document save
and now we have the image inside our
application great so what is the next
step the next step is maybe to put the
image on the full height so we will use
the height argument we'll say double.
infinity and let's save but this is
still not like all the all the image
like all the screen if we want all the
screen we need to use another argument
called the fit and the fit will have the
box fit do multiple options so contain
which is currently the case the cover or
the fill fill is is a little bit weird
so we will use the cover and now let's
save great so this is the first Way by
using a URL with the image. network so
let's do the other way around instead we
will create a new file and we will call
it ass
inside this we will create another one
called the
image and finally inside assets we will
create another one called fonts because
later inside this course we will learn
how to add your own fonts and so inside
asset let's go back inside the the
internet and I will download this image
I will say right click save image as and
then I will save it inside my image so
you can see this is my project I set
inside flutter app image and I will save
it inside this let's change the name for
something like background bg. gpg
save okay now we can close this and we
can go inside image and see if we have
our background gpg great the next step
is to go inside the image. network and
change network for asset and after this
you can change the path which which is
inside and what we will put instead is
the path for the image which is assets
SL
image/ bg.png uh
gpg great but if you save you will see
that this is not working because we need
to tell flutter that we have a path to
image so you will go inside the
pope. and inside this one you will
scroll down until you find the section
asset and you need to make sure that
everything aligned perfectly otherwise
it will not work so you will go over the
A and you will delete twice like this
delete delete after this you will do the
same thing you will go after and will
you will delete twice delete delete
great so you will remove this and call
it assets
slash oops
slash
image and slash again so now you have
access to all the IM image within this
file and you will click this you will
save and you will click this little
button flutter pubget all right if you
don't have this on Visual Studio code
you can open the terminal and write
flutter Pub get like this and it will do
the same thing so I will close this and
close the pops. and now if we save the
application we have the background if
it's still not working for you just
close the application and relaunch the
application and now it should work so
this was pretty much everything about
image so that's about it and I see you
in the next one
bye-bye okay so if you are using Android
studio and not Visual Studio code this
video might not be for you so you can
skip to the next video right now because
we will talk about extensions with
Visual Studio code so you can see that
when I put my path of my image I have a
little image preview this is because I
have an extension called image preview
all right so you can download and enable
this if you want after this we have the
better comment better comment is just a
way to put colors for your comments
because like normally this is a commment
but if you put this now the comment is
red and if you put like question mark
now it's blue and stuff like that so you
use it if you want after this I have the
awesome flutter snippet this one is
pretty cool because you just write like
a shortcut and it will write a lot of
code for you so we will use this inside
this course you will see I will use a
lot of time the shortcuts and we will
save a lot of time so you can enable
this also the last one is the material
icon theme so I have already this
installed and it's inside the Explorer
you can see all my files we have some
sort of icons be before each files and I
think it's cool so that's about it uh
you can enable them if you want and I
see you in the next video bye
in this video we will talk about the
stack widget so most of the time you
will have a child inside a widget so you
will be able to put a widget inside and
Nest all the widget together but by
example this time the image that asset
don't have any child so how do you put a
text over it in the center for this you
will need to use the stack widget so
what you will do is you will go over the
image you will right click
and you will say refactor with a
column like this if you do a column and
you put a text after so right now it's
because we use the height Infinity I
will remove this and uh yeah if we save
now we should have something let's
reload the application yeah we have our
image the reason was inside a column
it's a widget infinite and then we have
another infinite this is why it was not
working so what we will do is we will
say text
and inside we will say I don't know
flutter or anything you can put anything
and now you see that the text is under
the image but we want it over the image
so instead of using a column we will use
a stack widget and it work just the same
it use a children inside which you have
a list of widget separated with all
commas so now if we put the comma right
there also and save we have the text
flutter right there so what you could do
is you could put the text in the center
by right clicking on text refactor and
wrap with a center widget all right so
let's save and now yeah you see that
this is not working because it's it's
going inside the center of the um the
application so what we could do to fix
this real fast is we could Define a
height of maybe 300 for each of them so
this one and the Cent maybe we could
wrap it say refractor with a sized box
and put a height of 300 also and now you
see that it's in the center so this is
how you play with the code all right so
that's about it for the stack wiget um
and I see you in the next one
bye-bye now let's talk about another
widget called the padding so it's pretty
much like the container because if you
remember Remember by example if we go
over the stack we wrap this refractor
wrap with a container inside the
container we can put the padding
argument and then we say agent sets. all
and we put a value maybe
50.0 so we will have a padding all right
but there is also the widget just
padding you could replace the container
with padding and save and it will do
just the same the difference is padding
is only for padding but if you use the
container you can see that you have many
other arguments and stuff that you could
put inside so if you only need a padding
use the padding widget because it will
be like less expensive for the
application so that's about it and I see
you in the next one
bye in a previous video I've used a
widget called sized box without any
warning and never explained you what it
was so I will explain inside this video
so a size box is pretty much like a
container but only for the height and
the width so you can see if we go inside
the arguments we only have the width so
the container again is the one that have
pretty much everything it can use a
padding or it can use a height and a
width but if you only need to use the
height and the width you should use the
size box because again it's less
expensive than the container it's the
same thing with the padding okay so the
size box is just that is an empty box
that that you can put a height and a
width and then a child inside that's
about it see you in the next one
bye okay so how do you add an ncon
inside your app so for this you will go
inside the section app bar of the
scaffold and we will work inside one
argument called the leading all right
and inside the leading which is the
start of the bar what you will do is you
will put an icon like this and inside
you use the same logic as the colors you
remember when you use a color with the
flutter it's a colors with the s dot a
color then you will do the same thing so
we'll say icons with the s dot and then
you have all your icons if you want to
see it you click the little uh blue
thing like this and you select the one
you want so we'll just say notification
or anything and we will save so you can
see that we use an icon inside our app
bar great so we could also change the
color by going inside the arguments you
press control space and then you use the
argument color and you say colors with
do uh Ember or anything and you save so
that is how you use an icon we can
delete it because we will not need this
later uh but we will reuse this inside
another wiget that I will show you
inside the next video that's about it
see you in the next one bye
okay so another widget I want to show
you is called the listy widget so we
will go inside the stack and we will
change the list style we will use the
list style and inside we will say title
and the title takes a widget inside so
if we go you see that this takes a
widget so we'll say text and I will
remove this because takes a lot of place
and I will say text and inside you can
write anything it doesn't really matter
so this is a listle but after this we
will change the color because I want you
to see what is the listle so the tile
color will say
colors. red and I will save okay so you
cannot see it right now because we have
an image and the the list tile color has
a weird weird thing that the color goes
behind every stack I know it's weird but
it is how it works so what we will do is
uh I will delete the image and you will
see this is the Lyle so because we are
using a padding I will remove the
padding also now we can see the entire
listy it's how it looks but what we'll
do also is we will put an argument
called the
leading in the leading what we will put
inside is an icon and we'll use icons
Dot and inside we put anything so uh
joint full all right and another thing
you can use in inside is the
trailing inside the trailing what you
would put is by example a text and
again like this and you will see it at
the end perfect another thing again we
can use is the ontap so this will create
a function okay if you don't have the
option you just press control space and
you will have the options of using both
like this you use this one and now you
can put a function inside and now you
can save so that's about it and I see
you in the next one
bye okay so we created some sort of
empty function but how do we see when we
tap on it so what we will do is we will
use a simple print function like this
and you will write I don't know uh
clicked on or anything so I will put my
semicom my semic colum I will save and I
will open the terminal inside the debug
console now you will see that when I
press on this
list boom you have clicked on and then
that's about it every time you click on
it you will see a number count so this
is how you print something with flutter
very simple stuff and you can use this
to debug sometime that's about it see
you in the next one
bye another widget I want to show you
before we move on is called the wrap
widget and this one is pretty cool okay
so we we have talked about the listy and
the listy is a little bit like a row so
we will replace the listy I will go
inside the bud we will replace all of
this with a row widget inside we will
put the children which will be multiple
widget back to back and we'll say text
and I will save
anything and put a comma let's save so
we have one text wiet let's add another
one and let's add like maybe five and
save you see how we have an error right
there it's is because we don't have
enough place to display all the widget
inside the screen and this is the thing
with the RO widget it can happen so if
you want to to make sure that this
doesn't happen you can replace this with
the wrap and now let's save and you see
how everything goes down if you don't
have enough place another thing is uh
let's try to create something even
bigger so maybe this this this this and
Save you see that even if the text
widget doesn't enter it will still put
it down so this is a really helpful
widget to remember the wrap widget if
you have problems with the row then you
can use this that's about it and I see
you in the next one and
bye it's now time to talk about the
master layout so we have talked about a
lot of little widget that you can put
together to create the app but what
about like the big picture how the
skeleton of the app work this is what
we'll do so what we'll do we will go a
little bit crazy and we will delete
everything all right let's do this let's
just keep the the main run my app my app
okay so what we'll do is we will start
from scratch first thing first there is
like three things we will talk about we
will talk about the state less then we
will talk about the mat
app and then we will talk about the
scaffold okay so you have a mental
picture of what we'll talk about the
first thing we'll do is we'll write the
state less widget so if you just write
STL or sta you will find stateless
widget you click this one and this will
build automatically the widget for you
after this you will write uh my app
because it just need to be the same name
as this so if you change my app for
something else you need to change these
also great so this is a stateless widget
and the first part we will talk later
about what is the stateless widget and
stateful widget but as a quick
explanation stateless mean that the
screen will not change and a state full
widget mean that when the user click
things then the screen refresh with new
stuff it doesn't matter if you
understand right now but what we will
talk about in this video is more about
the material app because later we will
talk about this and more about this so
let's use the material app you will
replace the container for a material app
so this is like the theme of your
application so you can see that right
now it's all black and you remember the
debug Banner which will do is we will
remove this we will say show debug
Banner
false unless you want to keep it after
this we just have a black screen so what
we need is we need the home of our
application which is an argument and
inside we just put a widget and the
widget is the scaffold the scaffold
widget is the third part which I told
you is the skeleton of the app so this
is more like the theme of the app and
this is the the the skeleton all right
we will work on this on the next video
but for now let's work on the material
again let's change the theme and if you
remember previously we had something
called the color um was it color it was
theme yeah so we have the team of the
application and the team takes the team
data so we'll say team data and then
inside we will say dot from is it from
no it's a team data and inside we put
the color scheme exactly and the color
scheme what you will do is you will say
color scheme color
scheme. from seed this is the easiest
way to do it all right there is like 10
ways that you can put put colors inside
your app I just find it that the color
scheme that from seed is the easiest and
uh that that's about it so you will
remove the color and it will say colors
do uh let's create our application color
teal because I think it's cool I will
put all my commas I will save and now
you see that we have some sort of teal
white all right so if you put red you
will see that the color background is a
little bit different so now we have some
sort of teeing inside our app but also
it will be cool to have our application
dark so I will say brightness and I
would say brightness. dark I will put my
coma and save so now our application
have some sort of theme of colored te
teal and the brightness dark on the next
video we will start working on the
scaffold that's about it for the third
things I will delete them and I see you
on the next video
bye okay so the scaffold is the cool
part of the application because it's the
skeleton and it's where you start to see
your application take life so inside the
scaffold we have something called the
app bar argument if you go over you will
see that the app bar suggest something
called the preferred size widget but
it's just better to use the app bar
because everything is built up for you
inside the app bar you have the title
which you will use inside a widget you
can see right there and we will use the
text widget inside we will just call it
flutter you can put anything it will put
flun map and now you have the title if
you have the title on the left side is
because you are using more like Android
stuff if you use Android you can fix all
of these by using by example it's Center
title and you can say true or if I say
false I will go on the left side okay so
this is how you use it the difference is
with flutter IOS and Android have some
differences all right and the difference
is uh if there are I will try to tell
you and it's very rare it's like 1% of
widget that have differences so you
should not have that big of problems all
right anyway so we have the app bar next
what we have inside is other arguments
called deleting we have used this one
previously we will put a simple icon but
uh an icon an icons dot what do we put
uh login I don't know let's save after
this we will put another thing called
the action arguments so this one have a
list and it will be a list of multiple
things that goes at the end of the bar
so what we could do is we could put an
icon again or let's use a text widget
doesn't really matter and we can put
anything and save so you can see that
this is at the end and you could just
copy also the icon and paste an icon
also and save you have multiple things
you can do with that so after this
inside the app bar you can press control
space and we will change the color so
say background color and you can say
colors. teal and let's save so this was
a lot of things about the app bar and
it's pretty much the the thing you will
need there's other arguments but you
don't really need them it's because uh
yeah they are a lot one one maybe you
could use is the bottom the bottom will
allow you to put like more stuff behind
uh under the title but uh yeah I don't
really use it so that's about it so I
see you in the next video
bye okay so the next thing we need to
talk about is how to add a navigation
bar at the bottom of your app so what
we'll do first thing first is we will
clean a little bit the application
because it's kind of ugly so inside the
app bar we will keep the title we will
remove uh Center title I will say true
and we will remove the action and
leading and background all of these and
save great we will also deleting delete
this and it's better next thing we'll do
is we'll go inside the scaffold we have
the app bar and after the app bar we
have the bottom navigation bar so we'll
use this and if you go over you will see
that it does take a widget and the
widget we'll use is the navigation bar
so the navigation bar will take
destination
all right which is a list of widget what
we'll do is we will remove this and we
will put a list and we will say
navigation bar destination uh or
navigation destination like this now we
need to give it an icon so I will say
icon icons. home I will format document
so you can see better I will put all the
commas and save after this we need a
label the label will take a simple
string so we will say home
and save now we have an error so I will
put all my commas also and we will need
to fix this so again I told you that
inside this course I will show you my
two step to fix errors this uh will just
fix it real fast if you understand it's
good if you don't doesn't really matter
because I will explain you later so what
we'll need to do is we'll just read this
the destination do land need to be
bigger or equal to two which mean this
thing need to be have at least two items
inside so I will copy the navigation
navigation destination and I will paste
another one and save so now we have two
items which make the application work we
will change the second one for profile
and the icon will be uh I think it's
person and let's save great so now it
look better but after this you can see
that it's not clickable nothing happen
when you click on it we will fix this
later by using the stateless and
stateful widget but for now now what we
could do is we could just change it uh
manually so by example if you go inside
after destination inside the navigation
bar you you press control space and you
have the index maybe uh selected index
so if you put zero it will be the first
one and if you put
one then it will be the second one so
you see we do it manually so another
thing we could do is UN selected
destination selected if you press
control space you will see we have this
value that returns something so this
function will return the value that we
have clicked so if you go over value you
will see that this take a int so I say I
will say int just to define the type all
right so it's more clear and after this
inside the function we'll use the print
function that we know and we will print
the value and I will put my semicolon
and now let's save if we open the
terminal or the debug console and I will
restart the app all right if we click on
home you see we have zero and if I click
on profile we have one so now we have
access of this index but it's still not
updating we will do this later inside
this course that's about it and uh I
will just delete the print and we can
move on to the next video I see you in
the next one
bye okay so the next widget is the
floating action button this one is
pretty cool if you remember when we had
our first app we had a little button on
the side where where you were able to
click or something like that so what we
will do is we will recreate this button
we will go inside the scaffold again and
inside the scaffold we will create the
floating action button argument and use
the floating action
button Floating Action button widget
great now the unpress you will delete
and you will press control space and you
will use the second one the second
function and now you can format document
and save you see the little button right
there that's great now we need to Define
an icon for this so we will go inside
and in the argument we will say child
and the child takes a widget if you go
over so you will say Nikon and inside
icons do add or anything so now you have
a little plus sign a little button again
if you want to make sure that it does
work you can use a print function and
print anything inside put the semicolon
and check inside the debug console so
when I press on it I need to save first
when I press on it I have this print
okay so this is how to use the floating
action button another thing I need to
show you is what about you need two of
them so you can wrap this Floating
Action button because it does take a
widget and it's not required to be
exactly this so we can wrap it with a
column so refactor wrap with a
column and then inside you can just
paste another Floating Action button and
save and you can see that this is not
working and it's because the column we
need to change the main access size to
main access size. minimum so main access
size. minimum and save great we have two
of them and we could also use a sized
box widget with the height of maybe
10.0 and use this so this is how it
could look all right so that is how to
use the floating action button with flut
and I see you in the next video
bye all right so let's talk about the
dryer widget this one is pretty cool I
don't really use it as often but it's uh
it's there in multiple apps so I need to
show you this inside the scaffold you
will go and you will write the drawer
argument inside the drawer you will use
the drawer widget pretty simple and if
you save just by writing this little
code now when you press on this you will
see we have a drawer pretty cool right
after this inside the drawer what we
will do is we will change maybe the
child the child is what is inside and
what we'll do is we will use a listy
let's use this let's use a listy and use
a title with a text saying I don't know
lug
out and let's save so now if we reopen
the thing we have the listy right there
but you can see that it's still weird at
the place it's a it's at a weird place
so what we need to use is a draw header
so what I will do is inside the child I
will wrap this listy I will say
refractor and I will wrap it with a
column and inside the column I will use
a dry
header like this all right and the child
will be a simple text or anything saying
draw and I will put my commas save and
format document and now you can see that
it look way much better all right so
this is how you can create a dryer with
Flare pretty simple stuff so that's
about it and I see you in the next one
bye all right so let me show you one
more widget which is pretty cool so you
remember when we opened the drawer and
we had like the log out inside the the
timer it was pretty weird so what we
will do is we will R delete the dryer
and I will save again and now you see we
have the log out but one thing you can
use with flutter is called the safe area
so if I wrap the dryer like this and I
say refractor and I wrap it with a
widget call the save area and the save
now you see that the drawer will not go
on the place where the the timer or the
notch camera is it will never go there
all right this is pretty cool and
another thing you can do is you can
actually I will go over the safe area I
will wrap it refractor and I will remove
this widget and instead we will put it
maybe over the scaffold let's see what
happen so I will say I will go over the
the scaffold I will right click refactor
and I will wrap this widget with a save
area and let's save so now you can see
that even the bottom and the top which
have some stuff is not usable in the app
anymore so this is how I use it so I
will red delete this and also the drawer
we will delete it also let's save we
will remake our app look clean and we
don't need the drawer anymore The
Floating Action button we can de delete
this we will not use this neither so
this is I will put this as zero and we
will fix uh the bottom navigation bar
later also so this is our application so
let's work and let's start building a
real app from this that's about it see
you in the next one
bye okay so before we start building a
real app we need to make sure that you
are able to fix bug by yourself with
flutter so when you build your own
application you are able to endle
problems and build your own app yourself
right so what we will do is we will talk
about the two types of Errors inside
flutter and I will show you how to fix
both of them so right now it's the first
type and the first type will happen and
you will have these things like that you
will have like a red curly line under a
text what you need to do is you go over
and you will see expected to find you
will find the error right there so it's
expected to find a coma the reason is we
cannot put like an argument and then a
widget without separating another comma
in order to display another argument so
this was the first type of error if you
have this or if by example you you are
missing one uh bracket so let's delete
the bracket you will see that if we go
there it's saying expected to find a
bracket
so you need to put it back all right you
will see sometime U it's less obvious
maybe if we do this you see we have a
problem but the only thing you have to
do when you have the red problem you go
over and flutter should usually give you
the answer all right so this is how to
fix the first type of problems with
flutter so I see you in the next video
to show you the second type
bye okay so to fix the second type of
problems usually you will have a red
screen on your application and sometime
you will not have the screen but I will
show you both ways are the same so this
is the second type how to fix your
errors with flutter so what we will do
is first I will delete one navigation
and I will save this create this create
an error all right if you don't have the
red screen and you know that your
application is not like responding the
way it should be what you can do is you
can open the terminal and you will see
inside the debug the that you have some
sort of problems all right so when it's
not working just check in your debug
console and check out if you have errors
right now the problem is telling me like
the first link is saying go to the
navigation bar so usually when you have
a problem it will give you a lot of
links but you can see that many of them
is not even like project of mine right
it's like flutter or Dart programming so
what you will do is you will find
something that you created by example
the navigation bar the dart let's find
out what is inside so this is not ours
but you can see that we have a problem
with the destination Uhl Which is less
than two all right so right now if you
go you see that the main. dart this is
my file so usually it will be the first
second or third link third link and you
just click on it and it will tell you
exactly where is the error inside your
code so you can see that when I click on
it boom I'm redirected to the main and
exactly to the place so so I know that I
need to add another
Navigator like this so let's do this
again but with another problem so let's
say I replace the title with a
container a container and I say height
and I say double. infinity and I save
now let's restart the application and
you see that we have some sort of errors
but it's not visible in the application
you see we have an error about the size
of the the widget because we have an
Infinity inside na bar which take like
maybe just this size okay so let's fix
this let's go at the the top and let's
find the link that bring us to the
problem so you see that we have some
sort of box constraints let's see where
it is it's not this one it's not this
one so let's find uh we have toolbox
toolbox you see sometime it's less
obvious but it should be at some Place
isolate okay so it's not
available sometime it can happen so when
it's not available then you have to find
it yourself so what you will need to do
is you will say bu cont train Force an
infinite height so you need to figure
out yourself like why you could either
take this and go on um on the internet
and search about this like flutter box
contrin Force infinite height and it
will tell you that you have like an
infinite inside uh uh something which is
not infinite so we will delete this and
save and now if I restart the
application you will see that we don't
have the error anymore but let's create
another error by example colors and
let's say colors. red and now we will do
another thing is uh decoration bug
decoration and now let's save you see
that we have the error but what we can
do is we can restart the application and
we can click on the first link so you
see we have the container which is not
this one but we have the main if we
click on it it will tell us exactly
where is the problem so you see that
sometime the link is not
available but if it's not a available
you have all the errors and then you can
search online on stack Overflow this is
the way to fix your errors with flutter
all right so you need to take attention
to the debug console look at the screen
and look at pretty much these place and
find your answers that's about it see
you in the next one bye
okay so we need to talk about null
safety right now what is null safety so
first thing first we need to remove the
error so I will put back the
title like this I will do contrl Z and
now we have our title back and the
application is working perfect so we
need to talk about null safety what is
null safety let's create a variable
called string title is equal to flutter
map
and I will put my semic colum and now I
will replace the title for this variable
and now let's save you see that
everything works but what if we tell
flutter this value can be null all right
nothing change but flutter is telling us
all right this value can be null so you
need to tell me like are you sure that
it's not null currently so what you can
do is you can put this and you say to
flutter I'm sure that this value is not
null so let's restart and you can see
that nothing changed but this value is
now nullable so what happen if you
remove this and you restart the app you
will see that you have an error and this
is because it's null and then you tell
FL I'm sure that this is not null so
this is how you play with null safety
you can Define nullable value and if you
want to say like okay I'm sure that this
value is not null you define this
sometime you will need to create null
value so this is how you do it but most
of the time if you were able then just
create values like this and you should
have the minimum amount of Errors so I
will delete this and this was how to use
null safety pretty pretty basic stuff so
let's restart this we have our name
great so that's about it and I see you
in the next one
bye let's talk about the states so there
is three things we will talk about in
the further video and this one and it
will be the state full widget so the
state full the state less and then it
will be the set state so what are these
the stateful widget is a way to tell
flutter that the screen can refresh this
so
this can
refresh
this can't refresh the screen and this
is to refresh the screen whatever I'm
tired okay so you can you can refresh
the screen with the state fold you
cannot refresh the screen with a stat
less and this is uh this is telling
flutter I want to refresh this screen
right now so let me show you a real
example first thing first we will create
a new class and this one will be called
this uh we will use a state fold widget
this thing so click on this and then you
will write it maybe um uh my H or my
homepage my homepage whatever so you
will use this and then we will replace
this placeholder for the entire scaffold
widget so we will take this scaffold and
we will cut all of this and we will
paste it right inside this so let's save
we'll remove the constant and we will
save great and now we just need to put
in the home the name of this so my home
page and now we can save and you will
see that nothing has change yet but we
can now use a state full widget and we
can reset this or we can refresh the
screen to change the navigation bar so
that's pretty cool so what you will do
next is you will go over the override so
there is always two place where you can
put your variables and stuff either over
the override or after the build okay so
it's here or
here and right now because each time we
refresh the screen we rebuild the entire
widget so if you put your variable there
it will always rebuild so you don't want
to put it there right now so what we'll
do is we'll say int and this will be the
current
index and we will start at zero like
this and we will use the current index
inside the selected index like this so
now if we refresh still nothing changed
but we will be able to use this pretty
soon oop I don't know why this is not
profile profile and I will put this as a
person all right so it look better so
what we will do next is we will go
inside the function and we will change
this we will say the current
index is now equal to the value that we
receive from the UND destination
selected so now if you refresh again
nothing will change and the reason is is
because we are using a state fult but we
are not resetting we are refreshing the
screen we need to use the set state so
what we'll do is we will say set
State and inside the set State we will
show what we want to refresh so now if
we use home or profile we are now CH
changing page which is which is pretty
cool and so this was it another thing I
want to show you which could be
interesting is if you go inside the body
now you wonder like how do I display one
or another widget you could say by
example current index is equal to zero
if it's the case then display um I don't
know uh Center widget with the text
hello or the text one and if it's not
the case
then and don't worry if you don't
understand because we will do conditions
a couple of times so it will make sense
eventually this is just a conditions if
the current index is equal to zero then
display this otherwise display the
second one so now if we save you will
see one and when you click on profile
you see two so this is how you can
create stuff all right so that's about
it for this one and I see you in the
next video
bye okay so I know this was a lot of
things to learn to create this just this
little thing all right so what we will
do is inside this video I want you to
relax and I want you to watch what I
will do okay because I will redo
everything I just want to make sure that
you understand each step of the process
and sometime it's fun to have a a
biggest view of what we have created so
I will show you what we did in four
simple steps so I will delete everything
and what we will create first thing
first is let's define the steps we need
a material
app then what we need is we need a
scaffold after this what we need is um a
nap
bar I with a title and then we need a
bottom navigation bar whatever so it's
just four steps so because we will need
to use a set State inside the navigation
bar then we will need to use a state
full widget all right so this is what
we'll do we'll say State full widget and
then we will call this my
app and then inside we will remove the
container and use a material app and we
will save now you see that we have the
debug Banner so we want to remove this
what we will do is we will say uh debug
Banner
false and then we need to change the tee
of the application do you remember how
to do this it's inside the matal app you
will say tee and then you will say um
you just go over you will see team data
yeah team
data and then you go inside and there is
something called the color scheme and
you use the color scheme do from seed so
color scheme. for from seed so in this
way you just have to give one color and
flutter will all the stuff for you which
is really cool so you will say
colors. teal or the color you want then
I will say comma comma and save great so
now I will restart the app and you see
that we still have nothing because we
don't have any scaffold so inside the
team uh inside the material app what we
will need to do is we will create the
home argument and say
scaffold so this is the skeleton of our
app next what we want is this to be dark
so I will say uh
brightness brightness.
dark comma save and this is what we have
great uh next we need a naar so we say
abar argument and the widget is a simple
abar the argument title will require
widget which will be a text widget and
it will be flutter map let's save great
the next thing we need is a simple
bottom navigation bar so we will go
inside the scaold and we will say bottom
navigation bar and then we will say
navigation bar and the
destination we will put a list and then
we will save now we need to have two
navigation destination so navigation
destination the icon would be a simple
icon and then um icon
home icons
home and then the label will
be uh let's put
home home all right it's terrible my
typing
home and now we need another one so I
will just copy this copy paste and I
will say profile and then I will say
person
great so we just need to use this and
change the index so we will go inside
the bottom navigation bar or the
navigation bar widget and we will change
the selected index and this will be a
selected index variable that we need to
create right there before the build we
don't want it after the build because
otherwise it will be rebuilt every time
we clicked so it will be
selected index is equal to to
Z finally what we need is to unchanged
so on destination select a change we
change the value and we give it a type
just to make it more clear and then we
say selected index is equal to the value
and that's it so now we can refresh the
app and we have oh it's not working
because we don't have a set state we
need to put a set State and then we put
the selected value inside
save and restart the app and now we have
something working great so you see how
it's not that complicated we have only
four things the material app the
scaffold the the app bar and the bottom
navigation bar at the end so that's
about it and I see you in the next one
bye okay so with flutter the goal is to
create the smallest widget possible
so you will need to split your widgets
inside different files and I will show
you how to do this and the reason is by
example when you click the set State and
you refresh this little button to just
refresh the screen you don't have to
refresh everything because right now
when you click on it this will go to the
build and refresh the material app
refresh the scaffold and refresh
everything and this will slow down your
application so what you need to do is
split into different widgets this is
what we will do we will go inside the
library and I will click and I will say
new folder I will say widgets so this
will be a splitted widget that goes
inside this we will create another file
and this will be the nav bar widget so I
I like to call the name widget at the
end so I always know like what it is all
right so you will go inside Navar widget
and you will create this one we will say
State full widget great we will call
this one the nav bar
widget and then we need to use the
import M so I will say import M if you
don't have import M it's because you
don't have the extension uh it's just a
shortcut so you will need to write the
entire thing otherwise great so now we
have our napar widget we can delete the
container and we will paste what we had
in the main so we will go inside the
main and we delete all of this I will
cut it instead so I will cut this and I
will say Navar
widget so Navar widget so now this will
redirect to the widget we created Navar
widget great and you will paste this
thing okay a couple of things first when
you define the name of these files use
all lowercase letters with this little
thing to separate them great but when
you create the class use the capital
letter and try to use the same name so
Navar widget Navar
widget okay the next thing you need to
do is you will need to reput the
selected index I will go inside the main
and I will cut this thing and I will
paste it inside navigation bar before
the override so over the override
remember two place you can put your
stuff over the override or after the
build after the build it will be rebuil
so it will not work so let's refresh and
now you see that our application is
still working but we only
we only reset refresh the this part of
the application instead of refreshing
the entire my app which is crazy great
so that's about it and another thing you
might ask is what about now if we want
to have inside the scaffold a body if we
have a body and then we have some pages
inside how do we have the value which is
inside the navigation bar widget how do
we have access to this information
and this is what I will show you in the
next video see you in the next one
bye okay so now we have a problem we
have the data inside the navigation bar
widget but we need also to have the data
inside the main so first thing first
what we will do is we will separate the
scaffold and I will create another
folder this one will be called views and
inside views we will create another
folder called pages okay inside the
views also we will create maybe another
file this one will be called the widget
3 oops widget 3 do Dart this will be
like where you start your application
and then you will go inside pages so
let's create other Pages we will say
this one will be called the homepage do
Dart and then I will move this on the
side so you can see better and then I
will create another one new file this
will be the profile page Dart and you
will see after we have created all the
pages and the view then I will show you
how to use the data and so you can use
it inside any Pages you'll see this is
pretty cool so we have the widget tree
this one will be a simple stateless
widget and then we will need to import
the material so import
M import M great we will need to change
the name for widget
three okay and then we have inside what
we will put so we'll go inside the main
Dart and what we will remove is the
entire scaffold so let me remove this I
will cut this and I will say widget
three uh do we have it widget three like
this perfect so this will redirect if
you want you can press control and click
on it this will redirect to the widget
tree so now we can put the scaffold B it
inside and we need to have the import of
the nav bar nav bar bar so I will say
Quick Fix and then I will just just say
import this one all right so now we can
go in the main again we can delete the
comments and we can delete the unused
reference great so let's restart the
application everything should still work
but we still have the same thing on the
screen let's do the next step The Next
Step will be to create another stateless
widget so this one will be maybe
stateless widget we need to create
another import again import m
great and now we will change the name
for profile page great inside this one
what we'll do is we'll create a center
widget it's just to see something on the
screen so I will say a center and then I
will use a child which will use a text
widget all right this one will be
profile page just like that great so we
can copy all of this I will say control
C and then I will paste it inside
homepage so let's go inside let's paste
it and then we will replace the name for
home page simple as that and we will
replace this also for home page so we we
see the text homepage great so now we
can close all things and we can reopen
the widget 3 so this is where we will
endal the data all right so the next
thing we need to do is we need to create
a variable Pages by example a
list a list of
widget so so this is just the type
inside is just the type of what will be
inside the list so this will be the
pages and this is equal to a list
because we tell flutter it's a list and
inside we put widgets and the widgets we
will put are the two page we created so
the
homepage and then the profile page great
so now we have access to these two pages
the next thing we need to do is to go
inside the scaffold and in the body like
this and will say
pages. element at and with this we will
be able to Define either zero which will
be the home page or either the value one
which will be the profile page all right
so this is pretty much we what we have
to do for the view now let's talk about
how to create the data and pass the data
all right so we'll go inside the widget
3 and inside this one we need to access
this information so I I think we will do
that in the next video just to separate
I will do this video maybe uh uh
creating the structure of this
application and in the next video I will
show you how to end all the data so you
have the two things separate that's it
see you in the next one
bye okay so how can you end all the data
from anywhere inside your application so
right now we only have the selected
index available inside the navigation
bar widget but we need it ins inside the
widget view in order to display either
the first or the second element so let's
do this first thing first we'll go
inside and oh the widget we should put
it inside the view so let's put widget
inside the view I will say move and
everything should be endle automatically
so that's good and next we will create
another folder inside the Library called
the data all right so let's use data and
then we will create another file this
one will be the
notifiers do Dart this is where we'll
put all our notifiers and there is two
things you need to remember when you use
notifiers or when you want to end all
data like this first you will need to
use a value a value
Notifier the second one is you will need
to use a value
listenable Builder Okay so the value
Notifier this one will be the one that
hold the data and then the value
listenable Builder it will listen to the
data so if the data change it will
change and in this case you don't need
the set State all right so pretty simple
stuff let's do this now what we do is we
will create this value Notifier uh value
yeah value Notifier I will press this
will automatically import the material
so we have the value Notifier let's call
this one the um
selected page page selected page and I
used to I like to call Notifier at the
end also so now I know that this will be
a value Notifier because it always end
with notifiers and next we need to
create a value Notifier and inside we
will put the value which will be a int
either one or zero so we'll say zero as
default and we put our semic colum so
now we created our value Notifier we can
use this but you can also Define the
type just to make it more clear this is
a int okay
next we need to go back inside the
widget 3 or inside the navigation bar
widget and we need to wrap our
navigation
bar with the value listenable Builder so
I will delete all of this I will cut it
instead and I will say value oops value
listenable Builder inside the value
listenable you put what you created
inside the Notifier which is the
selected page
Notifier ntif fire like this so I will
use this it is the selected page
Notifier and then for the Builder what
you will need to do is you delete this
and you press control space flutter will
tell you what you need to put inside so
we will use the second one this one with
the curly bracket inside this one you
will need to return what you had
previously which was the navigation bar
at the end you need to put the semicolon
otherwise it will not work so semic
colum and now let's save okay we have
access to this selected page not ER
which is this value the this thing but
we will re rename it the selected page
so it make more sense okay so we can
delete the selected index and we can
delete the set State because we will not
use this anymore and the selected index
is now the selected page which is this
value coming from the value listenable
Builder which use the selected page
Notifier inside the Notifier this thing
all right
so after this what can we do we can
change the selected page and in order to
to change this value the selected page
Notifier you need to call the real name
so selected page
Notifier do value so this will change
the value which is inside this thing all
right and next you can just put this
value to the value that we receive from
the on destination selected so you can
say like this put the semic colum and
now uh we don't have the we don't have
the value anymore so everything should
be fine we can remove the state full
widget by putting a state less widget
instead so what you how you do this uh
it could be nice if you just were able
to right click and say refactor and put
like oh apparently you can do it oh
that's even better I didn't even knew it
so that's cool because usually I was
just doing like from the override to the
override and then you delete the state
full to stat less and it does the the
same thing but you can just refactor
that's cool and after this what you can
do is uh now it should work so let's
restart the application and see if
everything still work we have the
profile it does work indeed so that's
fine but now we can access if you
understand we can access this selected
page Notifier from anywhere inside the
app just by using this so we can go back
over the widget 3 like this and we can
wrap this thing the body with the value
listable Builder so I will delete
this and I will say value lonable
Builder inside this one we'll need to
put the
selected selected page Notifier the
thing we created in the Notifier and the
Builder we will delete this and say
control space and we'll say flutter will
give us the answer so we'll use the
second one and after this you can say I
return and you return what you had
previously the page at element at great
so now we are we are only missing one
step and is to put the value inside this
so you could directly put value like
this you could rename it selected page
uh selected page it could be a better
practice maybe so let's do this and
that's it I think so let's uh refresh
this and now if we click on profile now
we have the profile and now if you click
on home you have home so this is how you
UL the data with the value listenable
Builder and the value Notifier so if you
remember you use two things value
Notifier and value listenable Builder
that's it this one will hold the data
and this one will'll be able to listen
to the data and you don't need a set
state with this so that's pretty cool
that's about it see you in the next one
bye okay so I know this was a lot of
things to remember so what we will do is
a little challenge okay if you want you
can just watch and see if you understand
otherwise you can try it by yourself
before so the goal of the challenge will
be to create by example if you go in the
widget 3 you see how we have is it it's
inside the main. dark you see how we
have a brightness. dark but we can
change this for light and save and now
we have a light mode so it could be cool
to have some sort of Boolean that will
either say it's true or false but you
will need to use the Notifier for this
all right so let me just show you we
will say by example is dark mod
uh
Notifier Notifier and we will set this
as false when we start the application
or we can say true instead because it
will always start like this and we need
to change this for a Boolean okay so
this is what we you will need to do you
will need to create some sort of logic
inside the main in order to display
either the brightness light or
brightness dark by using the
Notifier okay so we can do this right
now and there is maybe one thing that
uh I haven't told you and it's about how
to create buttons all right because we
will talk about this in the next module
you will see it's all about user input
and it's Pro probably one of the best
module because this is where your
application start to uh take life okay
you have buttons your screen change and
you create a real app so for now I will
just show you one widget which is called
the um icon button so we will go inside
the widget 3 and inside the widget 3 go
inside the ab bar and we will replace
the trailing or is it I think it's
actions yeah inside the actions we will
put One widget called the icon button
okay inside the unpress you will delete
and you will press control space and you
will select the second one the Mt
function and then the icon will be icon
and then you say icons do light mode
maybe let's try this so we have light
mode we put all our commas and now we
have this so your goal is when you press
this little button it change for either
the dark mode or the white mode and if
you want to go even further than that
you can also change the icon for dark
mode like this so every time you press
this icon change and also the entire
screen all right if you don't know how
to do this uh then you can watch the
next video I will give you the entire
solution otherwise you can try to do it
by yourself uh
anyway it's up to you you decide and I
see you in the next one for the solution
bye okay so this challenge might be
pretty tough for you so if you were not
able to do it just watch the solution
and then try to do it by yourself after
and you will see at one at one point you
will be able to do it by yourself and
you will see how you progress with
flutter all right so let's start right
now I will show you the solution for
this so we wear inside the Notifier and
we created the is dark mode Notifier
let's use this inside the widget 3 first
so I'll go over the icon I will cut this
and I will say value listenable Builder
the value listenable is the is dark mode
Notifier and the Builder we will press
control space and select the second one
then we will be able to return the thing
we had previously the icon dark mode and
let's put the semicolon refactor and
Save this is what you should have okay
so nothing has changed yet but we have
access to the is dark mode value so I
will copy this I will change the name
and now we will use this information in
order to change the icon so we can go
inside uh the icon and we can say is
dark mode if it's the case then display
the icon dark mode otherwise display
icons. light mode oops uh light mode and
let's say save so now when I press on it
uh nothing happened because we need to
also create some sort of button so I
think it was the icon button onpress on
the unpress what we will do is we will
say the is dark mode Notifier value is
now equal to the invert of what it was
so you can say you can take this again
and you can say this will be the
invert like this so yeah this was maybe
not uh really easy to to see coming but
if you have already worked with some
programming you were probably able to to
figure out anyway so let's do this and
now if we refresh you will see that when
we click on it it does change the icon
so let's do the same thing but for the
light mode inside the main we will go
over the team data I will select all of
this I will cut
it and what I will say I will say value
listen I'm not even sure if I will be
able to put this inside
inside the teee no we absolutely require
something else so what we'll do is we
will wrap the entire material app so
will say this I will cut it and I'll say
value listenable Builder and then it
will be is dark mode Notifier then the
Builder control space you select the
second one and then you put a
return return and you paste the material
app great now we have access to the is
dark mode I will copy this and rename
this for is dark mode and then we can
finally use this inside and say is dark
mode then brightness. dark otherwise
Darkness dot uh brightness. light so
let's refresh the screen and now we have
this so when we press on this we have
the light mode and the dark mode so
maybe we could reverse this logic we can
go inside the widget 3 and we can
say light mode
and then we can say dark mode and maybe
it will make more sense so when we press
on the sunshine it goes to White mode
and dark mode so this is how we uh use
the is or or the value Notifier inside
flut we have done uh second exercise if
you were not able to do it yourself it's
uh really understandable because this
was kind of tough was pretty tough uh
even though so try to do it again try to
do it by yourself once you're able to do
it by yourself you really get it and
then you can move to the next step
that's about it see you in the next one
bye okay so now let's talk about user
inputs this will be all the widget that
the user can interact with by example an
icon button or a button or a text field
where you enter your email by example so
we will learn about this and the first
one is the text field widget so let's
let's go inside the profile page and we
can close all the the other tabs and we
can just go inside profile page perfect
for this one we will replace the center
widget we will delete this and we will
write a column widget instead after this
inside you will press control space to
see all the arguments you will use the
children and inside the list of children
we will write a text field widget so you
can put your Kaa save and this is what
we have so you can enter text and that's
it so how do we use this information and
how do we modify this to make it look
good so first thing first we will make
it look good we will say by example
decoration and this will take an input
decoration input decoration inside this
one we'll use the Border okay and in the
Border you can see that we will need to
put some input border but it's better to
use instead the outlined input border
okay because you will see why in once
again if I put my coma and I save this
is how it looks so you see it's a little
bit better I think in my opinion but if
you don't want this one you can put the
the input border the underline input
border this one was the previous one
anyway so we'll put the outline input
border and then what you could do is you
could put a padding around the column so
refactor and then wrap with a padding
okay so now maybe you can put
20 and save so this is your text field
but how can you access the
data and display it in the screen so for
this what we will do is we will say we
will put a state full widget so I will
say refactor and I will say State full
widget okay so we will use the set State
inside we don't need the data anywhere
else so that's fine so inside the text
field right after we will put a text
widget displaying the information so how
do we display this first we will need to
create a controller for the text field
so for this I will go write over the
override and I will say text text
editing controller we'll call this one a
simple controller and we will Define it
as a text editing
controller don't forget to put your
semicolon and inside your text field you
will put a controller
argument this one and then you will put
your controller inside the thing we just
created all right so now we have access
to the controller which can display the
text inside like this all right so now
when we write the text and we press
enter and then if we restart the the
this out reload we see the text inside
okay but how can we reload it from the
screen directly so what you can do is
you can say you have multiple options
but on one of them is um
completed on editing completed all right
so this will return a function and
inside when it's completed then what you
can say you can say set State and you
can say that the value uh or you just
can say set State set State should work
and do the the job so let's try it I
will say restart and I will go inside
profile and I will write something and I
will press enter and here you go you
have the thing inside we have to refresh
the screen with the text controller that
text so it does work so this is how you
create a text field so that's about it
and I see you in the next one
bye okay so the next thing I want to
show you is how to create a checkbox so
right after the text we will create a
widget checkbox inside this one we need
to put a value which will be true or
false so we will create one we will say
Boolean um is
checked is equal to false let's put
false when we start and then what we can
do is we can replace this for is checked
great for the unchange you will delete
and you will press control space and you
will have two options so we will select
the second one and then what you will
say is first the value what it is it is
a Boolean question mark so let's say
Boolean question mark it's because it
can be null and then what you will say
is you will say uh we have the value
let's set State and then inside we'll
say is checked is equal to this value
right but now we have a problem because
this value can be null so what we will
do is we will replace our Boolean for a
nullable Boolean all right so now this
should work if we press on it we have a
checkbox that's great so now let's
create another checkbox but this one
will be a list
T so let's create a checkbox list tle
great the value will be the same so is
checked I will paste it and the unchange
will be the same so I will copy the
function this thing and paste it right
there great so is the same thing but the
ly can have a title so the title you can
put a text widget and write click click
me all right so this was your listal
checkbox
but also what you can do with the
checkbox is you can put it as a tri
state so we will say TR State and then
we will say true this mean that it can
have three value so let me show you if
we click on it now oops we can see that
we have some sort of error I will
restart the screen and let's see I think
it is because of the checkbox I need to
put this one also as a true State and
say true all right so now if we go
inside profile and we click on it we
have clicked we have nothing and we have
un unselected so we have three state so
that's about it for the checkbox I will
put all my commas like this and I'm
ready for the next video so that's about
it see you in the next one
bye okay so one thing we need to talk
about is the arrow function let me show
you you see inside the text field we
have a set state so what we'll do is we
will remove this and instead we will use
the arrow function so let me show you
usually we use this one but this one
allow us to put multiple function inside
but the arrow function will tell us okay
do only one thing after and it is this
the set state so if you want you could
create something like this and it will
do the same thing because when you
complete and you press enter you see
that we have the screen the text on the
screen so it does work so the set state
is the only thing that you want but if
you want to print something also you
cannot use this thing instead you will
need to come back to what you had
previously and then you can put two
things inside the print function set
state has been clicked or whatever you
get it and then you put your semic colum
and it will work so that's the the
difference between the the empty
function normal or the arrow function
that's about it and I see you in the
next one
bye so let's talk about the switch
widget so it will be pretty much the
same thing as the check box we will do
it right after the checkbox list sty and
we will say switch so you see first we
need a value so we will go up and we
will create a Boolean but this one will
not be nullable just a Boolean and we
will call it is uh switched is equal to
false when we start so let's use this
Boolean inside the value after this we
will change the unchanged and we'll say
control space and we'll select this one
okay after in inside what we need to do
is we need to use a set State and we
need to redefine the value is switch uh
is switch to the new
value and this new value should be a
simple Boolean so it's better to just
Define the type okay so we should be
able to switch this thing which is
really cool the next thing we will do is
put a comma and put a switch listal like
this and the value will be the same we
will use the is switch and for the
unchange we will copy the entire
function copy and paste it inside put
your coma format document and save great
the only thing we need is now a title so
I will copy the one from the checkbox
style and I will paste it inside the
switch list St so now we will write
switch me instead all right so this is
what we created you will see in the next
video I will show you some pretty cool I
don't want to talk about it right now I
see you in the next one
bye okay so let's talk about the dot
adaptive this one is pretty cool because
it will Target the the the current phone
and it will display the widget in a iOS
style or Android style so right now this
is Android style but I am using a iPhone
so it could be nice to have the visual
of the iPhone so we will go over uh
switch ly and I will say do adaptive and
if we save you will see that now the
icon is automatically adapted to the
current phone which is an iOS all right
and you can do this for the switch also
do adaptive and you can do this for the
checkbox style in the checkbox so let's
save and now you can see that all of
these are now iOS looking which is
pretty cool so it's up to you if you
want to use the Adaptive inside your app
um I think it's cool and I just want to
tell you that it's not all the widgets
that are able to use the Adaptive it's
just a couple of them and uh yeah that's
about it if you don't see the dot
adaptive after your widget it's probably
because it doesn't exist so that's about
it see you in the next one
bye the next widget we will talk about
is called the slider and the slider we
will put it right after the switch list
sty so don't forget to put your comma
and it will say uh
slider slider like this and then the
value will be a double so I will go on
the top and I will go and write double
let's call this one the slider value is
equal to let's put zero that zero when
we start great so let's take this
information and put it inside the value
now we need to change this I we'll press
control space and the value will do
something okay so we will set State and
inside we will say that the slider value
is now equal to the value that we
receive from this function we can also
Define the type we can also say this is
a
double just make just to make it like
more Visual and now if we go inside
profile you will see that we can use the
slider and it is uh currently not using
the dot adaptive so we can use the dot
adaptive and now you see more iOS style
but it's interesting to see the value so
what we'll do is we will
print the data so which would be the
value put the semicolon and open the
terminal so now you see that when we
slide we go from zero to one but we can
also change this we can change the max
to be 100 or
10.0 let's save and now you can see that
it goes from 0 to 10 but the thing is we
don't have like fixed numbers what we
can do is we can create a divider or
Division and we can say that we will
have 10 divisions and if you save you
will see that now we have only chunks of
like numbers like 10 6 five and stuff
like that so this is how you use and
create a slider that's about it and I
see you in the next video
bye the next thing I want to show you is
how to create a button out of any widget
so by example if we display an image we
will be able to make this image
clickable but the thing is before I'm
able to show you this I need to show you
something else which is a widget that
the user can scroll through so let's
start by adding the image so if you
remember it was using
image. asset and then inside you can put
the asset of the image it was asset SL
image SLB
background. gpg in my case so you will
need to find the PATH inside your asset
image and this was your image all right
so let's put this but now if I put like
two or three you will see that we have a
problem with the height of the screen we
are not able to scroll so we need to
create a widget which allow us to scroll
through the page and this is called the
single child scroll view so let's go
over the padding I will right click and
I will say
refactor wrap with a
widget and then you will use the single
child scroll View and save now your
screen is now scrollable which is really
cool all right so the next step for us
will be to first delete one image and we
need to make this image clickable and do
something by example when we click on it
maybe to change this value or anything
so I will show you how to do this in the
next video bye
okay so how do we make anything
clickable so for this you will need to
wrap by example an image asset I will
right click I will say refactor and I
will say wrap with a widget the widget I
will use will be the gesture detector
all right you will put your comma also
at the end save so now you see better
now this is clickable let me show you
inside the arguments you have something
called the untap so this will trigger a
function which you can and use this one
and what we will do is we'll say print
and we will say image selected or
anything put your semic colum save and
now let's open the terminal contrl G
like this and use the debug console and
now when I click on it you can see image
selected so every time I click I have
another count great so this is how you
make anything clickable but I want to
show you another way to do it and the
the other way will also allow you to
make it look different so I will show
you everything in the next video that's
about it see you in the next one
bye okay so there is another way to make
anything clickable and it's with the
inel widget and I need to show you both
ways because there is a little
difference between both of them first
thing first we need to replace the image
asset with a container so I will be able
to show you what is the difference the
height of the container let's put 200
and let's put the width to double.
Infinity which is how the all the width
of the screen the next thing we will do
is we'll change the color and we will
use colors. white uh White 12 just to
create some sort of you can see if I go
inside profile some sort of color
different from the background all right
so now when we click on it we should see
inside the terminal the image selected
this thing perfect so this container is
clickable but nothing happen on the
screen when you press on it so let's
replace this with the ink well widget
and save now you will see that when you
press on it you have some sort of Splash
effect which which is pretty cool so it
depend of of what you need if you don't
want any Splash effect then use the
gesture
detector uh after this inside the inqu
you can change the splash color for
colors. teal if you prefer and let's
save now you see that we have have some
sort of teal and I think this with jet
is kind of cool so that's why I need to
show you both different the inqu and the
gesture detector that's about it and I
see you in the next one
bye-bye okay so all of this is pretty
cool but what we want usually inside an
app is a simple classic button and this
is what we will talk about in this video
so first for the in quilt I will change
the container for 50 just to make it
smaller perfect it's still clickable but
what we'll do after this in weld is we
will use a elevated button oops elevated
button like this we will change the
unpress for an empty function this and
then the child what we will put is we
will say a
text and inside the text we will say uh
click me click me like this and put all
your commas save and format document
there we go here we go so this is what
you should have after okay so we have a
button which is a simple elevated button
after this what do we want is we want to
be able to change the style of any
buttons so for this what you will need
to do is you will say style and then you
will say you will repeat the name of the
the widget so elevated
button elevated button dot style from
and now you're able to change the style
so if you want to change the first color
it will either be primary or background
color so let's try with color we have
the background color so this should work
let's put colors. teal let's save so
that's cool but we can change you can
change also the color of the text by
using the foreground color probably
foreground color colors. white so now
you can see better the text but you
don't always need to change the style
because flutter of for like four
different type of buttons all right so
what we'll do is we will create another
one or I will just copy this one and I
will paste it right under so what you
will need to do is I will remove the
style so you can see just the button
this is a normal elevated button this is
the one we
modified after this we can create
another one
under but this one will be the field
button so now you see the difference
between the elevated and the field
button there is another one also which
is called the text
button and this is the text button so
maybe you wonder okay but how do I
change the style of one uh field button
you do the same thing you use the style
and then you say field button dot style
from like this and then you can change
the style just like you did in this one
all right so we will delete this and I
want to show you one last button which
is this one we have the
outlined button which will create some
sort of outline around it but there is
also other kind of buttons let's talk
about them right now we have the close
button like this let's save I wonder
what this was does nothing but you can
create a function inside and I think we
have the back button also
and the back button is just like this
and you can change the what you do
inside the unpressed so that's about it
that's about buttons and uh yeah see you
in the next one
bye okay so one last widget I need to
show you before we finish this module is
called the drop- down button you will
see this one is pretty useful when you
have a list of selectable items I will
create this one right over the text
field so we can see it at the top and it
will be the drop down button great the
items for this one will be a list of
drop- down menu items so we'll create a
list and we'll use the drop- down drop
down menu item this one the child will
be a Simple Text widget and we will call
this the element one I would put all the
commas like this format document would
put more commas
for my document and the unchange will be
an empty function this great so this is
what you should have for the drop down
right now and you can see that it has
one element inside and one element in
selected so let's change this we will
copy this drop- down menu item we will
create another one and we will call call
this the element two and let's do a
third one element 3 element 3 perfect so
I will restart the application I we go
in profile and now we have some sort of
problem we will fix this right now um
inside the drop down menu ATM you will
select value and this one will be E1 and
will create other value for drop downs
this one this one this will be E2 and
this would be
E3 great next thing you need to do is we
need to create a variable for the value
of the drop down button this this one
will be a string it will be from this
one it will be a string nullable all
right so let's create one string
nullable
string nullable and let's call this the
uh menu item and say that uh we can keep
this null when we start great so let's
copy this and put it inside let's save
and restart the application so now if we
go inside profile you see that we have a
drop down which have inside the element
one element two and element three and to
make them selectable you will need to go
inside the uh the unchange the value
will be a
string like this string question mark so
we will put the type and inside we will
say set State and we will say that the
menu item menu item is equal to the
value so now when we click and select
element two it's now element Two element
3 element one so that's pretty cool and
another thing you can do is you can see
that right now we don't have any default
value if you want to have select element
one selected by default you can do it by
putting this as E1 because this is the
same key as this value all right so we
can restart and you will see that the
element one is already selected great so
this is how you create a drop down menu
item you have all the tools in order to
create pretty much any user input inside
your application at this point so let's
keep going to uh to build a real
application in the next module that's it
see you in the next one
goodbye the next thing you need to learn
with flutter is how to navigate through
different pages currently we are only
using the bottom navigation bar but it
could be fun to click this button and go
through another page right so what we
will do is we will take all this garbage
and we will put it inside another page
which we will call settings we will be
able to access it from the a button that
we'll put in the app bar all right so
let's do this we will first convert the
profile page for a SC something called
settings settings page all right next we
will rename this we will say this is now
call
settings and we can create another
profile page P I say new file profile
page. Dart we can copy the homepage
which what is inside we can paste it
inside profile page and just rename this
for profile page and rename also this
for profile page great so now you have
three of them renamed after this we will
go back inside the widget 3 and we will
say that this we need a quick fix and we
want want to import the profile page
this thing we can delete the old
settings reference great so now if we
refresh we should be able to see the
profile in the homepage now we need to
access this setting page but how do how
do you do this let's go inside the
widget 3 and inside this one we have the
actions so right under the icon button
you will say another icon button this
one will have a un press the onpress
will have this an empty function and the
icon will have an icon icons do settings
oops
settings great now let's put all the
commas and
save so now we have a button settings at
the top Corner we need to use this by
going to the
navigation or Navigator
dot push and we need to push another
page from this button so we will push
another page over this one what we'll do
is we need a route for this you will
always use the
material page
route and inside you will put the
Builder so the Builder will be control
space and it will be a context that
return something the something that we
return will be the setting page all
right so I know this was a lot of things
then you need to put your semic colum
your semic
colum right there and your coma and save
great so there was a lot of things but
at the end it's pretty simple we have an
icon button then inside we have a non
press when we press on it we use the
Navigator we use the navigator that push
because we want to push another page
over this one after this we use the
material page route in order to display
the setting page so if we restart the
application now now we probably will
have an error if we go inside the
settings and yes we have the reason is
let's go inside the setting page the
reason is we start with a single child
scroll view but we need to have a
scaffold we need to have some sort of
skeleton for this page so we will take
this entire um thing this entire single
child scroll view I will cut this thing
and put a
scaffold inside the scaffold we will
have the app
bar the app argument and inside a title
with a t text saying that this is the
settings page all right the next thing
we need to do is to put a body for this
scaffold and the body will be what we
have copied or cut which is the single
child scroll view all right so now let's
restart this application and you will
see that the home and profile are fine
and you can go inside the settings to
see this setting page with all the scrap
inside
that's pretty cool and you can also see
that flutter will automatically give you
a button to come back all right inside
the N the the app bar that is pretty
cool if you want to remove this you can
always use the uh automatically imply
leading and say false all right if you
do this when you go inside the setting
you will not see the comeback button
okay so this was how to navigate through
flutter let's go back inside again it's
very simple navig Ator material page
route and then you put your page that's
it inside your page you put the scaffold
and you have it so that's about it for
this one see you in the next video
bye so in the last video we have talked
about the navigator that push but now
it's time to talk about the Navigator
pop the pop will just remove the last
page so let's go inside by example the
setting page and inside the setting page
as you remember Maybe
is you have the automatically imply blah
blah blah so we can set this as false
let's save so now when we go inside the
settings there is nothing so let's
create this button by ourself what we'll
do is we'll say leading and we will use
a back button the back button is just a
logo of the back like this so that's why
we use this one after this inside we
will use a unpressed so in the unpress
we will put a function and now in inside
this one we will use the
Navigator dot pop just like this and
inside you put the context you put your
semic colum and you save so now you have
created the button to pop back all right
just heads up if you put this button
inside this page it will probably not
work so let's do it just to break
flutter just to see what will happen uh
let's do it inside this app bar and now
let's save you see you just break
flutter all right so just make sure that
you have a page previously if you use
the pop button so I will restart the app
and now everything still work okay so we
can go back inside the settings and we
can remove the automatically imply
leading because obviously it will it
will not be there because we put one
ourself all right so that's it and I see
you in the next one
bye so let's talk about the push
replacement instead so let's go back
inside the so I would close all of them
first and I will open only the widget
tree okay so this is where we navigate
inside the setting page instead of using
the push we'll use the push replacement
all right and now let's restart the
application when we go inside this will
not just push a page over the stack of
pages it will replace the previous page
so now because we still have the back
button that will po
this will create an error because we
have removed the previous page which was
the widget tree and everything so let's
restart the app and now if you go inside
settings you can remove inside the
leading the back button so we will cut
this I will remove this and deleting so
now if you save and you go inside you
will see that flutter will not put
automatically back button because you
are not able to go back there is no page
before all right so at this point you
have learned how to use the push
replacement this can be interesting
sometime when you have like a login
screen and uh the user log in on once
it's log in you need to navigate into
the homepage of the the application it
could be interesting in these place so
that's about it what I will do is I will
put back the push and uh that's about it
I think canel uh let's save and restart
the application just to see if
everything works we still have the this
and we can go back perfect so this was
the push replacement that's about it see
you in the next one
bye so all the navigation is pretty cool
but you might have a question like how
do I send data from one page to another
like yes you could use the notifiers but
sometime you just want to send like a
title to the other page like a
description page and that's it so I will
show you how to do this so instead of
going inside the setting page and
getting the information from this I will
send the information from the previous
page all right so for this you will need
to create some sort of arguments to
receive what we will receive instead is
the title so we will say uh required we
say that we required this
information okay we'll say this Dot and
it could be title so let's put the comma
and that's it after this we will create
the value so the final we'll say final
this will be a string title so when we
call this page we just give it a title
and then we can use this title inside
the setting page so I will use it right
there I will say title and one thing you
have to understand is if you are using a
stateful widget you will need to say
widget. tile all right but if you are
using a simple State less widget you
will not put widget before you just put
title and it will work right otherwise
it will not so just keep this in mind
anyway now we have an error inside the
widget 3 and it's because we need to put
the argument title and this will be a
string which you will put a simple
settings and save so now or even we can
put settings cure something else just so
you see the difference uh we will go
inside the settings and now you see that
the title is settings disting great so
the information is coming from the
widget 3 and then we send the
information inside the setting page we
end all this information as a title and
we use it okay again you use widget.
tile for a stateful and you just title
if you are inside a stat less okay so
that's about it see you in the next one
bye for this section what we will talk
about is clean UI widget so you want to
create an application that look good at
the end also right so this is what we'll
do we will merge them with the layout
widgets and we will create something
that look good at the end let's start by
creating a new file called the welcome
page. Dart okay this page first we will
import the material and then this page
the goal would be to have a button click
login or Reg
and go to the the homepage the widget 3
all right we will do this by creating a
stat less widget first which we will
call welcome page and inside we will put
a scaffold widget all right let's save
this and now let's go inside the main.
dart and what we will do inside this we
will remove the widget 3 and put the
well come page so now when we start the
application let's restart everything
when we start the application and we
restart you will see only a welcome page
the goal is to be able to navigate
through this to go inside the widget 3
so let's go inside the welcome page
first and what we'll do inside is we
will create a body so the body will have
a column and inside the column we will
have children great inside this one we
will use the widget I want to show you
in this video which is called the clip
or wrecked this one this widget will
follow you to uh create rounded borders
for any widget so in this case we will
use the uh child and inside we will put
the image we had previously so the image
asset and inside we will say it was
asset SL image SLB background. gpg so
you need to put the path of your image
this one asset image background gpg okay
and now let's save it's right there we
will put the column as the um main
access alignment main access alignment
do Center so it goes in the center and
now I want to show you the Clipper R
widget so you will say border radius and
you will say border radius. circular
then you will say 20. zero and save now
you see how the borders goes rounded and
this look pretty good so that's good and
after this we will wrap the column
refractor wrap with a widget and it will
be a padding
because we want to create like maybe uh
20
padding and it look a little bit
better this is where we will put like
the login uh information we'll just like
write login and we will have the button
login and register stuff like that all
right so this was how to use the clip
aret before we finish this video I just
want to add another button right under
so we will use a fill button this will
use the an empty function
in the child will be a text saying um I
don't know login like this I will put
all the commas save and now the only
thing we need to do is to add a
navigator so I will go first inside the
main. dart in order to remove the unused
uh path okay and next we will go inside
the widget 3 to copy the navigator that
push so let's copy all of this contrl +
C and now we can close all the tabs and
just use so I will say save and now we
will just use the welcome page okay
inside this one we will paste the
Navigator push and we will change this
for push replacement all right and
inside we will return the widget three
widget three like this so now let's
restart the application entirely and
click log in you see that you go inside
the widget tree where you have your
entire application there is no way for
you to log out right now but we will do
this later so let's refresh and this is
what we will keep working on to make it
look clean as a welcome page that's
about it see you in the next one
bye okay so the next widget I want to
show you is called the hero widget and
for this we will need to create another
file inside the widgets and we'll call
this the hero
widget okay like this do Dart after this
you need to import M so import material
and then we will create a stateless
widget which will be called hero widget
so this is what you will need uh next
what we can do is we will replace the
container with this entire image with
the rounded Corners so we can go back
inside the welcome page we can cut this
clip arct like this we cut this and we
call instead the hero widget okay you
can go back inside the hero wiet and we
will return the clip erect so let's save
nothing should change right now but we
can wrap this clip arct with the EO
widget so let's say
refactor and wrap with a widget we will
use the hero one thing you need to put
inside the hero is a tag you need to tag
this with a unique value so we will just
say for this example the hero one all
right but you need to use always a
different value for each hero Widget the
next thing you can do is we will plug
this hero widget first inside this
welcome page but also inside the
homepage so let's replace the center
with a column or first a
padding the padding will be ENT set.all
and it will be
20.0 and then we put a child the child
will be a
column and then in the column you will
put children so the widget and the
widget will be the
hero widget that we just created all
right so this was a lot of things but
this overall is what you should have so
you can pause the video if you want what
does the hero widget do you can see that
the hero wiet is inside this page but
also inside the homepage have you seen
the transition so the TR the hero widget
will always create some sort of
transition for the image or for the
widget that is inside which look pretty
cool so what we could do is we could
create inside the log the the profile
page let's go inside and replace this
for a padding again with the edent sets.
all
20.0 and then put a child
column and then
children that will have a widget inside
and the widget will be a list view a
list T sorry list stle and the list St
will have a
title the text will be log out so now we
will have at least a log out button and
then what you can put is the untap put
an empty function and this will log out
in order to log out we can go inside the
uh welcome page we can copy this
Navigator this thing I will copy this
and I will put it inside the profile
page inside the list St like this now
the only thing you need to do is replace
the widget 3 with the welcome page and
now if you restart the application you
will see that when you click log in it
creates some sort of transition between
the image and when you click log out
then you go back that's it so this was
oops so yeah it's not really visible
like that so maybe it would be better
another button but you get the point
right when we do the log out we should
do something else we should also change
the value of the Notifier so this
Notifier selected page index we should
put it back to zero so we'll say select
Notifier value oops
Notifier value is equal to zero so we
restart this so let's restart the
application when we click login we click
profile we click log out and then when
we click login you will see the little
animation so that's about it this is the
hero widget pretty cool stuff that uh
see you in the next one
bye another widget I want to show you is
the snack bar widget this this one is
pretty cool so we need to talk about it
first thing first what we'll do is we'll
go inside the welcome page or inside the
hero widget and I want to change it
because it doesn't look like with the
theming of our application so let's
change the color of the image for colors
the
teal and after this we will need to
change also the blend mode so the color
blend mode blend mode Dot and you can
use Maybe blend mode. modulate this one
is pretty cool or we could use darken
darken I think will make more sense for
our application so you just see how it
look better like this and after this
another thing we can do is we could
change maybe the the title inside or
whatever but we will do this later okay
so another thing I want to do is to use
this widget which is called the snack
bar so for the snack bar we will go
inside maybe the settings page
and we will use one button to trigger
the snack bar so if we go inside
settings you see that we have multiple
buttons we will we will use this one the
first one click me okay so I will
replace this for uh open snack bar and
we will save oh you see how it is it's
this button instead so I will instead
use it inside the elevated button I will
cut this elevated button I will put it
at the the
top at the top before the drop down
button and now we can play with it I
will remove the style and I will say
this is called open snack
bar okay so this is our button now let's
like let's make it work I will say show
snack bar as simple as that so uh is it
show snack bar I
hope uh no show
scaffold do oh yeah it's scaffold
messenger so scaffold
messenger. of
context. show
snackbar this is it all right so you
need to remember this little thing it's
scaffold messenger. of context so you
get the context of the current scaffold
and then you will display something on
the screen and the display is the snack
bar so you need to create a widget snack
bar like this and the content will be I
think just a simple widget so yeah you
can say text and say snack
bar okay after this you need to put your
semic colum and your commas like this
and you can save great so now when you
press snack bar you see we have a snack
bar coming from the bottom that will
stay there for like two seconds you can
change the duration if you want you can
say
duration and you say duration and maybe
seconds 5 Seconds all right so when you
click on it you have the snack bar but
another thing that is pretty cool is the
position of the snack bar I don't uh I
think it's Behavior but I'm not sure so
we'll try this one Behavior I would say
snack bar
behavior and I would say do floating it
is exactly that so let's click on it now
you see how it is a floating box and it
just look better so this was how to
create a snack bar with flutter that's
about it and I see you in the next one
bye okay so the snack bar is pretty cool
but another thing that you could be
using with flut will be an alert
dialogue so I will show you how to do
this also we'll copypaste the elevated
button and we will call this instead the
um open dialogue
all right so it's pretty much the same
concept but instead of using the
scaffold messenger of context first you
can right of the bat use the show
dialogue all right and inside you will
put a builder so you will press control
space and you will say context return
and you can just put a ner dialogue or
about dialogue they are pretty much all
the same so we will just use an about
dialogue for now
and it is like that so let's click on it
you see how we open this so you see that
the about about dialogue will
automatically give you all the licenses
of your app so this can be interesting
if you need this otherwise we will use
the alert dialogue the alert dialogue
will allow you to customize it more like
you want so if I click on open dialogue
you see that nothing appear right now
this is because we need to put some
stuff so first we need to put the
content which for now will just be a
text widget saying um alert
content and then we need to put also
maybe a title which would be another
text saying uh alert
title and finally if we try it you see
that we have the alert title and the
alert
content but we want to see to be able to
close this thing so you can create a
button and this will be inside the
actions or is it inside actions let's
find out it is inside the uh it is
action or I think it is inside the
content action yeah exactly it's inside
the aler dialog sorry I was at the uh
wrong place so inside the action you
will say for example uh close button or
fill button and you will say oops fil
button and inside you will put an empty
function and after this the child will
be a simple text
saying uh close right but you can put
any other buttons If you prefer so this
is just that and inside in order to
close the navigator uh in order to close
the dialogue you need to use the
Navigator because this is kind of
another page over it right so you use
the Navigator dop as simple as that and
now if you click on open dialogue you
have the alert dialogue with the content
and you can close it so this is pretty
cool um that's about it and I see you in
the next one a
bye another widget we need to talk about
is called the divider widget so between
these two elevated button I will create
one called the divider all right like
this and let's save so you see this is a
little line that separate the two widget
you can also change the color colors.
teal and also you can change the
thickness the thickness let's put
5.0 you can also change the the end it
Dent so this is the space at the end
that you will have without the divider
so by example I put 200.0 let's save you
see that this is 200 space that is not
used for the divider all right so this
is how to use the divider you can also
use a vertical divider so I will create
a container I will Define a height of
50.0 and then I will use a child and put
a vertical vertical divider
inside and then I will save so you can
see that we have another divider but
this one is vertical it can be used for
uh by example in ins a row if you want
to separate two items so that's about it
what we'll do is we will delete the
vertical divider and you can keep just
this one with maybe a value of two for
the thickness so it's not that
disturbing inside this page all right so
that's it and in the next video we will
talk about the card
widget so now let's talk about one of my
favorite widget called the card widget
it's like a container but you already
have some sort of rounded corners and I
will show you how it look like so first
thing first we will go inside the home
page so right there we can close
everything else so I will say close all
and I will return inside the homepage
and what we'll do is first thing first
we will create a padding widget and
inside we will put the Ed and set do
symmetric and the Symmetry will be only
vertical so it will be only vertical the
padding I will put all the commas and
save okay inside this padding we can put
a child argument and use a card widget
in this card widget we will use a single
child again and we would put another
padding and the padding will be again Ed
sets. all for this case and we will put
maybe 20.0 I will put again all the
commas and save okay so you see that
this is our little card but there is
nothing inside so inside the padding I
will say child and I will write a text
the text will be by example um basic
layout this is the first module module
of this course all right so we have this
the next thing we want to do is we want
to add more things in size so we will
need to put a column instead so for the
child I will right click and I will say
refactor and wrap with a container a
column where it is column right and we
need to do the same thing but right
under and this would be by Example The
the
description of this all right the last
thing we'll need to do is to put some
sort of width double. Infinity so can we
do it inside the card no we can't so
what we need to do is we will wrap the
card we will say refractor or maybe we
can even use the padding replace this
for a container because the container
also have the padding but the container
have the width argument so we can say
double do infinity and now it's save so
this is our card wiget you can see that
it start to look uh kind of beautiful so
that is why I use a card widget next we
will need to put everything on the left
side so we will go inside the
column maybe inside this one and we will
say the uh main access or CR cross
access alignment cross access alignment.
start and now we have our text to the
side but there is another thing we need
to change and it's the style of the text
and we will do this in the next video so
that's about it see you in the next one
bye so the next widget I want to show
you is the text widget let's play with
this one and change how it looks so
first thing first we will go inside the
text and we will use the style argument
this one will take a text style and
inside the text style you can put a
color colors do teal so this will change
the color of the text like this next you
can put the font size and you can change
the size let's put 18 and save we can
also change the font weight so font
weight. bold like this but also you can
put maybe normal if you prefer or W1 to9
so this is very thin and this is very
bold all right but we will use the Bold
one instead and that's it you could also
change many other arguments by example
spacing later and it could be 10.0 but
it's up to you okay so let's keep it
simple let's save and now what we need
to do is we need to put this inside a
data which we will do another file and
we will say
constant. Dart because it could be
interesting to have always the style of
this saved at one place so we can reuse
it everywhere inside the application all
right so I will cut this
textile and then what we will do is we
will go inside the file constant so I
cut this we go inside constant and we
create a a class let create a class
called K Tex
style and this class kex
stle we'll open the bracket inside what
we'll do is we'll say static con and
then we will put text
style how do we call this one we will
call this the um normal blue or normal
teal
text or even title
till text is equal to the text field and
we need to create another one but this
one will just be maybe um description
text description text for the
description we will remove the color we
will remove the bold and we will keep
only 16 as the font size okay so we have
two type the type the title teal text
and the description text and inside this
we change this for the K textile dot
title text title till text and the other
one we will do the description text okay
so this is what we have done we have
used the text widget inside we have used
the text style widget in order to change
it and then we have saved everything
inside a constant class so we can reuse
this anywhere inside our application so
our application look the same everywhere
so that's about it and I see you in the
next one
bye all right first thing first
congratulations on being on this step of
this course because a lot of people will
give up at the start so the next thing I
want to tell you is we have talked about
the basic flutter widget some cool
widget like the cart and stuff like this
but now let's go one step further and
let's add animations inside our app
because at the end we don't don't want a
garbage application like this we want to
have a great visual application so we'll
change all of this and make it look
great by using ly files or ly animations
you can go on LY files.com and you can
search for an animation you would like
to have inside your welcome page okay
you can write home by example just make
sure to click there and select free and
in this way you just have the free one
then you can click on by example this
one it will fit with the application
have the same color till in blue and you
can just say download for me I will not
be able because I have already
downloaded 10 files but you will be able
with the basic uh basic free plan or
whatever it is it called so you will be
able to download this otherwise you can
go on another website L files and stuff
like this you get the point the next
thing is I have already downloaded the
Json it's right there I can't download
anymore but anyway and we will put this
Jon inside the application but how do
you do this right how do you put a Json
file inside the flutter for this you
will need to use the ly flutter package
like this so you go on pub. dev package
L and you will use this one so what I
will do is I will go inside the
installing and the only thing you need
to do is either run this or either add
the ly automatically inside so what I
like to do the fastest way I think is
you just take the name of the package ly
and you go inside the visual Studio code
you press contrl shift p and then you
say add dependency and you press enter
okay in this way you can just put l and
you will see that inside my pope. yal it
will add the L right under this one okay
so let's do this contrl P add dependency
L enter and you will see boom we have
the L if you want you can add it
manually right there or you can paste
inside the terminal what I've shown you
this little thing you can paste this all
right so there there are multiple ways
but this is the way I do it all right so
now we should have access to the ly
files let me just click this flut PP get
this little button if you don't have it
just right inside the terminal flutter
Pub get and press enter okay it will do
the same thing we will save the file I
will close the up spec. and now we are
ready to use our L file inside our thing
so what you will do is you will create a
file like this I will delete mine it was
created too early but you will go inside
the asset you will right click and you
will say new folder inside this one you
will say
ladies and then you will put your L
inside this one so it is right there I
will put my welcome inside the lotes
okay so now we have access to this L but
we also need to use the package that we
have added in the dependency this one so
you will go inside by example example
and you will find or just inside read me
I think they will give you an example
yeah you just need to use this ly asset
and then you put your Json pretty simple
simple stuff so I will copy this line I
will close everything okay because we
don't need this anymore and now we need
to use this so let's go inside the view
inside the page inside the welcome page
and I will replace the EO widget with
this thing the l. asset I say Quick Fix
and I will say import the package ly ly
all right so now we have the import we
can delete this unused import which
which was the error
widget and then uh we will have an error
the reason is you need to go inside the
pops spec. and inside the pope. Yom you
will see that under assets we need to
give the asset path for the lotes so I
will paste under and I will say
lies and don't forget to put this
otherwise it will not work so this will
give you access to all the files inside
the lotes okay so we will save this flut
pubget and then I will close the pups
spec all right so now we can just change
the name for welcome and save and now
let's restart the application and see
what happened so you see that unable to
load assets welcome y it's because I
need to put lotes SL welcome and save
great so this was the animation I
downloaded earlier it's not the home but
I think it's pretty cool you can find it
on lot of files I'm pretty sure this is
where I found it butth it's up to you
anyway so this will be kind of our
welcome page okay so what we need to do
next is maybe put the text
under saying uh you can put the name of
your application I will just put flutter
map another thing I would like to do is
change the style so we'll go inside the
style and I will say text style I will
not use the k Tex stle inside the
constant this
thing because this style will be a
little bit a little bit weird it will
not be like standard title or
description so that's why I will not use
this so I will say text style and inside
the text stle we will say um font weight
font weight. bold font size the font
size maybe we can put
50.0 and then the space
letter spacing letter Spa letter spacing
50.0 again let's see what happened okay
so right now we have a problem with the
visual of the application I want to show
you another widget that will help you
fix things like this so we will just
stop this video and in the next one I
will show you the fitted box widget you
will see this one is pretty cool so
that's about it see you in the next one
bye
okay so let's talk about the fitted box
widget it's one of the most powerful
widget that you can use and not a lot of
people is talking about it so the fitted
box widget what it will do is will take
it will take the text and make it fit to
the screen all right simple as that you
can just wrap the text widget right
click refactor and then you will say
wrap with a widget and you use the
fitted box and now when you will save
you will see that the code automatically
put all the text in the line and align
with the phone all right you you get
what I mean anyway so another thing I
want to show you is you can change maybe
the font size for 500 and you will see
that it will automatically adapt also
but when you do this it will remove a
little bit of spacing so you need to
adjust for something that you like I
think 50/50 seems pretty cool that's
fine for me the next thing we'll do is
we will add a simple sized box right
under with a height of maybe uh 20.0
and comma save great so now it look
better we will put another button this
one will be a simple text button so uh I
think I will just copy this yep copy and
paste it right under replace filled
button with the text
button and that's pretty cool uh both of
them goes to the widget 3 but we will
change this in further video for a login
page or register page and we can just
change this for uh
login and get started get started okay
so this will be the register and this
will be the login another thing we can
do to make it look better is we can
expand this text button to be all the
width and for this you will need to go
inside the field button or any buttons
and you will need to change the style so
we'll say style and if you remember to
change a style of a button you reuse the
name so fed filled but
button this
field I will just remove this because
it's kind of annoying perfect field
button and you just need to fill it
button I have some difficulty with my
keyboard right now so I will just copy
paste fill button do style from and then
you just need to put size I think or
minimum size yeah minimum size and you
use the if you go over size widget like
like this and the size with jet just
take a width and a height so the width
will be double do
infinity and can we put null for the
height no we can't so what we'll do is
we'll put maybe
40.0 and comma save and now this should
work so I will restart the application
uh it's a maximum size it's a minimum
size I was I want to use instead so
minimum size and now let's save great we
will do the same thing for the login and
that's about it for this video so I will
copy the style and I will paste it right
over the child of the text button let's
now save and you can see that the text
button is a little bit invisible but
when you press on it you see it you have
the get started you have the name and
this look pretty cool so what we can do
in the next video is instead of going
instead uh instead of going straight in
the app we will go to a register page or
a login page so that's about it see you
in the next one
bye later inside this module I will show
you how to use a package that will save
data locally by example when we restart
the application it's always going back
to dark mode so it could be nice to save
this information locally on the phone we
will do this inside this module but for
now I don't want to show you like
package after package after package
because it's a little bit overwhelming
all right so what we'll do is I will
show you a package like the Loy package
and then will modify a little bit the
application to make it look good and
once in a while I will show you a new
package by example the one that will
save the the data locally this one will
be pretty cool but uh that's that's it
so let's start right now and create
another page so you can see that when we
log out and when we log in we goes
directly inside the application but it
would be better to go inside a login
page or register page okay so inside
page I will say new file and I will say
um register page or login page let's put
it at as login page. Dart okay and then
I will say import
material and then I will say stat less
widget this one will be called the login
page so inside this video what we'll do
is we create a login page so when we
click login instead of going inside this
one we go in the login page and then we
put some information and then we go
inside the home all right so this is
what we try to create right now I will
put a scaffold first with a na bar the
ab bar will just have a a bar inside
then I will put a body in order to be
able to put a column
widget right so what I do is I know that
I will put a padding over the column but
I prefer to write column first because
when I do refactor with the padding it
will automatically put the the
information inside but if you just put
the widget padding let me show you if
you just put padding you will see that
it doesn't fill everything automatically
so that's why I prefer to put column
first and refractor so it go faster
after this so you have this thing we
will put this as maybe 10 and now let's
go inside this page from the welcome
page when we go instead of going inside
the widget 3 okay which is the
application what we will do instead is
we will replace this for the login page
like this so for now both of them will
go at the same place you can remove the
unused uh link okay and then let's
restart so we have this when we click on
get started we go inside this login page
so that's pretty good next what we'll do
is we'll go inside this login page and
modify the visual so you can write
children to put multiple widget inside
and then which one will we put I think
we will put
an just an image we can put the hero
widget that we had previously hero
widget like this but can we put
something inside this one I will restart
just to see what happened get started
perfect we have this
information and let me restart again
just to see if we have an error no it's
good so we could put the word plugin
inside so let's go inside eror widget we
will modify this we will say this will
take a required um this.
title and we'll say
final string
title oops string title so this just
mean that we will send the information
via an argument and we will have this
information available for our widget
which will wrap the entire hero wiget I
would say
refactor wrap with a column
why because I will replace column with
stack and now we are able to put some
text over it so we can say
um uh text yeah let's put a simple text
let's put inside the title so title and
let's save now we just need to put the
title inside the center so what we will
do is we will say
alignment um what it is it is a wrap
alignment alignment
simple
alignment Dot and Center I think so
let's try this we'll go inside the login
page and we will add inside the hero
widget we will add a title the title
will be
login login perfect and we will go
inside the homepage and do the same
thing
title the title will be uh I don't know
uh flutter map it doesn't really matter
for now but now you can see that we have
the login next what we can do is we can
make this look better so let's go inside
title let's go inside this change the
Style again we will not use the text
style from the the constant because it
will be a weird one all right so let's
say text
style the font weight maybe we can put
font weight.
bold and then the font size will be
maybe
50.0 let's save so now we have this we
can put the later
spacing letter spacing maybe 50.0 also
and wrap all of this text
refractor wrap inside a fitted
box
fitted box and let's save perfect so
that's kind of good it's a little bit uh
weird so what we'll do is we'll change
the color we'll say color colors do uh
May let's try
black okay that's not right um let's try
white
colors.
white white 30 let's try this all right
so we will go with something like this
it doesn't really matter because it's
like a little different so maybe 60 yeah
that's good that's enough good uh after
this what we'll do is we will put the
text field to textt field do we have
some of them inside the settings we can
just copy paste one of them so we have
this this drop down text field so let's
copy this text field all right so you
had it inside your setting. page uh
setting page. Dart and I will close all
the page close all then we will go back
inside the EO widget and what we want is
the text field so instead of hero it
would be a login page
now inside the login page we need the
text field so I paste it and we need a
controller so this we would need to put
a
controller text editing controller
controller is equal to a text editing
controller and that's
it okay now we will need to change this
for a state full widget refactor because
I need to show you something else so
convert to a state full
widget and now we need to use something
called the
dispose but what is the dispose I will
explain you what it is inside the next
video so that's about it see you in the
next one
bye okay so what is the dispa the dispa
is part of the override that you can use
inside a state state full widget don't
make the confusion you are not able to
use them inside the state less buet they
are not available only in the state fold
so you have the dis pause and you have
also the init State oops in it State you
have a couple other of them but the most
used are these two ones so the dispa
will uh dispa the thing when you don't
need the login page anymore for example
when you change the page and you go in
the home you don't need the controller
anymore so you can just say
controller. dispa
all right so you don't need to save the
information of the text forever inside
the app you can just dispa it next in
the in the init State this will run when
you start the the page for example when
you go inside the login page this will
trigger something you can trigger some
functions or stuff like this and then it
will build the entire thing right so
what you could do is you could just say
print and in it
state in it state
put the
semicolon and now if I restart the
application and I open the terminal or
the debug console maybe let's say get
started and you see init state so this
trigger right away when you go inside
the login page it will be triggered once
it will run this information and then it
will go inside the build and rebuild the
code only if you say set state but when
you say set state it will not rebuild
the init state only the build okay so
this was a lot of information if you
want you can rewatch this section of uh
the video okay just to make sure you
understand and that's about it about the
override and just make sure that you
have put the controller that this PA for
your controller we can also put the
controller I will cut it and we can now
put it inside this okay so it will be
close to the other we can delete the in
state because we don't need it only the
dispose so that's about it and I see you
in the next one
bye okay so let's keep going on this UI
design so first thing first what we will
do is we will change a little bit the
padding for
20 like this I will save and we will add
a sized
box right there over the text field of
height 20.0 and now let's save this okay
so we will change also the outline input
border and we use a border radius border
radius. circular 20 uh maybe
15.0 like this and the Comm and save
perfect so this look better another
thing we can do is we don't know what is
this text field so it could be nice to
have it hint and this is what we'll do
inside the input decoration maybe so
let's try INT in text yes it is perfect
so intext and we just say uh email
email and save great another thing we
can do is the controller we can copy
this one paste it under and say email
and say
password and say same
thing controller controller email and
password because you guessed it we will
do two text fields and we need to
separate the controller otherwise it
will be the same so we need to say
controller email
and do we need do we need anything else
this seems good we can copy this one and
copy the size box also oops size box and
text field copy and paste it under we
will change the size box for 10 instead
and the text field we will put pass
word and now let's save okay so this
seems pretty good now I will just
restart to see what happened get started
and now you have the email the password
you can enter the information maybe you
will need some sort of button to say
login so let's add this
button we can put a field button uh we
can also copy the one from the welcome
page it will be faster so just take the
fill
button and copy this with the size box
why not copy this and go back inside the
login page inside the login page you
just paste all of this and you have your
size box and you have your filled button
great so now you can just say
login like this and this seem good this
seems good the next thing you can do is
by example the email or one thing I want
to do also is inside the hero wiet I
just want to change the visual look a
little bit weird so I will say um
black black 45 54 instead uh it look
weird also so
white white 10 maybe I will also change
the Bold for normal you can play with it
but for now I think we will keep
something like this and maybe
38 let's save this look already better I
think
okay so that seems good I will change
again for 30 instead and this seems even
better okay the next thing is to write
the email so you see both controller use
the same thing so I will go inside the
login page and inside the login we will
say um controller email this one we
change this for
controller
password great so that is better the
next thing we need is when we press on
login we need to go inside the widget 3
all right so for this you would change
the login page for widget
3 here we go and we can create even a
logic to enter a real user a real email
and a real password and only if you put
those two thing you can go inside the
login page all right so for now it's not
working but we will fix all of this
inside the next video with a logic
coding challenge that's it see you in
the next one
bye okay so let's create the logic to
enter some information and click login
first thing first we will change the
fill button with the elevated button so
I've changed both of them the style and
the button and let's save I think this
looked already better and we will do the
email so how can we write this email we
can say by example let's go right after
the class login page extend this right
after the controllers you can write
string I will click this and you can say
um
confirmed email is equal to 1 2
3 and then the string confirmed
password goes to uh I don't
know 4 5 6 doesn't really matter okay
these will be just the information to
confirm if you have put the information
to go in the login page right so let's
go inside the this so you can see that
we have some sort of function that is
triggered when you click the elevated
button so we will take all this function
and we'll put it inside another one so
it will be like more visual of what
happened when you click the elevated
button so let's cut all of
this and what I will do is I will say um
let's create a function so it's log on
login
press like
this okay and now let's create this
function usually what I'd like to do is
right before the last one so right there
you just click and you
say um how do we call this we call this
aoid on login
pressed we open the bracket we create a
function so this is just a simple
function that is used in inside the
elevated button okay and all of this is
not inside the build so you can see the
build end right here and right here so
that is why we use it right there after
this we will put the Navigator and we
will create some sort of function we
will say if the context or the confirm
email is equal to the controller email
do
text or is equal equal just to say if
the are equal then we will do the
Navigator like
this oops then we will do the
Navigator can I just move it all right
so that's good we can do another thing
the same thing but with the password so
we can say
um
and if the confirmed password is equal
to the confirmed
uh controller password.
text can we just put text why is it
working all right so I don't know why
text doesn't work get text Define the
type
string confirm password oh because I
controller
password controller password Perfect all
right so this was pretty long but right
now if you click login nothing will
happen so let's restart the application
entirely I say get started and then I
say login nothing happened but if we
press 1 through 3 and then 456 and say
log in here you go you go inside the
homepage pretty damn cool but later
inside this course or at the end of the
course you will understand that you can
create your own um authentification
system so you will either use uh your
own base that you have or you can use
Firebase and stuff like this but this is
not like the the good way to do it
because it's just like static inside the
app you will need to connect with your
authentification system but don't worry
I will show you everything that you need
in order to connect with apis and stuff
like this all right so that's about it
for this one uh let's log out and see if
we can change one little thing this
seems pretty good um I will say maybe a
button to come back that could be
interesting so for the app bar what we
can say is um do we need a button to
come back actually so yeah we will go
inside the welcome page and what we'll
do is you see we have a push replacement
but instead what we'll do is we will
just do a push so I will cut take all of
them remove both of them and save so now
when we go inside we have the back
button automatically so the get started
and you have the back button if you need
right if you go and login you have it
also great another thing we can do is so
you see that the login is only
accessible if you put 1 2 3 4 5 6 and
then log in and that's pretty cool so as
I told you inside this uh section we
will talk about how to save the data
locally I will show you how to connect
with uh an API stuff like this you will
see this is a lot of information but for
now that's about it and I see you in the
next video
bye okay so when you build an
application you need to take in
consideration all the little things that
can break your application for example
if I turn the screen you can see that
this is not scrollable so if someone
have a very small screen this might
create a problem so you need to wrap the
padding of the welcome page this entire
body refactor and wrap it with a single
child scroll view single
oops single child scroll View and now
let's save perfect but another thing is
this logo is pretty big so we will put
it maybe at 300 height let's go inside
the ly asset in the arguments I will say
height and maybe 400.0 and let's save so
this I think is already better it's not
really good for the dis orientation but
usually people take their phone like
this okay so the goal is really to fix
the big problems so by example if I go
inside get started and I try to write
something and I open the keyboard so
control command shift K on Mac and I
start to write something you see that we
have a yellow bar so we need to fix this
also okay but first let's fix this one
this one now you see that it's not in
the center anymore you could try to do
the main access alignment main access
size main access size that minimum I'm
pretty sure this will not work yeah so
the reason is right now we are we are
telling the column is the minimum size
and it's in the center but it doesn't go
in the center the reason is the single
child scroll view will start everything
from the top because this will be
scrollable all right so you cannot do it
like this what you can do instead I will
remove the minimum what you can do
instead is you can wrap the entire
single child scroll view
refractor WRA with a center widget so
now everything will be in the center and
if it's too big for example if I add
another asset you will see that it's
still scrollable all right so that's
good I will remove the two assets and
that look pretty good all right and it's
also scrollable now so let's go inside
the ne the next page get started inside
the login
page we need to do the same thing we
need to make this scrollable first so if
I
restart this seems to be pretty high up
get started I think this was in the
center also uh main access alignment
main access alignment that Center okay
but the thing is when you open the
keyboard you see that oops when you open
the
keyboard can I open it keyboard okay
when you open the keyboard you have this
error so you need to make this over the
the body
refractor with a single child scroll
view single child scroll View and
refactor again so refactor
with
a what was it the center yeah so let's
save now everything is in the center but
when you start right you don't have this
error because it's scrollable all right
so that's pretty good another thing we
can do is maybe we can remove the the
sized box do we have a size box over we
can put a size box at the bottom so it
will look a little better so let's put
sized box with the height of maybe
50.0 coma at the end and save so this uh
look a little bit better already so
that's good so we have the get started
we have the login and maybe we could
have the register or something like this
yeah let's create this right now so what
we can do is in the login page we can
receive the information the information
that we put inside this this ero widget
so the login name so we can say this
will be a
required and it will be
the how do we call this the
title yeah let's just call it title and
now we just need to create a final
string
title which we can use inside or login
page but we have a problem we need to
say required this. title great so now we
have access to title when we send it
from the welcome page and we will just
use it inside this if you remember when
you are inside a state 4 widget you need
to say Widget the title like this okay
so that's good another thing we can do
is go inside the welcome page and inside
this one we'll send the information so
the title will be for when we click
on this button which is the get started
this will be
register and when we click on the other
one this will be login and save so let
let's restart the application and now
when you click get started you have
register and you put your email password
and login we could change also this
button name so let's go inside the login
page and we can change this one for
widget. tile and let's save perfect so
now we can register or we can login but
as you can see both of them use the same
confirmation in mail which is just
static it's just the information uh
stuck inside the the application so you
will need to use some sort of server
later I will show you how to do all
these API stuff and stuff like this so
that's pretty good uh we can say login
or we can say register both of them go
to the same place we have fixed the
problem with the size if we turn the
screen now this look better so that's
good that's good
register okay register we need to put
the password 1 2 3 uh one 2 three and 4
56 and I want to show you another thing
because this is pretty annoying to put
every time so in the controller we will
say text and we will Define this as 1
through three and we will do the same
thing for this one
text and it will be 456 so now when you
restart the application every time you
restart the app and you go inside get
started you will see that both of them
will already build be filled so 1 2 3 4
5 6 right so I can just click register
and see if the application works so
right now the application is not working
bottom overflowed by this okay so we
need to go inside the welcome page uh is
it no it's a homepage and we need to put
this column refactor wrap with a single
child scroll view single child scroll
view save so now this is working we can
scroll and the rest is good done I need
remove this in the profile if we
open everything is fine perfect so for
now we don't have any errors like this
so I will put back the application like
it was I think it's like this perfect so
that's about it for this video I know
this video was kind of boring but at
least you know how to endle things when
the screen change and stuff like this
you create some sort of single child
scroll View and then you put everything
in the center all right s application
start to look pretty damn cool I kind of
like it uh what we'll need to do though
is inside this page because right now
this is pretty ugly so we will change
this in further video that's about it
for this one and I see you in the next
video
byebye okay so we are soon ready to talk
about how to save data locally on the
phone you remember this little button
every time it start it's dark mode it
will be cool to have some sort of logic
that save the data locally about if it's
white or dark mode okay and we will do
this in uh pretty soon because we just
need to change one thing for the UI and
the thing is in this video I will show
you what it is if when you click get
started it goes and use a push okay so
let's go inside welcome you see that
this will use a push the push mean that
you can come back to the welcome page
but when we go inside the login page
okay we are using again a push replace M
so it will replace I have created some
sort of visual for you so right now it
goes inside the second page with a push
all right so this is our application and
then what we do is we say push
replacement with the widget 3 and the
only thing we do is we replace this with
this but we still have a back back image
uh or back page called the welcome page
so when we click register you see that
we still have a back button to go back
back inside this page which was the
first page okay so we will change this
and we will create a logic to take all
of this and whatever the number of page
previously we will say delete all of the
page and then replace just one so it
will re remove remove remove and this
first page will be replaced for the
thing you want okay so let me show you
how to do this hopefully the little
image was useful and we can go inside
the on Lin pressed okay so this is when
you press uh in the login page this
button okay it's this button and we will
replace this for push and remove until
okay the push and remove until will
require a third thing which is the
Boolean uh do we need to stop before
okay in simple words so I say
predictable I will s control control
space and I will use route with the
arrow for now I will just say false
because right now the only thing we will
say is uh I want to delete everything
and then replace this page with the
welcome uh the widget 3 okay but uh what
we could do is we could say to the code
for example if the route is equal to uh
the route number five or whatever okay
if you create a condition and it's true
then it will stop before so by example
if we say okay we have a stack of 14
things and we say if it's if if it's
page two then stop so instead of doing
this remove everything and replace the
page one for something it will stop I
will put everything back okay what it
will do instead it will remove this and
if we say like page two it will remove
this and then it will replace this one
with the with the number four or
something all right I I hope you get the
point so for now we'll just say false
false and because we say false it will
remove the the one that is at the back
okay it will remove everything and
replace
it this was complicated to explain uh
maybe I could have simplified things but
I hope you understand with the image and
stuff like this okay so for now if we
just restart you will see that when you
click get started register now you don't
have the back button because this is the
only page available right now so we can
say profile log out out and everything
seems to work fine so let's work on this
little thing on the next video This is
called shared preference and we will
save the data with a package we will
save it locally that's about it see you
in the next one
bye it's now time to learn how to save
the data locally on the phone and we
will save it if it's dark or light mode
all right for this we will use shared
preference and you can go on this
website pub. d/p ag/ shared preference
and we will take this one so we click on
install and we take this shared
preference I'll copy this go inside the
pope. and add it command shift p add
dependency share preference and you
should see it right there all right you
can add it manually if you want if you
add it manually just put this click the
little arrow or run flutter Pub get
great so now you should have access to
this I will save the file close it and
what we need is to use shared preference
but I want to show you something and
this something is this little diagram so
we will use share preference we will
save data using a Boolean we will
retrieve the data using the same Boolean
but we will only retrieve it when we
start the application and then we will
use the value Notifier to display if
it's either dark or light mode all right
so let's start with the share preference
how you do this you go inside me and if
you scroll down a little bit you should
find right there preference set as bull
all right so you set the value you put a
key to find the value back from the
phone and then you can use also this the
read data so preference get Boolean and
you put the same key this will return
you the Boolean all right so anyway I
can talk all day all night but let's do
it right now so first thing first we
need to get the instance right so once
you have the instance you can use the
pref so we'll go inside the code and
where do we need this we need this on
the button so the button is uh did I add
it inside the ppsc yeah so it's added
that's fine inside the widget 3 we have
the icon
button and this is where we will put the
code we will say final share preference
we need to import share preference Quick
Fix and import share preference you will
see it's this one and after this we need
to use the await await is just a way to
say okay run this thing but wait for
this to finish before running the next
line all right so it's just a waiting
for something and in order to use a weit
you need to make the function this thing
the yellow thing you need to make this
function uh know that you will wait for
something and in order to do this you
need to write a sync okay so it's always
together a wait a sync and when you wait
for something you always put the a sync
before the curly bracket okay so now we
have access to pref so we can save the
data can go back inside Chrome and we
can say await set Boolean so we will
save the value okay and you can see that
we are using a wait again so the code
will wait for this to run before running
this thing and we can use the same as
think it doesn't
matter great so what will be the key the
key let's create this one inside the
constant
just to make sure we can create one
constant one class called K
constant and we open the curly bracket
and this one will be a what do we call
it a
static const and it will be uh string
and it will be key um how do we call
this one the set bull color or is dark
uh uh key that's good that's perfect so
we will call this one is dark key
doesn't really matter because it will
always use the same thing inside the
phone to recover the data okay so anyway
so we will use the K
constant K constant. is Dart key or it
would be better to just put Dart key it
would make more sense or uh light mode
key light mode team mode key
tee mode key and that's a little bit
better perfect so we can save and now we
can change this for is team mode and
we'll set this to the value that we
receive so which is this value all right
so I'll copy this I will paste this but
we need to change the value first all
right otherwise you will save the old
value so you need to take this and put
it right right there so we change the
value and then we save the new value
into the phone so this should already
work now the only thing we need to do is
to retrieve the data so we say final
bullan this
thing copy this and we go at the place
where the the application start which is
in the main in the main we have a state
full widget which is good because we
need to use the init
state so we'll use init State and in the
init State what I like to do is just put
uh
one named function okay so I don't want
to put a lot of code inside this I want
to see what will in it step by step okay
I want to keep it simple so for this I
will create a void for now and it will
be um setup or in
it in it uh Team
mode is equal or no is not equal is a
function like this and now you can just
put this inside you can just say in mode
all right so that's good another thing
we can do
is we can say preference so because we
are using pref again we need to reuse
the init like this this thing the get
instance I mean so we will resay get
instance we will use the shared
preference as the library in
Port right the await we need a async now
let's say save and now this seems pretty
good so um when we retrieve the
information now we need to retrieve with
the same key so the key was K constant
the tee mode key so that's good we have
the repeat we have the
information okay and with this we can
set the valueless enable Builder or how
does it called this one let's go inside
the
Notifier is dark mode
Notifier so we close this
and then what we can say
is is dark mode Notifier the value is
equal to um
repeat and we have a problem this value
can be assigned to the value Bo try
changing it so we will Define a default
value which will be
false okay so let's try this let's try
to figure out if it works so we have the
dark mode Let's go inside let's register
and now let's Press light mode okay
restart the application and it does not
work so what is the reason let's figure
this out so error un missing exemption F
Channel flutter share preference okay so
I think we need to reset share
preference so I will start by closing
the application I will flutter pop get
just to make sure everything works I
will rerun the application cancel I will
save again verify that we have Shar
preference I will go inside this and
relaunch the application I can from
there and need go from Main and start so
I will see you in the next video
hopefully it will work otherwise we will
fix the bug in the next video that's it
see you in the next one
bye okay so now when I restart the
application you can see that the light
mode is by default which is great so if
we put dark mode you will see that it is
also working all right that is pretty
cool because this is get getting the
information from the phone saved on the
phone and use this in order to display
either the dark or the light mode okay
but one mistake a little mistake you can
say is when I restart the application in
light mode you will see that for half a
second we have the application in dark
mode okay it's not a big deal okay but I
just want to explain you why it happened
and then we will move and work a little
bit on the UI just to make it look a
little bit better all right so uh let's
log out and the first thing I need to
explain you why we have the black screen
for half a second the reason is very
simple the dark Notifier value if we go
inside it by default it is true so it is
dark by default and the init the init
state will not wait to complete before
running the build okay so how the code
will run is it will run the init state
it will run this and then it will go
inside and run all of this but meanwhile
it is running all of this it will still
build and start building with the value
false right this was a lot of words but
let me show you I will put some break
points at some places and you will see
what I mean if we restart the
application you will see that it goes
inside the init State first if we keep
going we go inside the init team mode
then we go inside the init te mode but
even though we have a a wait and we will
wait for this to uh to retrieve the
information before going to the next
line This doesn't mean that it will wait
in order to continue and build the
application so the this should go
instead of this line we should go
directly into this line but hopefully
yeah okay imagine if it was not the case
how stupid I will look like but anyway
so you have this and now it start to
build but it doesn't the the dark
Notifier is not changed yet so let's
keep going and you will see that after
once we have retrieved the information
then we will change the is dark mode to
the good value the repeat value so now
when you press play you will see that
it's light all right so this was a lot
of explanation for a little thing but at
least now you understand how in it work
in it State work and build work a little
bit more now let's change a little bit
to the visual if we go inside the
application we register a couple of
things that we need to change okay first
thing first um this page look pretty
cool I like this uh visual this will be
interesting to create a button instead
so we click inside and we go inside a
page then we could create many many
things like this okay so it look a
little bit better a little bit more full
and then inside the profile we could
create some sort of email um an image
and stuff like this just to make it look
better all right and while we are doing
this you can pick up how how I do it
like how I how my my brain works so we
can copy this and create your own app
faster all right I'm not sure if this
makes sense but anyway so we will go
inside the home and first thing first uh
let's log out instead and change this
button so this button is kind of ugly in
the white mode so if we go in white mode
you will see what I mean if we l out and
we register you see that this elevated
button is kind of weird this thing is
kind of weird also so let's change both
of them so let's go inside the welcome
page let's remove this annoying uh I
think it's this one no it's inside the
login page so inside the login page what
we can do is we can remove first the
eror widget like this let's see what
happened if I do it uh okay and now we
can add a ly
asset you remember a while ago we were
talking about the home. Jon from the
lative files well I've downloaded
because I think it it look cool so we
need to use it now in the L asset I will
just copy this line and I will paste it
right inside the login page inside the
login page first we can remove the
unused import and I know it's unused
because we can see the yellow color and
now we don't see it and next inside the
scaffold we need the column and we need
to put the ly file and now we need to
import the ly package so quick fix
import package L which is this one and
now it's working but we need to change a
welcome for the home because this was
the one I liked all right I think it's I
think it's a little bit better all right
so the color doesn't really match but
it's not a big deal so we go inside the
register I will change it maybe for a
text button like this one so it will be
like less
visible or we can use a field button I
think we will go with the field button
so fill button let's save now I think
this look better better so you can see
right now we have the get started and we
go both of them goes inside the same
login page what we could do is we could
create some sort of page when we get
started just to see an onboarding
instead of just going inside uh the same
login page so in the in the next video I
think we can do this and or we can do it
right now let's do it super fast okay so
what would I would do is I will copy the
login instead I will create a new page I
will say new page uh on boarding.
Dart and now let's copy the login page
completely and I will paste it inside
the onboarding doart great now let's
change just the name or we can even
replace uh can we replace this yeah we
can replace this for a state less wiet
instead so right click refactor I'm not
sure if it will work no it doesn't work
so we need to remove move the overrides
so what you do is you take from the
override to the next override you delete
all of this and then you change this for
State L widget okay so that's good now
we are missing the controllers but this
doesn't matter because we don't need the
text field anymore for this page we can
delete all of them and we can just
replace the widget for titled instead
because now we are not using the state
full widget but the stateless so the
stateless you just put the same name
title after this the unlog and pressed
uh we can delete this and we can go
inside the unpress function and create
some sort of navigation to go inside the
login page this time so let's go inside
the welcome page and I will scroll down
I will copy this navigation.
push so let's take all of this copy but
instead of going inside the login page I
will go inside the onboarding page I
think I need to change the name yeah we
need to change the name of on boing Dart
for uh on
boarding page oops oh my God
onboarding page great let's change this
also for
onboarding
page okay so we can remove the unused
import and finally I think we have
something pretty good if we go inside
the welcome page now we can say
onboarding
page and the title we require a title
but I will delete this I will go inside
onboarding page and I will remove the
title required and the final so we don't
we don't need this we can change this
for anything else by example uh
default just to see what happened in the
screen so when we click login we go
inside the login which is good but when
we go and get started we go oh inside
the same page so let's restart the
application to see if it works get
started okay it's not working so in the
welcome page let's change something we
have the login okay so I I did a mistake
instead of using it inside this we need
to contrl Z keep the login page because
this is the login we need to change the
register instead okay so we need to
change this for the oops the onboarding
page okay the the only thing I'm doing
right now is I'm adding a page between
the register and the this welcome page
okay it's the only thing I do so let's
restart and click get started now you
can see that we have an unboarding page
first which is cool okay uh we can
change this icon for something else I
will do this in the next video okay but
for now we can keep it so we have this
and we can just say I don't know Skip
for now you just get the point of what I
mean so let's go inside the onboarding
page replace the default for uh
next and now let let's save we can add
also some text text
um let's remove this for
um flutter
map is the way to learn flutter
period that's it right simple like that
you put some sort of description you can
change the style for maybe a kex stle uh
title maybe we can try
yep okay maybe description instead and
let's save okay so something like this
uh we can also
change the alignment if I remember text
align text
align is it this one justify I think
justify is the good one yeah let's try
this so This justify take all the width
of the screen which is pretty good okay
so we have Flo map get started log in
when you get started you have this
little onboarding screen you can change
all of this if you want it doesn't
really matter but what matter is when
you press the fill button you need to go
inside the Navigator push of the login
page okay so quick fix and then I will
say import the library and I replace
this for
register and now let's save so when we
click on next or I will restart
everything when we click on next you see
that we go inside the log the register
page all right and when we go in the
login we go straight into the login page
okay these are the same page it's just
the name that change okay so that's
about it we have created a onboarding
page very simple stuff you can uh modify
this to make it look better because we
didn't uh we didn't pass a lot of time
on this one but anyway this video has
been already 10 minutes which is crazy
long so what we will do in the next
video is we will edit a little bit of
this thing and I really want you to to
understand how I work with flutter
because this is how you will be able to
build your own application or build
build things by yourself okay you you
have
to yeah whatever you understand what I
mean that's it see you in the next one
he
bye-bye okay so for this video what
we'll do is inside this onboarding page
we will just change this for another
Json so I have downloaded hide Json it's
just a little welcome so you don't have
the same image like twice because it's
kind of weird so let's go inside the
onboarding page and change the slau set
for high. Jon and the high. Jon was just
a little welcome like this I think it's
pretty pretty cool all right so welcome
maybe we can put some sort of size
between both of them so let's cut this
and put it right there a size box so now
we have some sort of description and we
have the welcome and we can say next
pretty Basics but that's cool so let's
click on get started we have the wel
come and you say next I think it's a
better transition um color-wise all
right so that's good uh we can now uh
maybe we can put some sort of text or
anything whatever so that seems
good another thing we can do is modify
this all right so we need to add more
buttons like this so I would go inside
the welcome page and we can it's not
welcome page first I will close all of
them close all tab so it's more
organized and then we go inside the
homepage so let's go homepage and inside
the homepage what I will do is I will
add another container like like this one
so this container let's create a widget
a custom widget for this one so inside
widget new file and we will say uh
container
widget widget. Dart or something like
this uh yeah it seems good container
widget. Dart and press enter
okay so now we can say import
M and say State less widget and call
this the container widget. Dart uh
container widget just like this let's go
back inside the homepage. dart and then
what we do is we take this entire
thing and we cut it and we say the
container widget
instead container widget great and when
you go ins inside container with yet you
replace container for what we just cut
which was this entire thing we just need
to import the K textile so quick fix and
import this
one and inside this one we need to
remove the unused import great so if we
restart you will see that nothing really
changed um so get started next and
register nothing really changed but now
we have this as a reusable widget so now
we can just go inside container maybe
change something the title can put some
sort of arguments we say required this.
title and required this.
description now we just need to create
the finals strings so strings title and
final string
description great and one tip I can give
you in life is if you like coding and
stuff like this you should highly
consider learning how to touch type all
right it's just like uh you just write
touch typing online you practice this is
how I I'm able to write I I don't write
really quick but it's not bad you know
if you write and you have to look the
keyboard it's terrible it will take a
lot of time so it's worth learning it
will take one month and that's it anyway
so let's put a title let's put a
description and now let's save let's go
inside the homepage okay okay and add
the two required arguments title will be
I forgot what it was but it was a basic
layout and then the description was um
this this uh this is a description or
whatever all right so now we have a
reusable widget which is the container
widget we can copy and paste right under
to see what happened the space is a
little bit too much so what we can do is
we can go inside the container widget
and uh what we will do is we will change
the padding of the container and we'll
do only the top okay so I will say I
Willl the symmetric for only and I will
say top like this and now it does look
better let's use the dark mode to see if
everything look fine also uh maybe I can
log out and see this home page this look
really cool I really like it in in dark
mode anyway so that's good we
and now what we need is um we have two
of them maybe we can add a third one so
let's go inside the homepage and add a
third
one and four and five doesn't really
matter anyway I need to show you another
widget because uh you will see this is
pretty cool and another thing we can see
that uh right now it is going behind so
we should have some sort of padding
around the entire thing but we don't
need the padding um in the vertical so
let's change this we have the edge and
sets. all exactly so we will say
symmetric instead and we use the
horizontal
20.0 great so now you see it look better
okay let me put white mode you can see
better so that's good uh let's talk
about the other widget I want to show
you which is the list do uh yeah let's
talk about it next time see you next one
bye-bye
okay so I was not supposed to talk about
this one but I think it's a good moment
to talk about it so let's just do it one
thing you can do with flutter is you can
say list dot generate and this will
generate a list of multiple same thing
right so let me show you what what I
mean I will click this now what I
realize is I need to delete all of these
delete this one cut it and now maybe it
will work gener rate great so the length
is just how many I you want to generate
we will say five for now and the
generator you can delete and control
space you will see that this require a
function which have an index right so
you'll say this will return the
container widget and you put your semic
colum just make sure everything is the
same and now you can see that we have
some sort of error all right and the
reason is I would put my coma the reason
is the list that generate is a list of
widget okay and right now the column is
not requ does require a list of widget
but not for one widget so it's like you
try to put One widget One widget and
then you try to put five widget in one
go it doesn't work in order to fix this
you can either say column like this and
use children and then replace the list
for the list that generate okay this
could be one way to solve this so let's
cut and paste inside and save so this
will work so if I restart you will see
that we have five items inside the list
1 2 3 4 five okay we can put three so
you see the difference right three items
that's cool but the other way you can do
it is you can just say three dots and
this is a a little shortcut with flutter
if you don't remember it doesn't really
matter but um you can use dot dot dot
and this will say to flutter that okay I
want to add many widget in one go inside
this list so I want to add a list inside
a list but
yeah uh my explanation is kind of
garbage but you understand what I mean
so now it does work you are telling
flutter I want to add many widget inside
this list okay so it's a shortcut if you
remember you remember otherwise it
doesn't really matter because the column
does the job really well the next thing
you can do is we could create some sort
of uh value that will have basic layout
and other stuff so let's go inside the
constant we can create another class
and this one will be k um I don't know K
value or yeah K value is equal to or
let's open the
bracket oops let's open the bracket can
I open it come on all right perfect so K
value the next thing you need to do is
static I completely forget what was the
purpose so let's go back inside home.
page and yeah the goal is to write some
text so basic layout will be the first
one static const string and basic layout
basic
layout is equal to basic
layout so you get the point of what what
I'm doing right now I will do just three
of them or maybe four let's do four and
I will just say uh uh what we have
learned inside this course maybe we
could do that so let's say example basic
layout and then let's say uh clean
UI and then let's say fix bug and stuff
like this stuff like this and then we
can say key
Concepts and replace all of them
key
Concepts and then
clean oh my God it's terrible clean
UI and the last one
fix bugs all right that seems good
enough is enough so let's go back inside
the homepage and we can use these values
instead so you should do this for every
um every data that you have you should
put all of them like flutter map basic
layout this is a subtitution you should
put all of them inside a file constant
or something like this it's not good to
put random magic word and random magic
number inside the code but just because
we are uh in a teaching style I just
want to go fast and don't waste your
time so that's about it anyway so let's
go and remove this and we'll say k uh
value if I remember and it was anyway K
concept okay what we will do at this
point is we will create a list I will
say um
list we can even create it inside it
doesn't really matter so I can say a
list of
strings list of strings
I have difficulty with the keyboard
right now so list of string and this
will be called just a simple list let's
create this list and inside we'll just
put all the constants so it was K value.
key concept then K value do uh let's use
all of them 1 2 3 4 replace boom clean
youru ey and then fix bug and then
basically out okay and we can use the
list instead of using three we will say
list. length and now we will have four
items but we need to change the name
also for the name that is inside the
list and you do this by using instead of
writing this you will say list dot
element at and you put the index from
the list that generate and this will
automatically Target the 1 2 3 4 and the
play the value so that's about it uh you
could create some sort of button you
could wrap this with a gesture detector
if you would like in order to make it
clickable and go in another page but for
this uh course we will not touch these
things anymore I think because it's all
redundance it's always the same thing
you have learned what it needs all right
so what we'll do instead is we will work
on this one we will create a gesture
detector for this little button the hero
button because we need to at least use
the erow button otherwise it's
completely useless so let's go inside
erow
widget we will change this for a gesture
detector so over the stack refactor
gesture detector wrap with a widget
gesture
detector great and now I will say
ontap and ontap will trigger a function
and the function will navigate into to
another page so which page which page
are we navigating to it would be uh we
can say let's create something new I
would say this dot uh can I yeah we can
do it in inside this video we are at 7
Minute 3 minute left let's do it fast so
this dot uh next
page okay and I don't put required
because this value will be able to be
null if needed so I'll would say this
will be uh uh for now we just say string
but I'm pretty sure it will not be a
string I think it will be a widget so
widget next page like this okay and now
we need to tell flut that this can be
null and because it can be I need to
change this for the coma and because
this can be null now then it works we
are not required to put the information
because if we don't put it it will be
null all right so the next thing we need
to do is to navigate we don't want to we
don't want to nav uh rewrite everything
navigation blah blah is super boring so
what I like to do is just copy one from
the
Welcome work fast not harder so copy
this and then you just replace this save
and now the login page what we will do
is we will return the next page like
this but the thing is we need to make
this available
only if we have a next page value right
so what we can say is we can say if the
next uh next page if the next page is
equal to uh is not equal to
null is not equal to null question mark
if it's not equal to null then do the
function otherwise do nothing null okay
so this since we know that will not be
null we can say that I'm sure that this
will not be null and it will work so
great now we are able to use this as a
button let's just do it in 1 minute so
when we click on it what we want is
let's go inside the homepage we are
using the eror widget and we can replace
the and we can put the argument next
page and create a page um for now what
we could do is we could just go inside
the onboarding page um and just save so
when you click on it you go in the
onboarding page but that is not the best
way to do it so instead what I will do
is I will just copy a new page I will
say new page I will say uh course do do
course page. Dart like this I will
import
material and then what we can do is we
can just copy a page I will copy the
homepage so I go in homepage copy all of
this contrl C go in in the course page
copy all of this okay so now we can
remove a couple of things the list will
not be useful anymore then the lizard
generate usess we can delete this the
ero widget we can remove the next page
so we just see the top of the widget we
just see the EO widget and we delete all
of this let's save replace the name for
course page this video is very long
sorry for that and now uh this seems
pretty good
so we can say this is a course
instead and save let's delete this
homepage in the homepage what we'll do
is instead we will redirect to the
course page so now inside this course
page we should have the hero jet but
with the text uh course so if I click on
it it does work but we have one problem
and is that we don't have any scaffold
okay so inside the first we remove the
you on unusable uh import let's delete
this and next let's go inside um which
widget are we course page and we can
wrap all of this inside a simple
scaffold so cut scaffold a bar a bar
empty the only reason I do this is to
have the back button body and we paste
the body save now you can see that we
have the back button and when we click
on it you see the little animation this
widget doesn't move and doesn't even
move and I think it's pretty cool it's
because of the EO widget all right so
that's good what we can do next is um
let's use the dark mode to see if this
look cool I can click on it pretty cool
and yeah that's pretty much about it in
um in the further video we will be able
to work a little bit on the profile page
but I think for now this is pretty
pretty good I hope you you like this so
far and I see you in the next video you
will see this one is damn pretty cool
that's it see you in the next one
bye okay so I told you I will show you
something pretty cool and this thing is
how to change your flutter app icon okay
because currently it's the it's the
flutter logo but we would like to have
our own logo so for this what you will
need to do is you will go on Pub Dev and
you will search for flut launcher icon
first thing first let's go in installing
and I will take this dependency and add
it inside my code I will say uh command
shift p add dependency and then you will
paste it and press enter okay so you
will see it will appear right there in a
while so we'll save again let's save it
didn't work so let's try again add
dependency paste and press enter so this
should be inside perfect so we have the
FL launcher icon if you don't have the
ad dependency you can just write the
flutter launcher icon as usual next you
will run flutter pop get just to update
the file and everything so let's go back
inside the code and now the next thing
you need to do is go inside read me and
in read me you can scroll
down and you will see that you have two
options you can either set up with a
config file which it's a I prefer this
one because it's faster but if it
doesn't work for you you can either use
this so you be able to put all of these
information inside your pope. Yom so
this file right but we will generate the
thing inside this video because it's
cooler and faster so run the following
command to create new config so I will
just say copy and boom we go inside the
terminal and where is the ter
terminal terminal uh we can delete
everything oh no this is okay so we have
the terminal and now I can paste D run
flutter launcher icon generate so when
we press enter you should see that now
you have this file the flutter launcher
icon.on okay but if it doesn't work for
you you can just enter all the
information in the pops.com like I told
you all right so let's modify this thing
first thing first Mac Mac OS windows and
all this stuff we don't need this I will
delete okay if you need them keep them
but for now we will just use Android and
iOS okay if you want you can create uh
an image pth Android and an image pth
iOS but for now what we'll do is we will
just keep one image so we keep it
simple the image won't be inside this
file instead it will be inside image and
it will be let's add it right now it
will be
logo.png this one okay I add it inside
my project and now uh again you just
have to remember that if you create
another file you will need to go inside
your pops.com to add one okay this is
working because we already have the
asset image just keep this in mind after
this inside the flutter launcher icon
what we will do is we will change the
path and it will be
image and then it would be logo. PNG
great so for the rest we can keep
everything remove Alpha Channel this is
mandatory you will see later uh it's
because Android uh iOS doesn't have any
uh transparent logo you can see there is
no transparent logo and this one is
transparent so it will automatically
fill the the transparent
okay so that's good next we will save
this file contrl s we can close it and
then we can go inside the flutter um we
can go inside the terminal actually we
will go back inside the
website if I'm able to find it perfect
and what we will do next is you will run
flutter PBG and dart run flutter
launcher icon so let's copy this go
inside the terminal and paste and press
enter great so this will resolve
everything flutter pop get launcher icon
create default icon warning you can see
the warning uh icon with Alpha channel
are not all allowed in Apple Store so
that's why we have the uh if we go back
inside flut launcher icon that's why we
have this thing remove Alpha Channel
true okay so that's good everything
seems pretty good so what we'll do is uh
currently my application is closed so I
can close this also my application is
closed so I don't have the application
running in the background of the phone
so is it so I will clear it if if it was
running but anyway we will relaunch the
application because if you keep the
application launched and you do all of
this and then nothing happen it's
because you have to close the
application and relaunch it okay so I
will say I will go inside main. Dart and
I will click this little thing boom and
I'm launch launching the application
okay so if you go back inside the
flutter launcher icon meanwhile I want
to show you a couple of things so first
thing first the minimum Android um the
minimum and SDK Android this is inside
if by if by example you need to have
this information and what it is inside
your your your project you can go inside
Android and then grade all and then it
is Bill Gradle is it this one is it Bill
Gradle uh Gradle Gradle Gradle no it's
inside app and Bill Gradle this one
because there is two Bill Gradle there
is one inside app and and there is
another one so let's go inside app build
Gradle and you can see that we have the
minimum SDK and if you want you could
change this for 21 or something else
okay if later inside your flutter
Journey you are required to do this at
least you will know where it is great so
that's good now let's close this and see
our application and now you can see that
we have the flutter launcher icon that
is pretty cool but uh what we'll do
anyway it's for the next video that's it
see you in the next one
bye all right so let's talk about how to
create a circle Avatar inside your app
and also what we we'll do is we'll
change the UI uh let's let's change the
UI first because there's a couple of
things that is pretty ugly so by Example
The Space Between each item is pretty
big and this is pretty small so let's
let's fix things and then I will show
you the circle Avatar which is a pretty
cool widget so what we'll do first thing
first is you see how this little image
is going straight into the app bar when
we scroll as soon as we scroll so it's
really so close so what we need to do is
create some sort of space between both
of them we will go inside the
homepage and inside this one we have the
hero widget which will add a sized box
over and maybe you wonder okay but why
don't I use the padding for this so
let's use it if we P if we put a
vertical padding of 10.0 right what will
happen when I scroll you can see that we
have some sort of
uh P yeah it's it's called a padding but
it's like um a black bar so it's kind of
weird and it does the same thing with
the bottom you can see right there and
we don't want this so what we'll do
instead is we won't use the padding
because the padding reduce the available
space instead of using the padding we'll
remove this and I will save we'll use a
sized box so over the EO widget we'll
say size box height of maybe 10.0
and let's put all the commas like this
and save great so this is already better
when we start to scroll we don't have
the image right into the app bar okay
the next thing we need to do is to
reduce the space between each item and
we can do this inside the container
widget so I will press command and I
will click this so you can press on Mac
you uh on Windows you can press control
and click next we will go inside the
padding so the container padding and in
inad of using vertical uh I think it was
20 is it
20 uh padding okay sorry it's this one
so instead of using 10 we will use five
okay this is the 20 all right perfect
and now we will use five so this will be
uh already
better next what we can do is we can go
back inside the homepage and we will add
a little padding right there because
right now the space between both of them
is not really the space between the
image and the first one so we we will
add another sized box right under and
save and this look already better uh
maybe what we can do I will restart the
application just to see if everything is
fine let's go inside register that's
good but I think it's still a little bit
too much so instead I will use five I
will go inside the container witchet and
what I will do is for the vertical let's
put zero and save let's see what
happened so when we put zero you can see
that we have the cart which create some
sort of automatic padding so the card
have a padding by default so that's why
what we'll do is maybe we can just say
um padding inside the
card so elevation margin surface T ship
ship ship margin let's use margin Ed and
sets ENT
sets dot zero let's try this sorry and
now you can see that all of them are now
closed are very close to the other so
you can if you want change this because
the card will automatically create some
sort of padding of margin all right so
what I will do is I will remove this I
will just put 2.0 and save and right now
with this it look pretty pretty much
better of what it was previously all
right so we have this next we need to go
inside the profile widget and what we'll
do is we will add a circle Avatar like I
told you at the first at the beginning
of the video inside the profile page.
Dart and we use inside the children
Circle
Avatar and now let's put the coma in
save this is the circle Avatar you can
change the size by saying radius and
maybe
50.0 and you can change what is inside
so we'll say background image and you
probably think like okay I need to say
image. assets and then write the the
path you are right but with the circle
Avatar there is something a little bit
weird that I will show you after so
instead of uh yeah we will put the path
first I say asset slash image slash I
will use the this image the background.
gpg okay because I want you to uh I want
to show you how the circle labor will
automatically put this image as a circle
so the background image we use this and
we say bg. gpg great but now we have a
problem we have this thing saying blah
blah blah we can't use this thing
instead we will need to use the reverse
I know it's pretty weird but you will
have to just remember somehow so it's a
set image but you will use this widget
pretty much only inside the circle
Avatar so that's it so when we save now
we have our Circle Avatar so this could
be your profile image or something like
this right so that's pretty that's
pretty good uh maybe you could write
some sort of uh you could create more
stuff to make your application look
better but all of this is all redundant
so it will be always the same thing so I
don't need to show you uh again and
again and again because this will just
waste your time all right so for now we
have talked about pretty much everything
inside the package section and I will
see you in the next module but the next
module I I would say nothing but the
next module is pretty cool so see you
next one
bye okay so you will see this this
module is really cool okay we will talk
um first we will talk about the
fractionally sized box but in the next
video we will talk about the layout
Builder and this is where you will see
that it's going from beginner to
Advanced stuff okay what is the layout
Builder first thing first the layout
Builder that we will use in the next
video is just a widget that allow you to
have the information about the width and
the height of the screen and by having
this information you are able to by
example I opened an iPad I opened the
entire project on an iPad and you can
see that this look pretty stretch out
and it looks super weird so what we will
do later is we will say if the screen is
bigger than x amount then I want to
change the VIS the visual and for this
you can use the layout Builder but
before I show you the layout Builder I
need to show you another widget and it's
called the fractionally sized box the
fractionally sized box what will we'll
do is we'll go inside the the login page
which is this page and we will need to
make it look better because on on an
iPad it look really strange so for this
you can go and wrap the entire column I
would say
refactor and I would use wrap with
Widget would say
fractionally sized box so the
fractionally sized box have some sort of
uh width factor and the width Factor if
I say 0.3 this will take only 30% of the
screen for the width all right you get
it and if we put maybe 70 this will take
70% of the screen so let's put 50% and
now it look just better okay we could do
this for all the other widgets but uh
it's just you understand the point and
if you understand the point that's good
all right so we don't need to waste time
uh doing the same thing 500 times so
that's good but in the next video I want
to show you how you how you can create
this um more responsive like more a
responsive app which let's go let's jump
into the next video and not waste time
that's it see you in the next one
bye okay so in the previous video I've
tried to explain you at the end
something but it's just sometime simpler
to just show instead of telling and this
is what we'll do we'll use the layout
Builder and you will understand right
away let's wrap the entire fractionally
sized box with the layout Builder so
because the layout Builder is a weird
widget it won't work with the refractor
blah blah blah so I will cut the entire
fractionally sized box so from there
till this thing I cut all of this okay
cut and then I use the layout Builder
great so the Builder will be the context
constraints which will return return
what we had previously oops excuse sorry
for that so it will return what we had
previously so I will just paste back
what we had put the sum in column and
save okay so we can see that right now
we have the layout Builder and we have
the fractionally size box and this is
the Builder okay next what we'll do is
we have access to this constraints you
can Define the type if you want so it
look more like professional somehow and
you can use the constraints in order to
say if you want to uh split the size of
the screen by 50% or not and you can
say
constraints dot Max width and if the
screen is bigger oops if the screen is
bigger than
500 then it will be 50% of the screen
for the width otherwise it will be 100%
it will be the entire screen and it will
act normally so let's save and now
because the screen is bigger than 500
let's find out what is the size of the
screen I will add a red point point I
will restart and now uh if we go inside
next next you can see that the width of
the screen currently it's
990
992 okay so we will say now if the
screen
is bigger than 1,000 which is false so
this should go inside one and it should
act normally so if I restart the
application you see that now this is
going to act normally so if the screen
is bigger than 1,000
then it will act as 50% otherwise it
will be one but this doesn't make sense
right now so we will put back this to
maybe 500 and we will see later if it
makes sense with the uh the iPhone so uh
we can uh what I will do behind the
scene is I will close this thing and I
will reopen the iPhone so you don't have
to to uh just watch me doing it that's
about it and I see you in the next video
bye okay so the layout Builder is a
pretty cool widget but do you really
need to use this inside every
application you create not really
because this is more if you want to
create an iPad and an uh an iPhone
application that will work for both of
them but usually you just want to start
with uh Android and iPhone so you don't
really need to use the layout Builder
but what if you need to have the size of
the
screen you can do this without using the
layout Builder and it's a little a
little bit faster so okay a lot of words
but not a lot uh not a lot of code so
let's code right now media query do of
context so of context
dot
size doth with okay and this what it is
it is a double so you can say
double
with uh with screen by example is equal
to Media Cy blah blah blah blah blah so
this will give you the information of
the width of the screen you can put
height if you want but for now we need
the width so we can just use this and
put it inside instead of this instead of
using the constraint Max width okay we
can just put this and it will do just
the same thing so you have still the
screen of the width but uh yeah that
that's pretty much it but the thing is
why do I show you two things usually I
like to just show you the best practices
so you don't have to like learn a lot
lot of things for nothing but for now
this you kind of need to learn both of
them the layout Builder will be more
useful if you want to create some sort
of iPad uh iPad and iPhone application
but if you just need to have the
information about the width of the
screen then you can use just the media
query so that's about it I wanted to
show you both ways to do it because
these are pretty interesting that's
about it see you in the next one bye
okay so this one might blow your mind
and it's pretty cool so you can see how
uh currently the application when we go
inside oops when we go inside this thing
is pretty big and it doesn't really look
good okay so when we go inside is still
the same thing but it's it's weird maybe
it will be better if the height of the
thing will be smaller so for this we can
use an aspect ratio the aspect ratio
will create some sort of uh by example a
result you know when we go uh a video a
video online is usually this resolution
1920 by uh 10 80 okay screen size
whatever you understand what I mean so
you can use a npec ratio and give it
this information in order to display the
size of this thing and this is what
we'll do so we will remove this and we
will go uh inside the homepage in the
homepage we have the ero widget so let's
go inside the arrow Jet and inside this
one we should have the image so we have
the image the clip AR wct we will do it
over the clip R so let's
refactor refactor and wrap with a widget
which will be the um how aspect
ratio great the aspect ratio will requir
the aspect ratio and this this thing you
can give it exactly that so it can be
1920 by 1080 so let's do this
19 20 but you will need to divide by
1080 so now if we save you will see that
this is really like a basic screen 1920
by 1080 it's the same like format okay
so next what we need to do is inside the
image ass set we'll say
fit fit box fit. cover box fit. cover
and save so now you can see that this is
now an aspect I of 1920 divided by 1080
but you can use something else maybe you
can put two and save what will happen if
you put two to just mean that for each
um for each height it will be the double
for the width so by example if I say 0.5
you will see that it will be completely
the invert now we have for uh we need
two width in order to be the same size
of the height so this is how you can use
the aspect ratio I will put back the
1920 divided by
1080 because I think it's pretty cool
just to use this and be able to display
a widget that will uh mimic a screen
resolution I I think it's just cool and
I wanted to show you this so you can
click on it and you can see that both
widget will now have this aspect ratio a
pretty cool widget to know in order to
create some sort of responsive layout
that's it for this one and I see you in
the next video
bye-bye okay so let's start talk about
the expanded and flexible widget these
are pretty cool so uh let's first thing
first go inside the setting page we will
need to create another page so I I'm
able to show you uh pretty much
everything about these widgets okay so
in the setting page we have uh some
elevated button some fill button we will
change one of them and navigate into
another page so I will say um show um
flexible and expand and dead and save
okay so when we will click on this
button it will go to another page and we
can do this with a navigator do we have
one available maybe in the welcome page
yeah we can use this thing we'll copy
this Navigator and close and go in the
setting page paste the Navigator inside
the button we
created save and we'll go inside another
page so let's create another page and
we'll call this the uh X Ed
flexible
test. and enter great so now we can
import material and say State L wiget
and it will be expended flexible test
great so we should uh instead say page
to make more sense to reuse always the
same logic
because uh each of the each page have
the page at the end so it will make more
sense and I will change this also by
saying page great so now we can use a
scaffold
widget scaffold widget and yeah that's
about it we will use a na bar AB bar and
then a bu oops bu uh column like this
and now let's save okay so now we can
navigate inside the expanded flexible
page and I will remove this login page I
am inside the setting I just jump into
the setting and I will say expanded
flexible expanded flexible page great so
now when we click on show flexible and
expended we are inside this page that's
good now I can show you how to use the
expended and the
flexible so inside the column we will
say children and inside this one I will
say
expanded inside the expanded we will use
use a
container and the container we'll have
the color colors do uh teal let's use
teal for now and let's save okay so the
expended will take as much place as
possible that's the only goal of the
expended and because we are inside a
column the expended will take as much
place as possible vertically all right
but if you were inside a row it will
take as much Place horizontally you have
to take this in consideration and also
remember that when you use flexible and
uh expanded you need to use them inside
either a column or a row usually okay
otherwise it can create some sort of
bugs so that's good what I want to show
you next is inside a column what you
could do is you could create another
expended and call this one orang so now
let's save both of them will take as
much place as possible but they will
share the space if you don't want to
share the space you can tell that you
can say that the flex of this expanded
is twice as big so it will take twice
the space of the teal one and you can
see on the screen right now next if for
example you say Flex 4 this one will
take twice the space as this one because
it's two times bigger so let's save it
will do just the reverse that's good now
let's remove the flex I want to show you
other
stuff so this was how to create a the
expand de but um let's let's remove them
and let's use a row instead okay inside
the column I will use a row and I will
say children and I would say x I can
just copy what I had previously uh copy
and V bo bo bo boom row and I will just
paste them like this okay now we have an
expended inside a row but the thing is
we don't see them and the reason is the
expanded will take as much space as
possible but within what within the
parent so the parent is a row so it will
take as much place as possible uh
horizontally but vertically nothing
really happen so in order to show
something you will need to put a height
and the height let's put 20.0 for both
of them like this and now we can see
that the flexibity is working once again
and it take as much place as possible
and it share the space it does the same
thing okay that's good now uh let's do
something else the something else is we
will use a FX flexible widget so
flexible flexible Widget the flexible
will do the same thing so you can see
that it take it share the spare it will
share the space with the expanded like
it does but the flexible have something
different and it will automatically
shrink the child widget so if we go
inside the container right now we don't
have any child in the container but if
we put a child with a text saying uh
hello and save and put both of them both
child hello you see that the expanded
will still uh will still show the entire
thing but the flexible for the orange
color it will stop right away for the
child but if the child go bigger like
this and save it will
take all the space okay this is the
difference between the flexible and
expanded they are pretty similar but
sometime uh you will see some difference
you will have to practice with them in
order to really understand them but I
want to show you a little bit more
examples so if we take another
row I will copy this
one and paste it right
under if we take another row and we
change the order let's put the flexible
first and expand that
after so I'll cut this one and paste it
right before and save okay I will also
add a divider so we can see better uh
divider like this and save okay so what
happened in this case in this case you
can see that the the second expanded
even though it's it's sharing the space
with the flexible the second expended
will go straight next to the the first
flexible and all the available space
right there is kind of used by the
flexible widget this one the yeah the
flexible widget okay so I know this is
weird but what if you put in the
flexible you say I want this to be the
flex I want it to be four times bigger
than the expended you will see that the
expended will shrink if I save now the
expended is smaller because all the
empty space is like kind of used by the
flexible even though we don't see it
it's kind of used anyway so this is how
you use the flexible and the expended
within column and rows just keep in mind
when you use them try to use them inside
a row and a column and keep in mind that
when you use expanded or flexible it
will go to the same direction of the
parent widget if it's a row it will go
horizontal and it's if if it's a column
it will go vertical one last thing I
need to show you is what will happen if
you wrap the column refractor with a
sized box widget so sized uh not a Siz
box but um single child
scroll view so now if I save you see
that in the the code we don't have any
bugs but what if I put an expanded
widget inside this so expanded widget
and the child uh let's put the same
thing so I will just copy this expanded
copy and paste perfect so now you will
see that this create an error and the
reason is the expended will take as much
place as possible vertically because
it's inside a column but we are inside a
single child School view which mean this
is infinite so yes this will create a
bug all right so you need to be careful
when you use expanded and flexible
widget because this can create bugs
inside your application all right so
that's about it um if you want you can
keep the page it's up to you it doesn't
really matter so we will keep it for now
and I see you in the next one bye
in this module what we will do is we'll
talk about networking so networking is
used in order to get data from the
internet and display inside your phone
so by example you go you get the data
from an API and you display this inside
the phone what we'll do is we'll really
go step by step okay because I don't
want to create a 35 minute video I want
to create little videos that are easy to
understand and digestable okay
so I just need to explain you first
inside this video what we will do okay
the big picture and then each video we
will do one little step so the first
thing is we will use the board api.
apppp bar.com okay you can use any other
API if you want it doesn't really matter
but we'll just use this one because it's
pretty uh it's pretty simple right
simple stuff after this you will need to
go on
HTTP um it's not this site it's dock.
flutter. deev cookbook networking fetch
data okay you will be able to find this
page and next uh you need to use some
sort of uh assistant AI if you want if
you don't like this don't use it but I
highly recommend you to use this uh
because otherwise you will be lost in
the sauce later in your life anyway
so first thing first we will need to put
the HTTP package ins inside our
application so we will do this for this
video at least what you can do is inside
this page you will be able to find the
HTTP package so you can open the link in
a new tab and this is just the simple
HTTP package provided by pop. so let's
install this inside the pope. Yom we
will go inside pop.on and I will say
command shift p at dependent C and then
boom HTTP and you should have something
like this inside your pope.com after
this we will save and we will flutter
popet just like that and now you should
be able to use the HTTP package inside
your flutter app and this is what we'll
do inside the next video so I see you in
the next one
bye before we start with the HTTP
package I need to tell you something and
in it's inside the fetch data if you
scroll down you will see that you need
to use permission something time okay
the the application with Android you
will need to add the permission if you
want to release in production if you are
developing or debugging it will be fine
the internet and the the API will all
works but if you are publishing on the
app store then you will need to add this
all right so I will show you where to
add this and it's only for Android and
Mac OS so if you Deploy on Mac then you
will need to do this also but for iOS
it's fine so let's add this inside the
Android manifest so where is this file
first you will need to go inside your
project you can minimize everything and
you will find inside Android you should
be able to find inside application and
inside source and inside main uh Android
manifest so you double click on this and
this is where you need to add the used
permission if you are develop uh
deploying on um a production okay so I
will copy this and I will paste it just
before the application like this boom
and you just make sure that is aligned
with application so in my case it is not
so I will do this and now everything is
fine if you don't remember how to add it
you can always go inside the Java I
think is it Java or yeah debug inside
Android manifest you will see that this
debug Android manifest already have the
use permission internet so it's the same
thing we just add it inside the
production one all right so that's good
we can close both manifest and we can
start building our HTTP request so we
have added the installing in the
previous video I've shown you how to add
the HTTP inside your dependencies now
let's use it let's go inside example and
inside example we will find um just this
little code and we will add this code
inside our project we will go inside our
application I will close the pop.on and
open uh minimize everything
open inside the pages so inside view
Pages we should have course. page course
page. darkart let's use this and inside
this one we'll modify the stateless
refractor and we'll use a state full
widget like this the reason we need to
do this is because we will use a init
state if you remember the init state
will trigger as soon as the page start
it will trigger this and then it will
start building the the page so we need
to get the information get
data at this point so we will create a
function get
data void get data like this and then we
can open the bracket and put some code
inside so now we will be able to see the
response from the API inside the inside
the terminal that's the goal at the end
of this video after this we will work
towards an application where you will
see in inside the application but for
now let's keep it simple so what we need
to do first thing first we can actually
just copy this entire thing and uh we'll
just copy this instead so let's copy
this and go back inside the uh the code
let's paste this and now let's remove
the useless
comments and that seems pretty good okay
the next thing we need to do is we need
to change the url because we will use
the board API documentation so this is
the website let's copy the the website
URL and again if you are using another
API which is a good idea because this is
how you really learn it's by like
modifying the things we do and just try
to do other stuff anyway I'm going out
of topic let's just copy this and paste
it inside this little
link okay so you don't need to put htttp
with the ur. htps so we will delete this
because this will automatically add it
inside okay so if you go over you will
see that if you put an example the UR
will return HTTP and everything so this
will end all the stuff after this you
will need to remove the random the the
path so we will re REM remove this and
paste it right there because if you go
over hdp you will see that you require
the authority which is the website Bor
api. apppp bar.com and you need the
unencoded path which is the random okay
next if you go over you will see that
you can put some query par parameters
these are some parameters by example you
know when you go on some website I don't
know if we will have some example no not
right now but sometime you go on a
website and you have some sort of a
question mark and blah blah some some
query this is where you can use them
okay that's the goal so we will delete
them because we don't need it right
now and after this you see that we have
await what we do when we have an await
we create a nay sync in order to tell
flutter that we can use an await after
this we have the HTTP so we need to add
the package if we go back inside the
documentation you will see that we need
to uh inside this one the example you
see that we need to add the convert and
the HTTP so let's take both of them copy
and paste the import inside our course
page so you can see that we have two
Imports
and we use the as convert and and also
the as HTTP this just mean that in order
to use it you will need to say http.get
let me give you an example if I change
this for HTTP HDH HG HT I will need to
change this one also for
HTTP h g HD HG you get the point okay
let's put back the
HTTP and now let's keep going so we have
this information
now what the code is doing is the
response will say I will wait for the
the information from the internet so it
will get the information from this Ur
which is this information this will re
return some sort of information like
this and after this we we say if the
response tatus is a code 200 which mean
it was
successful then what we will do is we'll
say the Json response is equal to all of
this and all of this just mean that we
will use the response Bud which is this
information and we will convert it
inside we will convert it into ajon
response which we can use in order to
display the information I know this is a
lot of words but you will understand
once we play with it so let's first
thing first uh just run the code I think
if we run the code and go inside the
terminal everything should already work
uh first we need to change the Json
response for the item activity by
example so I will just replace this for
activity and this should return a simple
activity let's go inside the application
I will go navigate next gener uh next
and click on this so if we go inside the
terminal you see that now we have a
return number of book about HTTP null
okay so the item count let's just verify
activity if I have activity
activity okay that's good we have the
information random print number of book
I will delete this and just print the
item
count like
this okay and let's try again just to
see if we have some sort of value get
started next next and we click on it and
now you see that we have clean out your
refrigerator and this information ising
coming from the internet and we get this
information and we are able to use it
inside our application I just think this
is this is incredible and fabulous to
know that whatever I'm I'm going out of
topic but I just think it's it's so cool
to know how to do these things uh anyway
so that's about it for this video as for
now what we have done is we have copied
a code but later in future video we will
modify everything you will be able to
understand how it works and we will be
able to display this information inside
the visual of the application if you
already have an idea how to do this try
to do it by yourself otherwise in the
future video in the next video I will
show you all everything step by step so
that's it see you in the next one and
bye in the previous video I've talked
really fast about what does the code
mean and I want to explain you a little
bit more how it works first thing first
the convert. Json decode okay what does
the convert mean it's just because we
use a has for the import so you need to
use convert in order to use the import
but if you want you can just remove this
and it will do just the same okay so
right now because I have used the API
like more than 100 time uh I I should be
declin at this moment but later inside
this course we will be able to reuse it
okay so let's just refresh the
application and see get started started
next and say register click on it and
now we should yeah we have it okay so
I'm still not declined but later if you
if you see some sort of code like 400
something it's because you have used the
the API too much time in 15 minutes okay
so for now this has reset so that's a
great thing so first thing first we have
removed this and we don't really need it
the reason we need to use a as sometime
is because two package or two import
will will be in Conflict one with each
other so if two of them have the same
function it will enter in Conflict so
that's why you need to use this but for
now we can keep it like this the next
thing I want to talk about is the Json
decode like why do we need to use this
actually and the reason is um if we
don't use the Json decode The response.
Bu is just a big string so it would be a
long long string with all the
information inside but everything split
with some sort of maps so that is the
reason we need to use this otherwise it
won't work so we can try and I can give
you an
example if I try to print another thing
another thing instead I will use the log
for this one so log developer make sure
that you use the dark developer the log
is the same thing as the print but it
will print in our range instead so we
will see the difference so instead of
printing the item count so which should
this uh which we should call this
activity just to make a little bit more
sense if we try to print the Json
responsebody like this you will see that
this is a string so um yeah I will try
it right now get started click on it and
click register oh I I need to add a
little something also we will say buddy
but we will add this thing also if I add
this you will see right away that we
cannot do this because it's a string the
bud is a string all right so let's
remove this and click on it
now you can see that this is what is
print this is an entire string so we
need to convert this information into a
map of string and dynamic so we need to
convert this into a map that's why we
use the Json decode and the Json decode
is only available because we use the
import Dart convert all right so now you
understand a little bit more after this
uh I don't think we need to talk a
little bit more about this because uh
yeah that's pretty much all we need to
to talk about uh yeah we have you
understand this line and all those lines
uh if anything just put a comment inside
the the video and that's it so I see you
in the next video
bye for this video what we will do is we
will start to convert this information
into something that we can use inside
the phone and display right there all
right so for this we will go inside the
internet and we will follow this little
tutorial together step by step but we
will use instead the board API
documentation so let's go down and you
should be able to find this section
create a Class album so instead of
creating this class and what I will do
is I will just copy this I will go
inside chat GPT and I will just say you
can use any personal AI it doesn't
really matter it's just super fast so I
would say um use this class as reference
reference for the next
prompt okay like this and boom so the
the next thing will be to put this
information inside and I will just say
to to GPD I will say um use this to
create a class and boom like this just
by doing this uh Dart not Dart but GPT
or any AI assistants will convert
everything and we'll make it look just
like what we had previously so Factory
everything should be the same thing yeah
it's pretty much the same thing but with
what we want so we can copy the code and
we can create a new class so we'll go
inside data and inside data we can say
new file let's call this one activity
class. Dart or even we can create a
folder for this it will make more sense
because if you have more classes inside
your code you will need need a folder
for this so activity inside the class
and move perfect now we can paste the
activity inside and we have all the code
that we need which is pretty cool and
let me explain quick quickly the the
code is just a simple class you put the
information Inside by using the from
Json and you just put the Json inside
this will convert everything and create
an activity it will return an activity
and if there is an error it will
format exception error okay simple stuff
so we can go inside the course page and
now we can use this so let's go back
inside the tutorial the next thing they
tell us to do is to use the HTTP
response so we are doing this already so
await get this information that's good
but now we need to say return album from
Json blah blah blah so we will con we
will change we will copy this and we
will change what we have currently all
of this we will change this so maybe we
can use the 200 or just paste this it
doesn't doesn't really matter for now I
will delete this I will delete this and
we will need to modify a couple of
things so album is not a class that we
have created instead it is called the
activity I will uh use the activity
class so I can say Activity and this
will import the package automatically
you will see at the top we have the
package where it is it is activity class
we can delete the log package which is
the developer we don't use it anymore
and now we have one error and the error
is probably because we don't return
anything yeah the void is not expected
to return anything so what we can do
instead is we can store this information
inside the page we can do this by
creating
another variable we can say Activity
activity activity just like that and
boom and you can see that the activity
should not be can't be null so what
we'll do is we'll say this will be a
late value okay a late value just mean
that later we will set this value so
it's okay if it's null for now so we
will set this activity value activity is
equal to this great so now we have
access to this activity and the next
goal so let me prove it to you first I
will say
print activity dot uh activity because
it's activity is the class and activity
is this little thing this thing okay so
we should this should return one
activity let's do this I will restart
the
application go inside the
course and click on it and now if we
open the terminal you see play a game of
monopo so everything still work but we
are using a class instead so now we have
access to an activity which we can use
inside our application to display the
information but there will be one big
problems the thing is this thing will
not be finished once this start so it
will start it it will start to await the
information but because we are waiting
and we don't uh we don't wait anything
for the init state it will start
building the application right away okay
but you can't build this this
application if you don't have the data
so how can you handle this information
for this you will need to use a future
Builder the future Builder will just be
uh a little widget that that you can use
and it will wait for the data before it
will just wait for the data in order to
display this I will show you everything
in the next video see you in the next
one
bye okay so how do you use the f future
Builder again just keep in mind that if
the return in your terminal is like
error 400 something it's because you
have used the limit too many time okay
so just keep this in mind anyway so now
we will use the future Builder I will
cut the entire padding widget let's cut
this and say future Builder and this
widget is pretty cool you will see first
the future we will say get
data like this I think it was the name
yeah it will not work for now because we
will need to convert this into a future
or we can do it right now
future but uh after this inside the
Builder what we'll do is we will say uh
common space or control space and this
this will have access to a Snapchat what
is a Snapchat is a async Snapchat first
thing first we will return what we had
previously which was the the padding
okay and now for the Snapchat let's put
the type if you want it's up to you if
you don't like to put the type you don't
have to but I like to do it so that's
good after this we can use the Snapchat
saying is this loading if it's loading
then display a loading with yet and if
it's finished if the the data is
finished to load then give me the data
all right so what we'll do is we'll
say if and um there is a couple of
people that don't like to put many
returns so I will try to just put one
return but uh yeah so we'll create a
widget widget like this oops widget
widget uh okay never mind we will do
this later I don't want to confuse you
right now okay so I would say if the
Snapchat do connection state is equal to
connection state. waiting so if we are
still waiting for the data
then I want to return the circular
progress
indicator uh this widget is just um a
loading widget so you will see it's
loading on the screen after this we can
say if the
snapchat. connection
state. has oops not connection State but
has
data uh we can say error
maybe or has that it's pretty much the
same thing so if it has data then we can
display the data we can say return the
padding this
Ting and finally what we can say is we
can say uh else if all of this doesn't
work then
return a center widget which will have
inside the child a text widget saying um
error okay you can modify this to make
it look better but for now it's just
simple stuff
okay so now you will see that we have
error and the reason is the um the get
data isn't returning anything for now so
if we go back inside you will see that
we still have the error and this is
because the the get data is not
returning nothing so that's the problem
and another thing we need to fix later
is you see how many return we have I
know some people like to put only one
return inside their function and I don't
think it's a bad way to end all things
so we will change this later in a future
video so first thing first let's fix the
get data in order to see something at
least for this we will need to instead
of Define an activity we will return the
activity and the return activity now we
can just delete this
first and we can remove the print and
that should be good so now oops what is
this not now so if we save you see that
now it's working and we don't have the
error so now flutter understand that we
have data but how do we use this data so
what we'll do is we'll say
snapshot dot uh data now we have access
to the data and we can say um this is an
activity so let's say Activity oops
activity activity is equal to this great
so this should still work if I out
reload yeah everything still work and
now we can use this information so
instead of displaying course we will
display activity. activity oops activity
and now let's save and now you see that
we have the activity it's not really
visible right now but if we go closer we
can see um listen to something new music
blah blah blah blah blah I will just
make this a little bit more visible so
you can see better I will put another
text under the widget saying exact ly
the same thing like this I will put all
the Comas and save now you see create a
meil plan for the coming week so it is
working and just the fact that we have
build a future Builder that we request
the information from the internet and we
display the information into the
application by using a class I think is
just super cool so that's about it for
this one uh yeah another thing I wanted
to show you was how to remove the
multiple returns because some people
people don't like this and we can do
this in a couple of seconds so what I
will do is I will say widget
widget and the only thing we will do is
we will go through all the if condition
and at the end we'll say return the
widget okay and we will remove all
returns and replace them for so let me
select return I will select all of them
the three of them and I will say widget
is equal to this information so now each
of them will be defined so if the
Snapchat connection is waiting then it
will Define this as the widget if the
Snapchat has data then it will Define
the widget as this and otherwise it will
Define the widget as Center and then
display this so now if we just UT reload
you see that everything is still working
but we only have one return statement
which Some people prefer this uh one one
return widget so that's about it and I
see you in the next video
bye all right so now we need to talk
about one thing and then I want to show
you one other tips and tricks that you
can use in order to code like 10 times
faster so the first thing is if you
still going through the tutorial you
will see that later this thing will tell
you like okay you can display it with a
future Builder like we did but they do
it in a different way they use the
Builder and they say if there is data
then display the data else if if there
is like an error then display the error
and otherwise display the circular
progress indicator so there are many
ways to to code with flutter so this is
another uh another way to do it if you
prefer this one you can take this one
it's up to you after this another thing
I want to show you is how to use chat
GPT or any AI we doesn't really matter
in order to generate all of this code
without even like wasting time so what
we will do is we will first say um we
have this
information uh yeah we will just go in
chat chat GPD right now and we'll say
Okay based on this
information I want a flutter page uh
code I want a flutter
code to display
this uh this
API that's it and maybe we will need to
put some sort of information uh yeah we
will need to put this and let's scroll
down to see what flutter give us okay
that's good uh but now we will need to
change the url so um the URL
is is this boom okay so now uh you will
be able to just copy paste really fast
so this already create the class after
this we have a main you will need you
will not need to copy this but it will
create a stateless widget for you which
you can just copy and you will save uh
incredible incredible amount of time
just by doing this so let's wait for
this to finish and I will copy all the
code inside this page and I will show
you how fast we can code with AI like
this so let's copy the code let's go
inside course page and I will replace
this boom and paste everything next we
will need to modify a couple of things
first thing first the URL launcher um we
don't really need this after this and
yeah you have to keep in mind that with
uh personal Ai and stuff like this you
will need to tweak a couple of things so
it's not perfect yet but it will save
you a lot of time so we can delete all
of this delete this also remove this and
just keep the the activity screen so we
will change the name of activity screen
for course
page oops course page and that's good
and now the activity we need to import
Quick Fix and import the activity that
we have inside the classes okay that we
have created
earlier and next you will see some error
so you can say Quick Fix and say um yeah
the error is just that we have some sort
of uh of line before so we will remove
all those lines I will select all of
them this one this one and this one and
delete them now it's better and another
thing is saying Constructor for public
widget should have name key so we can
fix this by going over quick fix and add
key Constructor okay so you will see
that personal AI uh are not really like
perfect yet but if you have one that is
better then use this one that's it next
this is all the the page that is created
for us so we haven't code that much uh
we can remove the launch URL we don't
need this sometime um they they do a
little bit too much but it doesn't
matter we can remove the elevated button
and boom this entire code is like
generated by by GPT and I I just think
it's so cool and right now we have an
error obviously so I will restart the
application I we'll go inside get
started next and click on register and
click on this and now this is loading
and boom display
everything isn't it like absolutely
crazy you click on fetch data and it
will fetch another one so you can you
can really code your entire application
by using a personal Ai and just if you
are able to Plug and Play the things
then you are like a machine you you are
unstoppable anyway I will stop with that
I'm I'm going to another topic it's
about like Ai and stuff like this but I
just think it's crazy how the the future
is going uh I will I will stop right
there that's it see you in the next one
and
bye this course is coming to an end so
you have done all the artwork and now
it's time to fly by yourself okay so I
want to talk about a couple of things
just so you get to the right track for
your own path okay and I want to show
you like the mistake I've done so you
don't have to do them you just you just
go out and start building apps first
thing to talk about is about State
Management okay you might learn uh you
might uh heard a lot of people talk
about this like you need to use this you
need to use provider you need to use
River PUD let's be honest we don't care
okay we don't really care inside this
course I've talked about the value
Notifier and if you release a MVP
application or just a simple app you can
use this if your job is required ing you
to use the river po provider you can
learn this it's super simple okay but
don't waste too much time if if it's too
complex and you don't like this one try
another one and at some point you will
have one that you kind of like stay with
it and it just doesn't really matter
okay don't waste too much time like
learning a lot of things for nothing
just just build apps okay anyway you
will be able to do pretty much
everything with the value net fire like
we have talked about in this course but
if you want to use um uh State
Management and you just want my opinion
I think River pod is pretty simple River
pod is like the newest version of the
provider so why not use the newest
version and after this uh another one
which is pretty cool is called the block
I don't see it right there but um a
block is pretty cool but it's is a
little bit complex so it's complex and
also you have a lot of boiler plate code
so if you don't want to to go inside
this route just try with River pod it's
pretty simple stuff and orderwise just
keep the simple value Notifier and
everything should be fine so that's it I
just wanted to talk about this don't
waste too much time on State Management
start building apps that's it see you in
the next one
bye the next thing is about how to
create an application that have multiple
language if you want English French and
other languages then you need you need
to use like intern
internationalization flutter apps pretty
pretty damn hard to say this word but
anyway you need to use this so you can
find this information online and just
follow the tutorial we will not talk
about it inside this course because this
is like uh I don't know it's not really
useful when you create your first
application so that's why it's just I
just want to give you a little things
that at least you will have in the back
of your hand at the back of your head if
you need them later inside your flutter
Journey so at least you will know that
you just need to use this flutter
localization and just follow this simple
tutorial and you will be able to use
English Spanish and other languages
inside your app uh how you do this you
just need to create some sort of
dictionary of all the words in English
and all the words in French and then the
application will Define if it's
currently in French or English and stuff
like that so if you need to have
multiple language uh you can redirect to
this information that's it I see you in
the next one
bye now let's talk about Firebase okay
if you don't know or you don't have any
server in order to authenticate user or
create a database or stuff like this you
can use Firebase Firebase is pretty
simple to connect with flutter because
both of them are built like by Google so
pretty simple stuff um we will not talk
about this inside this course because
this could this is a course in its own
okay it's really a lot of thing you can
do with this example you can
authenticate your user if you want you
can create some sort of database live
database or machine learning anything
you can create a lot of thing with this
if you have your own server uh or you
prefer your own server keep your own
server and use like HTTP requests and
stuff like that but Firebase is a good
way to authenticate your user when you
start this is what I use uh very very
simple to do if you want I have some
tutorial on YouTube then you can find so
you will be able to use Firebase
authenticate user and use a database so
that's about it and um yeah that's about
it with Firebase if you need
authenticate user and a database that's
it see you in the next one
bye the next thing we want to talk about
is this um how to publish an application
on the app store or the Android store
okay the Play Store for this you need to
follow this little tutorial on on
flutterdev uh how to release application
change quite often so I cannot really do
a video that will be because it will be
outdated in like uh 3 months it's it's
crazy so the only thing you have to do
is go on this website click on
deployment build on build and release on
Android app and build and release on IOS
app and this will tell you everything
you have to do in order to publish your
application you will see this um this is
a lot of pain in the ass just keep it
keep this this in mind uh it's pretty
annoying to do but once you know and
once once you follow the tutorial um
everything should be fine great so
that's about it for how to publish your
application and in the next video I want
to show you a little bit how to create
some sort of animation with your
application so we will talk about this
in the next one see you in the next
video
bye now I want to talk about animations
so if you want to learn more about
animation first thing first you can
always go on on YouTube I have a video
about every single widget with flutter
so you will find even all the animation
uh available with flutter and you can
pick the one you like but I also want to
show you one inside this video just why
not right because it's pretty simple to
use and it can make a lot of difference
inside your application to make it look
a lot more cooler so what we will do is
first will go inside we will wrap the
entire column so I will cut this and I
will use the anim
cross
fade so this animation will animate a
transition between two widget and in
order to change widget we will need to
have some sort of button to trigger this
animation so the first child is just
what the the application will display if
the value is true and if it's false then
it will display another widget so the
first widget we will past is what we had
previously the column and the second
child what we will do is uh I will just
put a center widget and inside a child
and inside I will say image do oops I
will say image. asset and I will use the
path of the image we think it was asset
SL
image image slash uh I think it was
background. gpg and yeah so the
Crossfade state if you go over you will
see that you need to use a Crossfade
State widget I will say cross fade state
DOT show first for now okay we will
modify this later after this the
duration if you go over you need to use
a duration widget so we say
duration
duration and the duration will be in uh
Mill uh yeah
millisecond and it will be 300
millisecond it's a good it's a good uh
it's a good number for animations
usually so if I save you see that we
still have the first widget which is the
column but now we need to change this
for the second widget show second now
you have seen the little animation if I
do it again and put the first and save
you see how you have some sort of
Animation okay this doesn't look that
much great but if you have two widget
that look alike by example if you have
another Center widget which I will show
you I will delete this the column I will
paste the center widget and I will use
the other uh image which was icon.png if
I remember and no it was not that so
let's go inside asset image it was logo.
PNG logo. PNG and save now you have this
and now let's change for
show um show second and save you see the
little animation the transition this is
what I mean so we will change this for
500 and in order to use it what you will
need to do is uh first thing first I
will put back the the padding the
column and I will change this for um
1,000 so it will be very slow what you
need to do is to create some sort of
buttons that when you press on it it
change so you will go for example in the
ab bar in the app bar you should have an
argument called actions and actions is
just right there all the button right
there I will use a Nikon button and this
one will have a function empty for now
and an icon which have icons do uh let's
let's say switch switch access shortcut
it doesn't really matter for now I just
want to show you how to use the the
animation so the this will use a uh I
don't think we need to use a set State
for the animation let's try it without
first we will say uh we will create a
variable so we will say right there or
right there Boolean is first is equal to
true
and then we can change this value inside
the icon button we can say is first is
equal to the invert of is first and
that's it so now when we press on this
we should see the animation and it
doesn't work so I will refresh the app
click get started next register click on
it and let's try again you see that this
doesn't work so I think yeah and the
reason is we don't even use this
information inside the inside the
Crossfade State we need to use this we
need to say if it's first then Crossfade
state. show first otherwise if it it's
not first then we will say Crossfade
state. show second and now it should
work so every time you press the button
now it should translate and convert into
the other one so let me just out reload
and do it again and now it doesn't work
because we don't use the set state so
yes we need to use the set State I will
say set State and put this information
inside and now
let's
save I will just UT reload and try it
again and now you see that it is now
working we have some sort of Animation
it's not the best animation you will see
in the world but at least you know how
to use them and if you want more
animation I have an anim I have a video
that explain every single animation on
YouTube so you can go there and look at
it so that's about it and I see you in
the next video
bye first thing first I want to
personally congratulate you because you
have finished the course not a lot of
people finish things and you are one of
them which is uh one of the best quality
you can have I I've heard once um lazy
people don't start after this it was um
loser don't finish and at least you know
you you are not loser because you have
finish that's great and third Legend
never stops and this has uh this has a
big impact in my life so hopefully it
has with you also but yeah
congratulation for finishing this course
um not a lot of people do this after
this I want to show you a little bit
what we have done inside this course so
you can uh look back and see oh damn
that's that's the big picture we have
learned all of this and now I'm able to
like build application with Le by myself
because with all this structure with all
this framework you are able now to build
application by yourself you have all the
tools available okay let's talk about
them we have talked a little bit about
the key concept like widget inside
widget stuff like this uh a widget is a
capital letter and argument is a cap
small letter and stuff like this we have
talked about the basic layout like all
the basic widget column row container
Siz box and stuff like this okay after
this we went into Master layout more
like the scaffold the material app and
stuff like this if you understand what
I'm I'm talking about right now it's
because you understand flutter okay you
have learned things that you didn't know
before and that's that's that's great um
next the two-step formula to debug uh to
fix your bug that was pretty simple uh
the state full stat less with jet if you
want to refresh the screen or not the
user input how do user can interact with
the application buttons text field and
yeah things like that gesture detector
next we have talk about basic routing so
how to navigate inside your application
so I think this should be right there
instead Navigator and this should be
right there yeah my mistake so let's
save and after this we have talked about
clean UI so how to create an application
that look a little bit better for
example you could you you could use the
widget clip or w or or you can use the
by example Circle Avatar stuff like this
just widget that are not the layout but
make the application look good and next
we went into package management so how
to use package in your application to uh
create something uh better for example I
think it was uh which which package have
we talked about if we go inside the
pope. Yom we have talked about the L
package how to add animations visual
animations which which is pretty cool
shared preference how to save data
locally on your phone this is super
important to know so we have talked
about this and how to add the flutter
launch icon HTTP but there are so many
dependencies or package that you can use
inside flutter we have just talked about
like the most important ones so let's go
back inside our um little thing it's not
inside this it's inside the other
internet after this um we have talked
about the response save UI so how to
create an application that is responsive
either for an iPad or a Mac or anything
that's pretty cool and for this you use
usually the layout Builder and stuff
like this next we went into networking
in the previous module and uh networking
was the HTTP request how to get the data
from an API and with this you can you
can build any application you have all
the tools to build any application you
can get the data from the internet you
can get the data from a server you can
create a uh an authentication with
Firebase we haven't talked about
Firebase yet but later inside this video
I would show you the the step you need
to take if you want to go this route
it's up to you but with the networking
you are able to do everything with the
internet and if you you uh merge this
with State uh with package management
which we were using the shared
preference if you merge this with this
you can save the data into the phone
also so this is really powerful and now
right now we are inside this module um
are you ready to fly high which is just
like the next step you can take in order
to make your journey even like bigger so
that's about it with this you are now
able to build your mobile app which is
really great so if you want to go to the
Firebase route it's up to you if you
have another server that you prefer to
authenticate user and have a database
use your own okay I will not force you I
will not uh force you to do anything
okay so uh I've started with Firebase I
think it's pretty simple when you start
and I think it's it's cool so you what
you will need to learn is how to set up
Firebase how to authenticate your user
how to create a database and how to
create a real-time database and data
management okay by example how do you
manage the fact that you receive the
data from the internet and how do you
save this on the phone and how when you
start the application where do you get
your information about do you get it
from the internet first or in the phone
so any question that we can answer maybe
inside another course about Firebase I'm
not sure if I will do this course
anytime soon or anytime in the in the
live because uh yeah anyway um that's
about it so again big big big
congratulation for you you have finished
your course and that's
great thank you for watching thank you
for taking this course thank you for
taking the time to learn flutter and to
learn with this course you could have
learned with any course and you you you
choose this one um and my my English is
terrible I won't lie my English is
terrible and you as you have still take
this course hopefully it's because it's
simple to understand and uh I just
wanted to say thank you for that thank
you for taking the time to learn
everything and taking this course and
congratulation see you on another video
Maybe on YouTube or see you somewhere
else you can always uh send me a message
pretty much everywhere online and I
should be able to answer you thank you
very much bye