Transcript for:
Flutter App Development Overview

[Music] 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 [Music]