Flutter Tutorial For Beginners in 3 Hours

this is how to learn flutter in three hours the first 45 minute will be used to install flutter on windows and mac then i will show you all the basics with flutter and we will have a practical exercise at the end you have all the chapters of this three hour video inside the description without further ado let's start this i will show you how to install flutter in this video first you need to go on google and you will type flutter you will then go inside the website flutter.dev and you will click on the blue button at the right top corner good now you will click on windows inside this page you will scroll down and you will find the blue button we will click on this one after we download git so i will go up a little bit and you see will you will have a link git for windows you click on this and this is to download git we will click on the 64-bit git and we will download this one i will click on the installation install git only if you don't have it on your computer if you already have it you don't need to do this step okay after that we will click on all the next pages so you will see it's like 10 to 10 pages maybe we will click next next next just verify the check box and the the stuff you want all all the basics is good for me so i will click install and now git is installing inside my computer good i will remove the check mark view release note and i will click on finish that's good i will come back on the previous page and now we will click on the blue button it's the sdk of flutter so this might take 5 to 10 minutes to download next we will go inside our documents inside our documents i will create a new document called flutter dev make sure to do exactly the same go inside your documents and create a flutter dev dock then you go inside your downloads you find the sdk that you download and you will click extract all we will browse to find the flutterdev document that we have just created and you will say select and then you will click extract this will extract the flutter sdk inside the new document that we have created the flutter dev document okay next we go inside the flutter dev document so we are already inside i will close the other page and we will go inside we will click on flutter and then you will find flutter console double click on this you should have a page like this once you have this page you will write inside the comment flutter doctor and you will press enter this should load everything for flutter so this will download flutter into your computer this might take 5 to 10 minutes but i will just i will fast forward this step to show you what happened at the end you should have a check mark and flutter next to it okay good flutter has been installed next what we need to do is go inside the environment variable in our computers we will edit the environment variable you click on path and you click edit and we will need to create a new path inside this one i will show you where where to find the pat go back inside your documents flutter dev flutter and we have the bin folder you will shift and right click and you will say copy path next inside your edit environment variable you will click new and then you will paste what you just copied it's the path of the flutter dev flutter bin folder you will remove the quotation mark at the start and at the end and you should have something like this you should have this and you will click ok good the goal of the path and you will click ok again you can close the file and we can close the terminal the goal of the path is to make sure that we can access flutter from anywhere inside our computer now if we open a new terminal you can write flutter doctor and you will press enter this is to verify and you can see we have the check mark with the flutter right after so that is good this main flutter has been installed successfully and the path inside the environment variable works fine so this was how to download flutter we downloaded the sdk in the next video i will show you how to install android studio see you in the next one bye let's install android studio you will need this to be able to have the emulator inside your windows to download android studio you will go back inside the flutter documentation and you will scroll down a little bit after the blue square where we install flutter you will find android setup and you click on the android studio link so you will click on the green button download android studio and now you will click i agree the term if you agree them and this will download android studio it might it might take like five to ten minutes also good once in it's downloaded you will click on the android studio link and this will open the android setup it will load and it will have a popup you will click on next multiple time in order to install android studio so i will click next i will decide where i save my android studio and i will click install so you can do all the same step as i do inside your windows computer you will click on next and you will click on finish when it's done now we have downloaded android studio now you can quit the internet page and a pop-up should appear you will click ok and now android studio is opening good you can share the data if you want with android studio i will click on don't send next you will have the welcome and i will click next you have this standard or custom installation i will use the standard i will say next i will use the dark mode because i prefer this and i will click on next also then you have the finish button again this can take five to ten minutes to install and i will just fast forward for you good now we have installed android studio and we can click we can click on the button finish this is our android studio setup this is when you open android studio you will click on configure and you will go inside settings this will open a pop-up and inside this pop-up you will need to go on plugins once once you click on plugins you will have a search bar on the top and we need to have flutter inside our android studio so i will go in the search bar and i will write flutter so the first one should be the good one and you will click on install and you will click accept if you accept the terms so i will click accept and next you will have a little pop-up saying do you want to install dart also i will click install because we need flutter and dart both plugin good now we have installed flutter inside our android studio and we can click restart ide so this mean it will restart android studio we have downloaded flutter plug-in and dart plug-in inside our android studio in the next video i will show you how to use the android studio emulator see you in the next one bye i will show you how to use the android studio emulator inside this video good first thing first uh you remember we have installed android studio now we will click on the button create a flutter project and you will click on the first one you will click next and now we have the project name for now we will just call it flutter app testing okay next we need to have the flutter sdk path so this is where we install flutter we'll go inside our document flutter dev flutter and we will copy this link if you remember you should have download flutter the same way i did so you will paste this and now if you want you can click the tree dot to find the file also but that i just pasted you will click on next right there you have the package name for now we will keep it like this but in further video we will change the package name i will click on finish and this will create our first vlader application this is the main domain application that flutter gave us when we start first project and right now what we will try to do you can click on fix it if you have this little pop-up you will click on fix it good and what we will try to do is to run the project flutter or first app into the windows emulator the next step will be to click on avd manager it's on the top corner right there you will find the icon this will open a pop-up and if you don't have a virtual device installed you will click on create new virtual device i will do it with you we will use the pixel 4 and i will click next but if you already have a virtual device keep it like this we will also download the error version which is the latest version of android i will click download i will click accept and next this might take five minutes to download you will click finish good after this i will click next and we have the next the next pop-up i will click finish good so we have add a virtual device after i will click on the play button to run the emulator you might have the unable to launch you click ok right now i will just close android studio to try again but the emulator might yeah exactly the emulator will open still you might have another pop-up i will just click ok and you can see that i have started to emulator by accident i will close one of them i will close all the pop-up and this is just because uh the computer i use right now is not the best one so it's pretty slow if you have a very good computer this should not matter so this computer is very slow next i will reopen android studio so android studio i click on it and this will reopen android studio you can see that my computer is very slow so it's very hard for the computer to run android studio and run the emulator at the same time i will click on close the pop-up and now you see the emulator have some problem it happens sometime if it does just close it and restart and now you will see it work good next you will click on the play button on the top of the screen this will start the flutter app so when you click on it this should start the flutter app this might take five minutes if you if your computer is slow it might take five minutes and you can see you have your first flutter app running on the emulator i will then go inside the search bar of windows and i will click cmd this will open the comment prompt and i will write flutter doctor when the comment is done it will load a little bit when it's done you will see you have the check mark and it say connect device one available so next step is to accept the android licenses so we will just copy this sentence flutter doctor android licenses because we need to do this also i will click enter and now you will have a series of question i will say yes yes yes yes yes and yes this is to accept all the licenses good and i will retype flutterdoctor once again so now you see we have three check marks we have the first one near flutter this mean flutter is installed we have another check mark near android studio tool chains licenses this is just the android studio license so it's good and we have the third check mark which is around connected device so everything is fine and you see you have two x red x near flutter plug-in and dart plug-in the computer think think some time that the plug-in is not installed but if you remember uh on the previous video on android studio we have installed these plugin so everything is fine next i will close the page and i will close the emulator and yeah in the next video we will install visual studio code the next step will be to install visual studio this is where we will be able to code for our flutter app so you will go on internet and you will write flutter visual code then you will click on this link and you will download visual code because we are on windows we click on the windows tab and now this should download visual code studio you will click on it to install everything we can close the internet page and now you will say but i will say i agree the argument you can read them i will click next and this is where it will be installed i will click next and i will click next again this is the installation good once is done we will click on finish and you can see that this will launch visual studio automatically i will maximize the page and now what we want to do is to open our flutter project so i will go in file open folder like this and if you remember this is where we saved our project so this is just a flashback okay let's come back so i will say open project and i will go inside it was inside see user the name of your user and next you will find android studio project this is the flutter app testing that we have created you see this is the location where android studio save the project this is what it looks inside the flutter app testing you will open the flutter app testing file good this is our flutter project and next you can click on lib for library and you click you double click on main this is your code for your flutter app it's the main code i will click on search marketplace you have see the pop-up that jump and i will install dart and flutter if you miss the pop-up you can click on extension the on the left side and search for flutter and dart the next extension i will add is the awesome flutter snippet so i will download this this is all useful extension that will make our life easier well when when we code with flutter you will then install the bracket pair colorizer 2 this will also make our life easier with flutter and yeah that's pretty much it we will go back inside our files and you have again your main.dart i will double click on it you see the difference now we have a colorful code and we also have all our bracket with colors you will then click on the play button and you will select your pixel that you have created i will use the pixel 3. this will use this will open the pixel it will have a pop-up that i will just close and we have the emulator so it's a failed to launch so i will try again i will click on play again it should open flutter inside our emulator our flutter project should run on our emulator this is the flutter basic project and it may take five minutes to load if your computer is slow then you have the little pop-up dart devtool i will say never ask because i don't want to use the div tool right now yeah this is our emulator with the flutter app inside we have run this one with visual studio this time good we will open again the cmd so the command prompt and inside you will write flutter doctor and you will press enter okay so this you can see that we have four check mark the flutter the android studio tool chain the vs code is now activated and we have a connected device so that was it for the visual studio installation now we have set up everything for flutter inside our windows computer we are ready to start learning how to code flutter so see you on the next video bye in this video i will show you how to install flutter in your mac this video is for intel mac if you have the m1 chip check out the next video first you will go on flutter.dev you will click on the blue button get started on the top corner and then you will find mac os you will go down until you find the get the flutter sdk the blue button and you will click on it this will download flutter it might it may take 5 to 10 minutes then you will go inside finder inside this one you will go on documents it's very important that you follow all these steps you will go on documents you will press command up this will bring up bring you to the the home folder and then you will press command up again and you will take your home folder mine is called macbook but yours will be your name i guess and you will click on macbook in macbook you will create a new file called flutter dev okay and then what you will need to do i will just clean up to make it clear like this and i will take my flutter file that i just downloaded and i will put it inside my flutter dev folder okay so you can see we have the flutter dev if you click on home you click on flutter dev flutter and you see the flutter the the folder bin this is important you will need to remember this one next you will press on command space and you will open a terminal like this first thing first if you have the version big sure or catalina you can follow the steps you can continue the steps but if you have an oldest version like mo heavy or high syria then you will need to go at 43 of this video so let's continue with the newest version of the mac you will go inside your terminal and you will write vim space the curve slash dot z s h r c and you will press enter this will open a file you will click on i to insert things inside this terminal you will scroll down inside the flutter.dev documentation until you find the update your path you will take the step 3 and you will copy this one and paste it it should look exactly like this good next what we will need to do is remove the path to flutter directory so we will remove this make sure that you have exactly the same thing because if you have something different it will not work go back inside your your folder go inside macbook it's the home folder you click on flutter dev flutter and you see the bin folder so this is the path we need to give the terminal inside you will write dollar home make sure that you have exactly the same slash flutter dev so you see the home folder the flutter dev flutter and bin this is the path to the file bin next you will press escape column wq exclamation point and then enter and you should come back to this screen good we have updated our path to the flutter bin folder now you will open another terminal and you will write flutter doctor and you will press enter this should load for five to ten minutes and this is to download flutter so i will just fast forward and this is what you will have at the end you see the check mark near flutter this means flutter has been installed successfully it's good we will close the terminal and we will reopen again and inside this one we'll rewrite flutter doctor and this time it will take maybe five to ten seconds to load and you will see once again if you go up you have you still have the check mark near flutter so it's mean everything works fine you can close it you have successfully installed flutter with your mac now let's talk about the oldest version of the mac mojave or isiria you will still have your terminal and inside your terminal you will write vim space dot bash underscore profile and you will press enter inside this one you will press i to insert things inside you will go back inside your documentation of flutter you will scroll down until you find the section update your path and when you have this you will take the third one so the point number three you will copy this and you will paste it inside the bash profile make sure that you have click i before to insert things then you will remove the path to flutter git directory actually we will remove everything so i will delete everything and i will just keep dollar sign path column what you need to do is you need to go in your finder inside your finder you will find your bin file that i told you you will drag and drop inside the terminal and also make sure to add the coma at the end so make sure to have something like this the user your user flutterdev flutter and bin then you will press escape semicolon column wq exclamation point enter good you should come back to this pages this means the path has been updated you will close the terminal and we will reopen the terminal so i will open the terminal and inside i will write flutter doctor here you go i will press enter and this should load flutter it will download further it might take five to ten minutes good i will just fast forward and now you will see the check mark near flutter so this mean flutter has been successfully installed i will close the terminal and we will reopen the terminal just to verify if it worked fine we will write flutter doctor another time and this time it will take maybe 5 to 10 seconds you will go up and you will find the check mark and flutter so that's that's main flutter is successfully installed that is great so we have installed flutter on our macintosh in the next video what we will do is we will install android studio see you in the next video bye what's up universe in this video we will install flutter for the mac m1 chip we will click on get started mac os inside flutter.dev website then you will find this section get the flutter sdk you will press on this big blue button and then when it when it is done you will go inside your finder and in your finder we will need to find the highest level folder of our mac to do so we can go on document and you can press command up you will now be inside your computer folder so i name my computer macbook then you will press again the command up you will take your main folder call it the name of your computer for me it is macbook and inside this one you will create a brand new folder called flutter dev perfect now what we will need to do is first clean up this file and we will take the flutter folder that we have just downloaded so the sdk and we will drag and drop it inside flutter dev good so now if you go back inside your computer folder flutter dev flutter and you will find the bin folder be sure to remember this one because we will use it later you can press command space to find the terminal and once the terminal is open you will need to write inside vim the little wave slash dot and it will be z s h r c and then you will press enter good inside this one we will press on i to insert information and the information that we will insert will be inside the documentation we will scroll down until we find the section update your path and inside this one we will take the first and we will copy it we will paste it inside our terminal and then we will modif it will modify a couple of things so we will go on the left and we will remove the path to flutter and instead what we will put is what we have inside our finder so if you remember you have your home folder so for me it is macbook for you it will be something else you will remember that flutter dev and then you have the flutter and the bin so what you will need to do is write the dollar sign so first of all we will say dollar sign home and then you will say slash and you will say flutter dev so home is your main folder for me it is macbook perfect so now we have add this export we will say escape semicolon wq exclamation point and enter good everything is done for this part next step will be to open the terminal and write flutter doctor great now you will press enter and flutter will download couple of things this may take 5 to 10 minutes when it is done you will find if you scroll a little bit up the flutter with the check green mark that's mean flutter has been successfully installed next you will close this terminal and we will just need to verify if flutter is still accessible and we will write flutter doctor once again this time it will be very fast and you will find flutter on the top with the green check mark that's good the little last thing that we need to do with the flutter m1 chip is you will need to go in finder you will need to find your applications the utilities you will go inside you will right click terminal and get info and you will need to check the open using rosetta so be sure that this is checked and you are good to go you will go inside your terminal and you will write the last command call it sudo gem install ffi and this will download everything required for the cocoa pods perfect so you will enter your password this will download a couple of things that nobody will know and now you can go on the next video to install android studio by the way this video cost over two thousand dollars so you have the choice the blue pill the red pill will you subscribe [Music] in this video we will install android studio for our mac first we need to go on flutter.dev and inside this website we will scroll down until we find the android studio section so if you scroll you will find it eventually android set android setup you will download and install android good so now we are on the website developer.android.com we will download android studio and i will say uh i will agree the terms and i will download it if you have the android version of mac m1 chip then you can download the m1 chip right now i have a mac with the end tool chip good so this has been downloaded i will click on it and i will click on the download that we just did the download may take like five minutes maybe i will just fast forward things then it will take endurance studio and it will drag and drop inside the application folder good so this is copying android studio in our applications you will see it is right there next i will close this window i will close also the internet and i will double click on android studio so it is opening and then we will say this is from the internet we will say open this will open android studio we can quit the folder and let's go this one will say ok so we will not import configuration we will do it from scratch so android studio is still loading next the data sharing i will say no and for this page will come i will say next and then you have the choice standard or custom i will use standard and then i will use the dark mode i will say next and i will finish the installation so this is downloading all the components for android studio i will fast forward and then this might ask you your password for your computer i will enter my password and i will say ok so as you can see i have the intel chip but if you have the m1 you should download with the m1 if you have the possibility i will say ok so it is currently creating and i will just say finish next we need to go on configure and preferences inside this one we will go on plugins and we will go in the search bar to write flutter we need to install the flutter plugin we will find the first one and then i will click on install i will accept the condition the second popup was to install dart also so i installed dart and now it's asking to restart the ide because we have installed flutter and dart so i will restart it we have successfully installed android studio and we have added the plugin flutter and the plugin dart on the next video we will use the emulator of android studio see you in the next one bye in this video we'll use the android studio emulator for the first time and we will accept the android licenses first you will click on create a new flutter project then you will click the first one first application and it will say next you will then go on the project name and call it by example flutter app testing now we need to have the good flutter sdk pad if it's empty for you then you will click on the three dots and you will go find the sdk pad it's on your home flutter dev flutter and you will see you have all the files inside this is the good path good next you have the project location just remember where it's saved so you click next and you have the you have to just to click finish after and this will create our first flutter project you will see the little pop-up right there i will just click on fix it if you have it just click on fix it good so now android studio is loading this android studio is a big big program so it takes time to load and it's normal then you will click on evd manager so i will click on the icon and then you will see a pop-up will appear if you have no device you will need to create a new virtual device otherwise you can just fast forward if you already have a device i will click on pixel 4 i would say next and then i will download the latest android version which is the air version maybe you will have a newer newest version that's good next i will click on accept and i will say next i will fast forward the downloading and at the end i will just click on finish when it's ready you will click on finish and you will see next to go on the next page okay so we have the android virtual device and we can modify things but everything is good we will just click on finish so we have created a new virtual device i will click on play because i want to open this if you have a pop-up like this just click ok it's not a big deal it will still work then you have the would like to access your microphone pop-up i will just say okay and then you see this is the emulator it's currently loading if your computer is not very good it may take a lot of time so we'll just fast forward again just to [Music] don't lose too much time maybe you will have the this pop-up you just click on close app and it should be good also if you have problem just try again to relaunch the emulator eventually where it will work then you will click on the play button at the top and this will launch your first flutter app so this may take a lot of time if your computer is very bad it will be long maybe five minutes so i will maybe fast forward this part to also and uh here we go we have our first slaughter app it's the very basic app that flutter gave us it's a counter app you just press on the plus sign and it count numbers i will just quit the emulator so you will see a little pop-up i will say okay no and i have quit the emulator now what we have to do is to accept the android the android studio licenses you will press on comment space and you will open the terminal inside your terminal you will write flutter doctor so this should open this should run something and you will see android studio android android tool chain this section and you will need to accept the android licenses you will copy this code and you will paste it photo doctor android licenses and you will press enter so i will just make sure that no space are allowed so make sure that it is like this i have put this on the screen how it's supposed to be written you will press enter and then they will ask you multiple question you just press y to say yes and you press enter to say okay so why enter why enter enter just to accept all the licenses and after it's done then you will write flutter doctor again and you will see you have the check mark near flutter and you will have also the green check mark just uh near android tool chain that's mean the android licenses has been accepted successfully you can quit the terminal we have launched the android emulator for the first time it is working fine we have accept the android license also bye inside this video i will show you how to install visual studio code inside your macintosh first you will go on internet and you will write visual studio code or visual code and you will click on this link good the next thing is to download it so i will click on download for mac if you have the pop-up download for mac m1 then do it and then i will click allow and this will download vs code when i say vs code is visual studio code is the same thing then i will click on vs code this will open a pop-up i will say open this is just asking if i want to open an app downloaded from the internet i will close the internet page and now you can see we have visual studio open i will close the pop-up and i will maximize the screen i will then click on open folder and i will go find my project with flutter so i will go on home which is my macbook android studio project and i will click on flutter app testing next i will click on library and i will click on main.dart you will see this pop-up the marketplace as extension click on search marketplace this will open all the extension for visual studio and then inside you will write by exam so you can just click the the tab and you can write a xt column dart and you will install dart and flutter you need to install these two extension it's important to work with flutter next we will install something else call it the awesome flutter snippet and this will be useful to make our life easier with flutter we will then download another one and this one will be the bracket pair charalyzer 2. this you click install you will see if you go back inside your main.dart file you see this is with the pair bracket colorizer and this is without and this is width you see the difference you can have all your bracket with colors so it's easier to understand flutter the next thing we will download is the material theme material icon theme so i will install this and you will see if we go back inside our files you see we have now icons before all tab after you will press on the play button and you will select start pixel this will trigger the emulator make sure that you are inside the main.dart file to press the play button you will maybe have a pop-up saying dart dev tools include right there i will just click never ask again perfect and if you have the mac m1 maybe you would not be able to to trigger the emulator and we have a solution for this on the next video on the next video we will install xcode with the simulator of apple so see you in the next one bye in this video i will show you how to install xcode and how to get your simulator to run your flutter app first you will need to go in the app store and you will go inside the search bar you will search for xcode and then you will press get and install i will fast forward but this will take maybe 10 minutes good next i press on open i will open xcode i will need to say agree the terms and condition i will enter my password the password of my computer and i will press ok this is installing components the popup of xcode will open i will close the page of the app store i will go back i will quit xcode and i will press command space and i will open the simulator because when you download xcode the simulator get download at the same time this is the simulator of apple and we will run our flutter app on this emulator you will then press command space and open visual studio code we will run our flutter app from visual studio code into the simulator so if you remember you see this little pop-up would you like to use recommended vs code i will say yes good and next you will need to press on play but make sure that you are on the main.dart to see the play button so you press on play and the application should be triggered on the emulator on the simulator so you see on the terminal all the the the line of code this mean that is running and you can see the flutter hap has been running on the simulator so we are done with the flutter installation we have installed everything required and now we are ready to start the fun part see you in the next video bye before we start this course i just want to tell you which extension you should have for your flutter project so if you are inside visual studio code you can go inside extensions and then you will find a couple of extension that you can add or search to add them i have the bracket pair color resort too which is currently deprecated but i still use it i don't really care you can download another bracket pair colorizer if you want but this one is still working i have also the awesome flutter snippet oh and just before the bracket pair colors are two the goal is to see uh the bracket so you can see this bracket is yellow this one is pink blue and like this so we can see where the bracket ends it's easier to see it that's the goal of the bracket pair keralizer colorizer so after you have the awesome flutter snippet this one will allow you to write big chunks of code faster so you will just have to write by example stateful w and this will write a big chunk of code for you i will use this in the course you have also the better comments this is this is pretty cool to write some comments with colors i use this one um then we have the let me once again i go down you should have also the material icon team this one is pretty cool because by example if we go inside the explorer you can see that we have folders with image before everything so if you don't have this you will not have like a folder with image like this okay and next one um yeah that's pretty much it so if you have those i think it's four one two three and four you should be good to go so that's it for this one and let's start the learning inside the next video bye welcome to the flutter course inside this video we will create a new flutter project oops sorry we will create a new flutter project i don't know about you but i am excited for this course let's start this this section will be the most fun section because we will learn about the basics of flutter let's start this by creating a new project if you remember on the installation we have created a flutter project but maybe you have already flutter so i just want to start from scratch inside this module we will create a new project you can see that i don't have the button create a new flutter project you can do it by yourself by clicking the button if you have it but my android version have some problem and maybe it's the same for you so i will show you how to do it with the cmd which is the comment prompt i will open the comment prompt then i will go inside my desktop i can say cd desktop like this and now i am inside my desktop if you want to go inside another folder what you can do is you can open a file explorer i will open it and then inside this one you can go by example on this c drive i will go inside user my user oops sorry this was fast i will start again i will go inside c drive my users my user and then i will go inside desktop right there so if you have a file you just take the file location and then inside the command prompt you will say cd and you drop the you you paste this like this so it's the same thing you can also use cd and to to dot like this to go back um a file prior you can see and if i do cd space and the file that i paste i am inside the desktop again that was just just a small introduction for command prompt and inside we will say flutter uh not flutter doctor but it will be flutter create because create is a function inside the flutter comment and we will say flutter create and the name of our app this one will be flutter um learn learn the basics like this make sure that you don't put space like this you really need to have the underscore good so we have create we will create a project flutter from the command prompt like this you should see like this the folder that has been created in the desktop you can create it wherever you want in your computer next step we will close this we i will close the explorer and now uh yeah that's pretty much it for this video we have created a flutter project with the terminal um yeah you can create it with your android studio if you want in the next video i will explain you what is the difference between android studio and visual code studio visual studio code see you in the next one bye welcome back in this flutter course okay right now i will explain you what is the difference between android studio and visual studio code if you already know the difference then you can move on otherwise i will just tell you like yes what is the difference and what is my preferences and which one you should use for flutter you can use both of them honestly i think android studio is more complete with flutter the thing is android studio take a lot of computer power okay that's mean if your computer is not the best computer ever it will be very hard to run the android studio and run the emulator at the same time in the other end visual studio is very light so it's very easy to run and a visual studio inside a bad computer and also visual studio have what we call extensions so if you remember in the installation we add these plugins so i will show you all plugins i have in case you you want to pause and use the same plugin like this this is the most important at the start i will go very slowly but i will continue to talk so visual studio in my opinion is better because first is very light and yeah for any computer you will be able to use this and also they have extensions like a lot of good extensions and androids you don't have them but it's your preference if you want to both of them you can code with flutter those are just like bugs where you put text to code and build something so you can use both of them in this course we would most of the time use visual studio maybe we will use android studio sometime but it's absolutely the same thing it's just to build code good so what we will do in the next video uh we will start the emulator because we need to start the emulator of our new project and we need to maybe learn a little bit about flutter because the name of this course is flutter basics see you in the next one bye welcome back to the flutter course i hope you are still excited about it let's start right away by opening android studio our new project inside this one so i will go inside open an existing android studio project even though it's a flutter project it will still work so i will bring this page right here and i will go and see user my name and then it will be desktop so this is where i saved the project i have this one flutter learn the basics so you just click on this you will see inside you have like android ios library so you just need to click on the name of the project you say ok and this will open the project inside android studio and as i told you we will use visual studio so maybe you ask why did you open the project in android studio it's because we will go on avd manager you click this button okay and then you press play that's good this is just to open the emulator so now we can close the window and we can close the android studio it was just to open the emulator that's great next we will go in explorer and i will double click on explorer can i do it okay that's good i will quit extension i will go in file i will do the same thing open folder i will go in my desktop and i will find my flutter learn the basics select folder good so we have opened the project i will put this on side and i have my emulator on the right let's make it just a little bit smaller good um so what we will do is we will go on lib you click library this is what i call it and you go on main double click on this and you press the the play button which is start debugging if you don't have the play button you can go on run and start debugging you have the same thing you can press f5 if you want also good so this is running i will just fast forward until this run and just a little tip maybe it will take it uh five minutes to load the emulator the emulator take a lot of uh computer power so if your computer is not the best one it may take a little while to open the compute the emulator and if you run it it may take another five minutes to run the app so you see the app has run because uh the computer i use have a lot of power good so we have opened the flutter project inside this video i tried to put every video like under five minutes so what we will do in the next one we will start to play around with flutter just to understand how it works so that this video was just to run the emulator see you in the next one bye hello hello hello welcome back to the course okay right now we have started the emulator in the next video in the previous video sorry and right now what we will do is yeah i think it will just i will just delete everything let's delete from the line 6 to the line 16 let's delete everything good and we cannot restart right now because we have a flutter error let me explain what happened right there we will start from absolute scratch okay so the void main mean that when you press on the play button do we have it again run we don't have it anymore i will just stop this don't stop it yourself i will do it and i will restart the app just to show you something you see when we press on this uh start debugging oh we don't have it anymore okay but whatever when we press on this i will redo it this start the main the main void so this is a function main that will trigger something and then we will say run the app and run the app what it will do it will run what have inside the run app and what is inside this is not very important because every app will will start like this and you will already have it but it's just to tell that when you press play the play will start the main the main thing and then you have the run app that will start your app and this is your app how do you create an app you just say by example s t um stl so s t okay this one so if you just write st you have stateful and stateless widget okay let's we will just start with the basics with the stateless widget i will explain you what is the difference later for now stateless widget work fine for us and we will say my app because we need to have the same name as what will be triggered this is our app it's the name of our app you can change it if you want you can say my app to but if you do it you need to change it like this like this and that's good i will put it back because you see as soon as i do it the test file don't work anymore because this is the name of the app for the test valve we should have two also to work i would put it back at my app only like this my app my app my app that's great next um we will go right away with what is important with flutter okay you have the return so you have the stateless widget that will build something and will return something the first thing you need to know with flutter is you need the main widget let's start about the main one is the material app like this material app here we go this is the first thing we need to do inside the material app we have what is called the home i will go straight away because we try to do it under five minute and i will explain you everything right after we have the home and we have the scaffold inside and only like this we can start an app i will restart my app and i will explain you while it's running what everything mean so flutter is widget inside widget inside widget inside widget it's like a flow of widget and a widget start with a capital letter most of the time okay and every widget have inside what we call arguments and home is an argument so if i press enter and i press command if i press control space i think on mac is common space you will have all the suggestion this is all the suggestion for actual arguments that can be inside the material app widget okay i i will i will make more focus on this in the next video because it's super important that you understand but for now what we have created with the material app and the scaffold this has created a white page and the scaffold is the skeleton of the app this is what we have on this video we will go straight away on the next video and i will show you what arguments you can put inside the scaffold to create an application so see you on the next video bye in this video we will learn a little bit more about the scaffold widget and the material widget these two are the most important widget to build an app these two are the skeleton of an application okay the material app is a little bit more complex so we will talk about it a little bit a little bit later inside this course but the scaffold widget is like one of the most important one okay this is the skeleton of an application and you can see this is like the scaffold is the white screen right now and we will build up from this now let's think about what is an application usually we have a bar on the top where we have a title we have things inside the middle and we have a bar at the bottom also to change pages this is a typical application so to do this we need to go inside the scaffold and add some code okay the thing is you need to remember with flutter this is super super important okay flutter work with widgets it's widget over widget over widget okay this is the most important thing you need to understand the second most important thing you need to understand is every widget have what we call inside arguments i have told you this previous video and when you use an argument let's say any any of these argument you need to add another widget inside that's it so you put a widget which call which which start with a capital letter you put a widget you put an argument from this widget and then you start again you put another widget with a capital letter and you continue like this and it's over with jet over with jet over jet that would be an application so remember we just start with a capital letter an argument start with a lowercase letter okay good first let's start with the a bar the first bar on the top so if i click control space to find all the arguments you see one of these is app bar so the app bar is what is on the top and next if you go over if you go by example try to find a widget we just start with a capital letter important we will say app bar let's say this oh we have one widget call it a bar we will select the one with the the comma is it comma the parenthesis the bracket sorry so we will select the one with the bracket i click on it and if i just press the auto reload you see boom we have an app bar easy as this we have just added a nap bar argument and the app bar widget and this have created the a bar and you can see that app bar we start with a capital letter because it's a widget and you have the bracket after to tell flutter that this is what we want and even inside this app bar we can add more stuff by example what could we have let's find all the arguments so you will find one call it title is it perfect yes let's find title and now you can see by example if you go over title you see this take another widget inside so super important that you understand that flutter is widget over widget every widget have arguments inside and when you have an argument you need to put another widget okay so we need a widget what is the title title is a text i will say so let's find a widget called text we just start with a capital letter remember we have one it's called text so if i click text i have one with the bracket if you don't have it it's not a big deal because you can add yourself the bracket which is good and then if we go over the widget you can see that this by example if i press ctrl space inside text nothing really happen no arguments are available so that's mean we go over widget and we see text okay text take inside the first thing is a string data so we take a string what is a string is just plain text so what we will do is we will use the comma like this and we will say by example app title this is string and i will uh reload again with the the light bulb the light and you see up title we have the title of the app so that was it for this video what we have created is we have created a nap bar with the title and we have learned about widget and arguments this is the most important thing you need to remember widgets start with the capital letter argument with a lowercase letter that's it for this one see you in the next video and bye welcome back inside this video we will remove the debug banner right there on the corner because it's disgusting okay how first i just want to mention something that i forget in the previous video maybe you ask yourself how did you know that the abbar is what is on the top it's a good question so let's say i remove it you don't have to do it i would just explain if you go over app bar and magically you click on this little arrow so you can you can use your keyboard to switch which place you are and if you click on the arrow and i go down you'll see you have a little description it's an app bar to display at the top of the scaffold that's perfect you have the description and you have the description for every place so this one will be the primary content of the scaffold okay what is the primary content of the scaffold we will find out in next video but for now let's try to remove the debug banner okay that's a good question but how do we do it let's find out so i will go on this is how i will usually find a way to remove stuff okay by example if you want to remove the debug banner what can you do you can save flutter debug so what is how is it called it it's called debug so you don't know it's a banner you will say flutter debug then you have the first suggestion banner okay seems good how can i remove this sorry maybe i was fast i just click on the first one stack overflow and then if you scroll down you will find the debug banner will also automatically be removed on release build that's cool but you can see a lot of answer from this message saying that material app debug show chicken mode banner false perfect let's do this i'll put this back so material app if you go inside you have all the arguments if you press ctrl space and what it was it was banner debug show checking mode banner and then you need to put this as false like this and if i uh reload oops i will just copy this i will control z to put it back the app bar that's good and i will put back the debug show check and mode banner and now we don't have it anymore so this is how you find solution inside your flutter app you need to create something you don't know how you will find you will go on internet and you will try to find it by yourself so i could have just tell you that it was a debug checking mode banner but i just want to be sure that at the end of this course you are able to do everything by yourself so to create an app so on the next video what we will do is we will try to put content inside the middle of this app so see you on the next video bye welcome back in the flutter course inside this video we will learn how to put content inside the middle of our app let's do this first thing first we have the scaffold which is a widget the app bar that is this section and we have something called the body and if you go in the description it's the primary content of the scaffold this is how i know it's this information inside the body what the body take is a widget perfect so we will put a widget inside which widget do you do we know we know the text widget so maybe we could just say text and use the text widget inside what if you remember what is inside the text widget is a string if you go over you see the text take the first thing as a string so we will put a string you put the comma to show a string and we will say body because this is the body we will at reload and now you see we have a body that's cool we have information in the center of the app it's not in the center center but it's inside what we call this section you see the mouse this section is the body but automatically flutter will place the information at the top left corner okay that's good what else can we do inside this um video we have created this the body um i think i think we will keep it like this because this video will be very short it will be just about the body that's good in the next video we will keep learning a little bit more about how to structure our flutter app inside the scaffold see you in the next one bye in this video i will show you how to add the bottom bar right there okay let's do this right now be ready i think this is a little bit longer than usual let's try this first you need to go inside this scaffold inside the scaffold we have the hub bar that we have the upbar widget finish finishing with the coma we have the body argument that give the text which is a widget finishing with the com also and you need to put another argument so you need to be sure to separate every argument linked with widget separate with a comma we will go inside this and we have the second one call it bottom navigation bar seems great a bottom navigation bar to display at the bottom of the scaffold that is magnificent if we go over this we can see that this required a bottom navigation bar with the capital letter because it's a widget and we will take this one bottom navigation bar that's great if i put the hot reload nothing happened okay this is why because why maybe because if we go inside you can see that we have nothing inside the bottom up bar so we have in the bottom bar a key color elevation shape clip margin child okay uh sorry i don't think i have used a good one yeah it's bottom navigation bar and i used the bottom up bar sorry about that bottom navigation bar that's great now we have an error saying the name parameter items is required good if you want to know the error you just go over the thing and you will see the error so we need item if we go inside but navigation bar we press control space we have all the arguments the first one is the items that's wonderful we take this one and now if we refresh you see up we have some error failed assertion line blah blah blah items that lands need to be bigger than two so that's mean we need more than two items inside our item list that's great i will quit this and i will just continue the app because now we have a bug so we have the red screen how to solve this we need items inside the items you can see the same error right there items.length is bigger or equal at two so we go over items and we see that this take a list of bottom navigation bar items i will copy this one i will go inside and this is a list okay a list in flutter is called by using square brackets easy as this i will go inside and i will paste the widget that we we need because as you can see it take a list of bottom navigation bar them which this is also a widget because it starts with a capital letter bottom navigation bar item and this need to use the bracket perfect i will put uh we see we have another error then i'm the name parameter icons is required that's good we need we need icon let's say icon and what does icon take if we go over we can see that icon is a widget that's great do we have a widget colored icon hmm that's a good question let's find out icon and we have one that's magnificent let's click on this one and what does icon take inside icon take inside an icon data okay good this one is a little bit more tricky but i can tell you that a nikon data if i if i press icons with the s you see that icons is supposed to be a nikon data where can we see this um i don't think they show it but it's just because i know it so i tell you right now icon take icons dot something i will say home great now we don't have error anymore but we need two of them we need two items inside the bottom navigation bar so you see this is a little bit more complex right now we you have some challenge and you cannot just put the second like this because you see if we go over const lateral as parameter blah blah just expect to find the comma we need to separate both of them with the comma we need to separate items inside the list with coma if i uh reload we have another error i will play and we will see the error right there is item label is not equal to null so we need to have something in the label where's the label let's go inside bottom navigation bar item i will press ctrl space or comment space and we have label that's great if we go over label you see this take a string we know how to put a string it's with the comma and you say by example home because we use the home icon we will copy this item this label sorry and we will paste it for the second navigation bar time also and now we can we will change this one for something else maybe settings and we will change the icon for settings is yeah we have it that's perfect i will save on the next one i think i will explain a little bit more about icon it's just because it happened that we absolutely need it so i will use it and now when you add reload you see we have the uh two button that's great we have something at least but now you can see the little uh blue line everywhere we will solve this in the next video so see you on the next one bye hello hello inside this one i will just show you how to remove the blue line so if we go over any of these it will say prefer const with constant okay that's mean you need to put const to put this as a constant so i will copy this and i will paste it before everything now you see this one take the same thing so we can put it before bottom navigation bar but nothing will happen that's mean we need to put it before the list because the list will be the constant so this is a constant it will never change and just like this you have removed the blue line that's it for this one in the next video i will just explain a little bit more about the icon how did i know that we need to put icons with the s that home like how did i know that see you in the next one bye welcome back okay so i told you that i will show you how did i learn about icon so let's do this right now i will open another browser google.com here you go and then what will be by example how did i know this i will say flutter icon and just like this let's search about it icon class we will go on the first link will it work not sure but let's find out um yeah if you go down you will find some documentation and you can see children cons widget icon and you see the first thing is icons dot favorite then you can put other things inside like color argument you can have the size argument simontec libel but this is how i knew it you just need to make a little google search and you will find it right away so you can say als also flutter how to use icon and this is what i want to show you inside this course i want to show you how you can solve your problem by yourself because you don't want to be stuck when you try to build an app let's go on this one i think it's the same yet it's the same so let's find another one maybe medium.com is pretty good also if we scroll down you will maybe find somewhere the code uh please just give give us the code yep icon what is this i don't know this person is maybe uh somewhere else okay so whatever i think we have something great how to use custom no not custom icons yeah this this one was good we have it so i will just copy this one boom copy this please and thank you so you can just go inside your icon where it is right there boom you paste it that's it you just copy and paste code and now if we add reload you will see it's a hearth because i think it's the favorite icon yep and you have the color pink and you have the size and semantic label so i will remove um yeah i think it will remove all of these but you see this is how you find stuff how to build stuff with flutter you just make some search on google and that's it i will change this one for something else like dot home i will put it back and that's how i knew that you need to put icons.com see you on the next video bye in this video i will show you how to use the format document i'm sure you wonder like how sometime i just like move columns like this and structure the document easy as this okay i use a comment on my keyboard it's called format document shift alt f okay and you can use it only when you put by example a comma between two uh bracket and now i can use it it's a shift alt f if you want to find it on mac you will find somewhere something called format document with the comment near so you can see if i remove the comma on this and i do it again this bracket should go right after like this boom you see it go right after it's just to structure document and see it better so when you see two bracket without comma try to put a comma between and format document when i when you see that like my code moving it's because i use format document where else can we use it let's say like at the end we have multiple bracket if i remove them all and i do format document you see all the bracket go collide together so that's why i usually put a comma at the end of every bracket so that's pretty much it for the format document if you see me moving code like crazy uh like like this i'm it's just because i use the keyboard shortcut called format document that's it for this one see you tomorrow see you on the next video uh that's it bye in this video you will learn how to put the body in the center that's very easy it will be a short video let's find the body it is right there we have the text what you can do is you can right click you can say refactor and then inside you will have wrap with center easy as this boom so what this creates it creates a center widget which inside you have the child and you have the text inside so the center is the widget because it's a capital letter inside you have the child which is an argument and usually when you have an argument called child is just to put something else inside the widget and this something else is the text widget and now we have the blue bar it's because we need to put a cons before and you see we have we still have the blue bar because we need to avoid two times the con the console that's good now you see we have to to bracket put the comma uh yeah put the command then here we go we have the uh format document we will auto reload and we have the body in the center that's it for this one see you in the next video in this video i will talk about the refactor so we just did it in the previous video but i want to redo it because i want to create a video about it only in this in this way you will be able to find the refactor video easily when you come back if if you need to find it again so what we did we used the refactor to create a center widget so this have wrapped the text widget with the center if you click on it you can do something else cool called refactor and you can say remove this widget boom flutter will handle everything for you and it will remove this center widget you just need to put back the const and you can ut reload this will put back the text at the top left corner let's do it again try it by yourself first pause this video and try to refactor the text widget with the center widget i will do it with you right now because you should have pause refactor you just right click you say refactor or control shift air and then you wrap with the center but i will use something different this time i will say wrap with a widget so this means you can wrap with anything and then obviously we will use the widget call it center that's it so it's the same thing that we have done but by using the wrap with a widget so this is what we call the refactor i will put my comma between two parentheses bracket and i will format document i will make sure to put my cons before the center and that's it so this video was about the refactor and now you have it inside your library and you can find the video easily that's it for this one see you on the next video bye in this video you will learn how to create a flutter button let's start this right now we will replace inside the center widget which have the child argument we will replace the text for a button let's do this first i will write with the capital letter button and you have multiple choice okay you will need to remember that four buttons there is three type of button within flutter the text button the outline and button and the elevated button easy as this this these are the three main buttons with flutter okay so we will use the most common call it the elevated elevated button like this that's good next we need the on press if i go on on press this say it need a function to create an empty function with nothing inside you just use the bracket and the curly bracket just like this oh and you can see and valiant constant that's mean we need to remove the const before the center that's it and next we need a child if you remember a child is only what will be inside the first widget we have the elevated button and then we have the child and the child argument mean which widget you can see right there which widget will be inside the elevated button so we will use a widget called that we have already used the text widget i will put my my bracket i will add this and i will put maybe a click like this simple now if you press ctrl s this will trigger the auth reload actually yeah it will trigger the attribute load it will save and ut reload so you don't need to click this every time just save now when we click on it nothing happened but we have a button and we still have the blue thing so i will remove this by saying const and you can see that the code is very long within the same line this is probably because we have two brackets like this i will format document so you can see format document you already know about this and that's it we have created a flutter button in the next video we will learn how to trigger something inside a function that's it for this one see you in the next one bye in this video you will learn how to use the flutter print let's start this right now okay so you have your application you have your button and this is the empty function good after this you have if you look down you have the terminal the problems output and debug console if you don't see the terminal let's say i quit it i closed this you can open it again by saying terminal new terminal that's it and now you see i have two open i will kill the second one good we have the box open and now we will go inside we don't need it right now but we will need it after so to use the print function inside flutter you go inside the on press the second the inside the curly bracket you say print with the lowercase letter you put the semicolon and you just would watch why you have an error it say oops it say avoid print call in production code okay that's good uh print a string representation okay so a string we know how to use string it's like this and we say by example print something good just to see if the the empty function or the on press function work we will ut reload and now i will click on click and you see if we go inside the debug console you have the print something let's try again i will click the clear console nothing is inside and now when i click on click here we go we have the print something that's mean when we press on the button this trigger the elevated button on press and this print something inside the debug console so that's cool on the next video we'll try to print to do something else inside the unpress function but for now we have print something which is cool see you on the next video bye in this video i will show you how to create a variable okay maybe you wonder why we will create a variable because inside you see the button elevated button from flutter you have the click in the next video what we will do is when we press on this button we want to change the text inside first we need to create a variable for our text i will cut click with the quotation mark and i will go by example i will go just right there and i will create a string variable called by example button name is equal to click now we have an error saying okay expected to find the semicolon so we put semicolon and it's good i will format document and now we have another error if we go over my app we can see that try making all of the field final or removing the keyword const oops i will go over again remove the const okay so if we remove the cons here we go now we have another error right there the constructor being called isn't a const so that's perfect let's remove this one also seems good now if we go down we are missing the text and the text is name it oops i will change this you will name usually your variable like a lowercase letter and capital letter for each words after so we'll copy this bottom name and we will paste it inside text that's good if we go over we still have another error saying evaluation of this constant expression throw an exception and this is because the text is no more a constant because the bottom name can change it's a variable so now we are good but you can see that in the test file we have an error if we go inside we can see that my app with the const it's not it's no more a constant so i will remove this one also now we can uh reload and when we ut reload you see we have an error and this is because we change it inside the my app we change at the value const and when we have like error like this we just need to restart everything like this i just restart instead and now it worked fine so nothing have changed in inside this one but we have created a variable called bottom name and in the next video what we'll do is we will change the value of the button click for something else with the variable so we will change the name of the variable that's it for this video see you in the next one bye are you ready to change the value of the text when we click on the button and this is what we will do inside this one let's start right now first thing first we have the button elevated button we have the on press which trigger a function and inside when we press on it you see it's called the print something we will replace this and what we will try to do is change the value of the bottom name to change the value you can say bottom name like this and you will see this is equal to something else and because the bottom name is a string it needs to be equal to a string it cannot be equal to a number after that you need to stay the same type so we will say click it by example maybe click it i think it's good and if you remember we need to put the semi column if you are not sure about it you just go over expect to find semicolon that's good um now i will reload and if we click on this normally it's supposed to work but it does not work why because in inflator you see the stateless widget and the state fall widget are very different the stateless widget mean the screen will never change but if we use the state full widget that's mean that if the user do something on the screen and the screen change by example the the name of the button change we need to use the state full widget i will go over stateless widget i will right click and save refactor we already know about this and i will say convert to state full widget okay that seems good next it should work so i will just reload again and now you see we have some errors okay and maybe you okay i will just go inside the run and debug i'm not sure if i show i show it this to you if you uh reload maybe you have this error like this okay popping up from the framework that dart i will quit this you can click on on play debug and remove the uncut exception i don't personally i don't like that i will go back inside my file and now if you add reload you don't have the error anymore but we still have it in the terminal the debug console i will restart the app this time and you see we still have an error what is the problem is type my app is not a substring of type stateless widget and type cast okay so what does this mean is we have my app which is a stateful widget and i will i will restart again just to be sure okay and you see now it work sometime you restart and it will not work and the second time it worked it happened sometime now everything is fine good but when we press on this nothing nothing changed still so we have a problem we see that the bottom name change for something else for click head but we don't see the difference on the screen this is because we need to tell flutter okay we are inside the stateful widget it's possible that the screen change but we need to tell flutter the screen will change and to do that we go on unpress function and we will use something called the set state you can click on this and this will let no flutter that the screen will change and what are the information that change on the screen we take it and we put it inside the set state i will format document so you see the bottom name will change and we let no flutter that the screen will refresh with the new information now if we add reload you see it automatically go to click it this means the auto reload is just refreshing the screen and that's why because we already click it on the button previously i will restart now okay let's make it simple i restart we have the click when we press on this it change for click head that's good so everything work and this was because we needed to add the stateful widget the set state and that's pretty much it and change the bottom name variable so in this video we have learned about state less widget and state full widget though the first one stateless widget the screen will never change stay full with jet the screen will change and to let no further that the screen will change we need to use set state so that's it for this video and see you on the next one bye okay i hope you are still excited about this course i hope you are excited to learn about flutter and create mobile apps because i am excited to create this course first inside this video what we will do is we will play with the bottom navigation bar okay you can see right now when we press on icons nothing happen and we need to change this so we have learned how to use function previously we have learned also how to set state how to use the stateful widget stateless widget and we will try to change the bottom navigation bar let me show you how it works you will go inside the bottom navigation bar we have the items okay we have the bottom navigation bar the items which is a list of constant and this end with the comadian and after the comma you can press control space if you still and just to be sure that you understand if you don't put the comma and you press control space it still work but you will have an error because you need the comma okay so i will put a comma back and i will say control space we need to find something to change the color or change the value so if we go background color current index what is this the index into items for the current active bottom navigation bar item so the current active that's perfect let's use current index let's say we use one instead and now i will just uh uh reload boom you see the icon is the next one and if we use zero and we add reload it should be the first one i will uh reload again just to be sure you see it does not work so what happened we might have a problem so when you when you change things so fast sometimes the uh the visual code don't understand that you have changed it so i will put i will put i will delete and then i will rewrite zero and oops i will rewrite zero and i will add reload so you see now the program understand you change it good so you have understand that if we start at zero it work for the first one at one is the second thing if we put two by example what happened um is it the same problem so instead of redoing i will just click on restart and you see nothing nothing happened okay that's weird because the second item is none of none of these so it's mean this doesn't show error which is good but we will work with the zero and the one the goal is to change the index when we press on it let's find another argument inside the bottom navigation bar so you see we are still inside the bottom navigation bar let's find another item another argument sorry and let's say we have the untapped when we tap on it and that's pretty much it so we will find the untapped and i will click on it i will create an empty function and now you see we have a problem with the empty function let's go over on tap function int okay so the function return us a int variable that's mean inside right there flutter will return us something it's a int and the end we will call it by example the index you see we don't have error anymore because the on tap will return us which index we have clicked on and now i will go inside the function and i will say by example um yeah first first thing first we will need to have a variable index let's do the same thing we did with bottom name outmit but this time the index is a int which means a number okay int is a number but like one two three four five like this if you have a number like 1.2 this is called a double okay but you will understand with time so let's use end and i will say um the current index this is equal to zero when we start and we have a little problem and try changing the name of an existing class so int is you said like this if i remember yeah it's not a capital letter like string it's a lowercase letter perfect we have the current index that we will use instead of the current index zero we will paste this and when we tap we need to change the current index but if you remember if you want to refresh the screen you need to use this set state to let no flutter that you want to refresh the screen and then you can say current index is equal to this index because when we tap on it flutter will return us an index on which we have tapped and i will say index and oops yeah i will put my semicolon at the end because if you go over you will see expect expect to find a semicolon i will format document i will ut reload everything and now when we press on the icon the page change or the icon change in consequence it's already have been more than five minutes so we will finish this video like this and see you on the next one bye in this video i will show you how to add another button under the first one okay it seems simple right now because you just want to add another button we can go on the button and where it is elevated button i will copy this it seems simple but where do you put it because in the center we have a child and the child only take one thing if you try to put it after it don't work we have an error because it's not a list of child how do we create a list of child first you need to know do you want to put the button on the vertical or on the horizontal let's start by doing vertical to put to put multiple thing on vertical we need to use we just call it the column okay so let's use a widget call it column we can create the widget like this so you can just watch you don't need to do it right now you can say column and then you open the bracket oops column you open the bracket and then you put the children inside and inside you will put the elevated button okay this is one way to do it and children is the same thing as child but it's mean it will be a list of child good there is a way of doing it even simpler i will go back and do you remember when we do refactor you click on elevated button refactor wrap with column that's it this flutter will automatically put the children the list and will put the widget inside the list and now you can add the other button just under i will format document and if we add reload here we go we have a list of two buttons we have two button one over the other and because we still are under five minute i'm gonna show you something with the column you see right now the column is not in the middle that's not very cool so how do we put the the two widgets inside the middle i will go on column and i will go inside the arguments i will press control space and now you have the main access alignment and we will press on this one let's go over main access alignment this doesn't take only a widget but it take a main access alignment widget so we'll copy this one we will paste it and now we will replace start by another thing so we'll say dot and we'll use center by example let's auto reload boom magic so the main access alignment so the column is vertical main axis alignment mean the main axis of the column like this so this will be the position in the center instead of the start if if we put the end it should go at the bottom like this perfect and now i want to show you another one because we have the main axis maybe we have the other axis what will it be called let's go in the in the arguments we have something called the cross access alignment if we go over you see that this take a cross access alignment dot center so i paste this and instead of center we'll use something else i will use we have three choice and oh we have four choice five okay let's use instead the start and if i save oh nothing happened so if i uh reload nothing happen if i restart nothing happen also okay if we put end what happened i think nothing will happen also okay this is because the column the maximum size of the column is uh it's hard to to draw but this is the column right now okay this is the column and it is currently at the end because the size of the column is only like this we will need to make sure that the column take all the screen width okay and i think i will show you how to do this in the next video okay in the next video we will make sure that the column take all the width possible and in this case the cross access alignment dot end will make sure that the button go at the end see you on the next video bye welcome back inside this video we will make sure that our two buttons go at the end as we try to do with the cross access alignment dot end okay we will try to do this for this we will use a widget called the sized box so we need to wrap the column widget with a widget called size that box try to do it by yourself and pause otherwise we will do it together right now if you remember we can right click and refactor oops sorry i'll do it slowly you can right click okay and refactor and you have old widget you see we have one wrap with size that box if the widget name is not right there you can use wrap with a widget and use the widget name after so we'll click on sizes box simple as that if i add reload you will see nothing change this is because the size that bugs need to have a size so we will go inside and we will use an argument called where i would press control space you see we have the height the key and the width so the width seems perfect for us if we give the width by example i don't know 200 and we ought to reload oh do you see how this change so let's put the width at 400 this time this means all the width of the size that box is at 400 right now so at the end it will be it will go at the end but what happened if you put like 500 or if you put like seven on seven nine nine nine nothing happened but sometime some error can occur and maybe the user will have a screen with i don't know one thousand of with so how do you know what is the maximum width how could you be able to just say go to the max width yes you can and we will do it in the next video this is what i will show you see you in the next one bye this video will be super fast because we will learn how to use the max width inside the sized box and it's very simple first you will use double i don't know if you remember but i said in the course that you can use int for the for numbers like 0 1 2 so big big numbers but if you want numbers with the dot like 2.3 or 2.4 you need to use something called double okay so we will use first double and then we will say dot and we have multiple choice the the one we search is infinity and just by saying double that infinity this will make sure to take as much width as possible inside the app so just like this it will do it and what we will do also is the cross access alignment we will put it at center again we will put the main axis alignment oh sorry we will put it at start okay start and we will put the main axis alignment at center so if we do this it should be uh okay i will reload sorry yeah exactly it's right there because the width is all the screen now we can use the cross axis alignment and the main axis so the column is like this the main axis alignment follow the column the cross access alignment go the the other way of the column okay so main access alignment is in the center that's perfect cross access element is at start that's why the two widgets are in this location so that's it for this one we have learned to use the double that infinity and that's mean take as much place as possible see you in the next video bye in this video we will learn the row widget last couple video we learned about the column widget and this time we will learn about the raw widget it's the same thing but instead of being vertical it is horizontal let's do it right now by changing column with row simple as that i will add reload and now you see it is vertical one button after the other cool and what happened is both of them are in the center and you can see the main axis alignment because the row is horizontal like this and the main axis alignment of the row is like this and you can see it it is on the center which is perfect okay but the cross access alignment is said to be is set to be at start so the cross access element will be like this and it should be on the top but it is not why because right now we use the center widget which put the size that box and the row at the center okay but the size that box don't have a certain height so if we do if we give a certain height and we use the same logic double dot infinity and we add reload boom you see the row is now at start because the size that box now take all the remaining place before it was taking only the wit plays so let's put it back and um yeah i think it's pretty much it if we were my voice cracked uh if we remove the the first main and i uh reload you see it is at the start so everything seems fine i will remove this one also and i save boom it's go in the center left y let's find out if we go over row you see the main axis alignment is that it is set at start if we do nothing and the cross axis alignment is set as center so that is why it is like this if we put nothing inside so let's put both of them and let's put them at center and i will format document that's magnificent we have learned about the raw widget and in the next video we will continue to learn the flutter basics see you in the next video bye in this video i want to show you how to edit the style of a button let's start this inside the elevated button we can add other arguments if i press ctrl space we have multiple arguments we have one called style that's awesome next what you need to do is if you go over style it need a button style okay this is not easy but i will show you the answer and you will just have like to remember this section if you take a style the style is very easy to to say okay you recall the name of the widget and then you say dot and you say style from easy as that okay this is how you put a style it was not easy because if you go over it's a button style which doesn't mean that much but you just have to say evented button dot style from good next inside this we have multiple thing one of them should be like color oh and we don't so let's find what could be the color if we go down we will see on primary and we see this is a color variable if we click on it it's a color so that's perfect let's use on primary how do we use on primary so we need to put a color okay good let's do this how to use a color we will say color and if you put the s dot boom you have all possible colors okay easy as this and we will put maybe the red color i will ctrl s and if you add reload oh you see the on primary mean the color of the text let's find something else we have the primary this time and if we say colors dot our range okay maybe i was a little bit fast on this one you use the primary argument you see colors dot orange good and now i will save boom the button is arranged so the primary is the color of the button and the on primary is the is the color of the text let's put this one as white maybe it look better good so we have learned how to edit the style of a button you have multiple more arguments that you can use to change the size the anything of inside the button but there is so much to learn with flutter that i just want to show you the basics inside this section of the course good so in this video it was very fast we just learned how to change a style of a button that's it for this one and see you on the next video bye hello hello hello hello welcome back to the course i hope you are still enjoying the course and you want to learn more about flutter this is all the basics with flutter okay so in this one we will talk about the container widget ready we will change the size that box for what we call the container good the container and the sized box is very similar but the container have a little bit more arguments okay so you see if we keep it like this flutter is telling us sized bugs for white space so e flutter tell us it would be better in this case to put the size that box but if we're using the color okay the color arguments do you remember how to use colors you use the capital letter you say colors with the s dot and you put the color you will want to have let's say we use red and if i save which when i when i save it's ctrl s it's the same thing as a reload boom you see the color red behind this is the container all the red space is the container and now let's remove the height and save this is the container this is how flutter understand the container and if we remove the width you will see this will be up this is still the container so i will reload i would also restart the app just to be sure okay so you see the container even though we don't put the width flutter understand that the the width of the container is all the space this is because we use the row inside if we change this for the column okay this mean flutter will put the red thing in the vertical this time exactly okay so i will put back the row like it was now you have learned i will put back also the width and the height and now you have learned about the container widget you can do more with the container by example you can put some decoration if you want to have like border rounded border corner but this is a little bit more advanced right now i just want to show you the basics with flutter okay so that's it for this video and i see you in the next one bye hello hello inside this video what we will do is we will learn about conditions what does this mean right now you see when we are on home or when we are on setting both give us the same page but can we put a condition saying if we are on home then display maybe a wide screen but and if we are on settings then display this screen how will you do it if you can try if you think you can find the way to do it otherwise i will show you right now how to do this there is a multiple way of doing it but we will try to find the most easiest way to do it let's try first thing first you see we have the row okay i will go a little bit up we have the body the body have a center and the center have a container what we can do is we can say if i go before i will say do you remember what drive which one we use it is a variable called current index good so we will go just before container we will put the current index so if we and now it's where we will put the condition the current index equal equal to zero if it's the case then put container okay this is what it means current index equals zero and you need to put two equal if you put only one then this is just setting the variable setting current index is now equal to this but if you put two equal this mean does if this is equal to zero it's a condition that we create then put the container otherwise if we go at the end of the container you can click on the bracket and you will see where it end you see right there it end right here and you can put the the column and this is the condition so if i will go back if this is true then put the container otherwise after the the column otherwise then put maybe something empty and something in t would be a sized box sized box we have already learned about this one and this is asking to put a const so put accounts before i will format document you know how to do this and now if we restart the app is it working i will restart again the app oh yeah it's perfect it's just because if we are on the first one it will display the container otherwise it will display nothing so we have to screen right now and we have created a condition this was the goal of this video um yeah so that's pretty much it in the next video we'll continue to work about the basics of flutter see you in the next one bye in this video i want to show you how to add image inside your app because pretty much every app have some image inside so let's do this first we will go inside the other page so this settings is where we have the size that box we will replace this by what we call an image dot network good and image that so just before we have three options we have the image dot we have four option we have the image asset file memory network network would be an image from the internet and the src is just the source of the image so the url let me show you so we have google and i search about borealis now you will click on an image you will right click and you will say open image in a new tab good now you see this image have a dot gpg that's perfect but let's let's see take another image maybe this one and i will say open in a new tab i still have it that's good i will say open in a new tab okay so you see this one this one have a super weird url and the end is not finishing with uh can i see the end it's not really possible yeah the end is not finishing with a png gpg or something it's like very weird things okay i think this is like infinite or something i never saw this in my life but whatever okay yeah perfect the end is not finishing by gpg or jpeg or any normal size okay if it's not finishing by something like this this try just to find another image that end with a jpeg or png so you copy this okay and then you will go inside your your quotation mark it's important that you put quotation mark and you paste the image url i will put the uh reload and here you go you have your image inside your app this is super super easy to do okay and yeah this was the image network in the next video i will show you how to add an image but not from the internet i will show you how to add the image inside the code and how to use this image inside flutter so see you on the next video bye hello hello welcome back and inside this video i will show you how to add an image inside your project flutter and then we will use this image to display on the screen ready first thing first you will need to create a new folder for this you can go at the bottom you can click at the bottom or you can maybe we can click there no okay so let's go at the bottom and right click and say new folder and this one will call it images okay with a lowercase letter and that's wonderful next thing that we want to do is to add an image inside this so i will take an image from my desktop and i will paste i will just drag and drop inside this easy okay you can do the same thing next we need to put this image inside what we call the pubspect.young let's double click on this and let's discover this wonderful file if you scroll down you will find a section where it's called email assets image and this okay what you will do is you will go just before the a of the asset and you will delete twice one two it's it need to be exactly like this okay because if you have one space uh like this it will not work okay make sure to delete twice then what you will do is you will press right after the hashtag you will click to the right once and you will delete twice one two magnificent next thing you need to do is you will remove this and you will just keep image like this this telephoto that inside our assets of the of the project we have a folder called image okay and we have one called image and you then then you put the slash that's mean every image that will be inside this folder will be accessible with slaughter okay next thing you need to do i will move this you need to press this little arrow get packages so you click on this if you use android studio you can do the same thing but with a comment if you go inside your terminal you can say so this is the same thing clicking on on the arrow or clicking or writing flutter pub get it's absolutely the same thing good it will refresh inside the flutter project this file the prospect.com i will i will close this and i will close galaxy also now we can remove what we have with the network i will delete this i will move this and you can use instead the asset okay it's the same logic you put the quotation mark first but instead of being the name of the source it will be the name of the location of this so you need to say image because we go inside the image folder slash i will write galaxy dot gpg because it's the name of my file but you will put the name of your file good and now if we restart the app you will see that if we go inside settings it work that's magnificent but if you have a problem okay because this can happen sometime when you add new file and you add new image you may maybe you will have a problem saying the image is not accessible what you will need to do is close the application and relaunch the application and then it will work okay because sometime it can happen so the application will just relaunch and i will fast forward good the application has a relaunch and we have the galaxy image that is from our flutter project that's it for this video and i see you on the next one bye right now we are on flutter.dev and i want to show you something that you should know that exists first on flutter.dev you will go on dog okay click on dock and you will find a section widget catalog if you click on it you will find multiple place where you can find more widgets okay if you click on basics this is most of the widget that we have learned inside the first section of the course you see we have the app bar we have used this one the column is to put two widget one over the other we have the container that we have learned about this one also the elevated button the flutter logo is super boring it's just an image of flutter we have the icons we have use icons the image is network and asset we have just saw this placeholder is super boring if we go over it we can see uh what it is about it's just a placeholder so you will just have a box of empty stuff it's super useless not useless but i mean for now it's not useful then we have the row we have c about this one the text also and the scaffold so that's good let's cover a lot of basics but the thing is we need to learn a little bit more i think okay because right now if we go back inside our app so where is the application oops go back like this you see if we go on home or we go on settings we still are not able to navigate through pages let's say by example this button click change for go on the second page if you click on it you should be able to navigate through another page and in every page every apps you are able to navigate through other pages so inside the basics of lettering of this course we will also learn how to navigate through pages because i honestly think it's one of the most basic thing to know so in the further video we will learn about this and it will pretty much complete the introduction of flutter basics so that's it for this video i just wanted to show you that you have access to the documentation which is the flutter catalog okay and the catalog it is right there and you can click you can search if you want to to learn more about widgets by example if you click on this one you have asset bundle raw image and if you go on input by example i think we will add this in the flutter basics because this is kind of important not sure yet um otherwise we will do it in floor advance we have the form field this is to put something on the screen so by example the search bar the person can put something in the search bar and search something so it's kind of useful for an application so this was the widget catalog we can close this and i see you on the next video bye okay so in this video you will see that the application have changed and this is because the next video you will see is a little bit confusing okay and i understand this so i created a new video that will have better explanation so if you watch this one it will be easier to understand how the concept of the next video will work okay so let's start right now the concept of the video is about navigation so how do we change page into a flutter app and right now you can see that what i have created is a very very simple app with the material app the scaffold the app bar the body we have a center and an elevated button so you can see we have the ab bar the body and the button in the middle it's very simple and now the the goal our goal is to navigate to a different screen so what we will do is we will create another state less widget so actually at this point you should know everything that is inside this code okay we have see all the concept about material apps scaffold app bar and everything so what we will do is we will create a new stateless widget i will go down and i will say state less widget this one and i press enter so now we can change the name of the class we can say a second page by example and that's perfect so i will save and the next thing we need to do is to navigate how do we do this first we need to create our navigator dot of context and at this point maybe you are a little bit confused about what is the context but keep keep uh keep watching i will explain what what is the concept at the end of this video okay so uh we can see after dot push okay and push the goal of the push is to push another page over this one okay it the the animation will look like the page come from the right but it's actually putting a new navigator a new page over this one okay next thing is we need to give a route inside so if you go up you will see that the material app have an argument called route inside okay you can see this but we will not use the argument and we will create a new route because we need to tell flutter okay we will have a new route so we want to go inside another page and for this we can use the material route material page route just like this and inside we have a builder the builder we can see that it's a function build context and the context and the build context is pretty much the same thing i will show you so we create a function first oops like this we create a function and i will remove builder inside and you can see that we need to put a build context inside so take this and a build context is actually what we call a context so this is the the name of the class and this is just context by example when we create a int and this one will be an index when we create something like this we have the name of the class and we have the index is the same thing so build context is the name with like int or string by example name so build context is the same thing as this and then context is the same thing as this okay just to keep things simple next uh i will put my semicolon at the end can i format document yeah perfect we need to put something inside this so we will return okay and what we return is the other page so i will go down you will see that we have the other stateless widget which is called the second page so this is what will return we will say second oops second page okay so i will put my all my comma format document save and i will put the const before so i'm not sure if i have explained const yet in this course but cons just mean it's a constant okay and what does this mean is uh flutter will build it so when flutter build the you you can see right there widget build one flutter build all of this everything that is a constant will never be rebuild if the screen change so by example if i don't know you press the button and then you can see an image this means the screen have been rebuild but everything that is a constant will not be rebuilt flutter will understand so it will give better performance okay so um yeah that's pretty much uh it about the navigator i know it's a little bit complex but it's just navigator that of context i will explain you what is the context very soon we have the push to add another screen over and we have the material page route and at this point you will see that if i refresh and i try it will not work and we will have an error you can see we have a problem let me explain you why we have this problem so what we are trying to do right now is uh i will go back we have the main okay so if i go up we have the main and inside we try we put the stateless widget with the material app okay so we have the stateless widget the material app the scaffold the button and the navigator that we try to go inside the other one so when we press on this navigator this mean the route will change and we actually take this and we go inside the other state list okay but we lose the material app inside and this is the problem so what we need to do instead is we create the main inside we have the stateless we have the material app and then inside this one we create another stateless and inside this one we have can i move okay we have this stateless the scaffold the bottom navigator so if i put them both side to side you can see that in this one we go straight to the state list and everything is nested inside but in this one we have the stateless the material and then we add another stateless to have the navigate the scaffold bottom navigator and when we click on the navigator we go inside the other stateless this mean we go like this and now everything is fine because we still are inside the material app so this was our problem so let's solve this right now i will press play i will remove the uncut exception and this will just not give me error anymore so what we'll do is we need to create we need to put the scaffold this one which is inside the material app we need to put this one inside another stateless so that's what we will do i will create another class and i will call this one first page and you will see in the next video oops i will just use the command st stateless widget perfect and this one will be called the first page inside i will put all the scaffold okay so i will remove the container and i will take the scaffold we have created i will copy all of this cut this put it inside the return of the first page build like this and now inside the home we can add the first page this will be a const also so what this uh does is we instead of doing this thing we are not we are now doing this thing so we have the material app and inside we go inside the other stateless which have the scaffold great so now it should work if i refresh and i will press the play the the button you can see the the screen is black and do you know why that's a good question pause the video and try to figure out why the screen is now black otherwise i will show you right now so what happened is we are inside the first page and we navigate through the other the other page called the second page but this one doesn't have any scaffold so i will create a scaffold instead of the container and if we refresh now you should see we have the white screen which is good we can add a nap bar this one will have app bar like this and i will save and you can see that we can go back inside the other page so when we press this button we have this scaffold with the app bar and we have a button right there but why do we have a button that's because we are navigating and pushing another page over this one and flutter remember that we have a page prior to the second page so if you want to go back flutter will automatically provide you a button to come back that's why and you can all you can actually remove this button if you want by saying a bar leading and we will say this as false uh is it this widget leading i will say instead lead i think we have something else automatically imply leading i would say this as false boom we don't have the button anymore but we can't come back so we have a problem so i will put it back we can go back inside the first page and we can go inside the second page this is the navigator now we need to explain about the context you see when every time we build something we have the build context context and i'm sure you wonder okay but what what is the context why do i need this exactly so i will bring back this and the purpose of the context is everything that flutter create so we go from the main we go inside the state list material app and everything is nested one inside the other but flutter need to have some connection between everything and if you don't have connection how do we know if we have an arrow right there so flutter will not be able to build anything and the context is just to tell flutter we have the context and this is what you need to build it's a bridge between each widget okay that's that is how is the most simple way to understand it it's a bridge between every single widget so what happened inside the navigator is we will say push we'll say navigator that of context so we use the context and we say we will push another page so we will take this one oops sorry we will take this one and we will go inside another page but we use the context to tell flutter okay we go inside this one the context is just a bridge between each widget to make sure that flutter build the the page or the app in the good way otherwise if we don't have the bridge we don't have any arrow and we are not able to build any app so that's why we need to always send the context everywhere we go inside our flutter app so that's pretty much it i think we have figured out pretty much everything inside this video it was a long one eleven minute and you will see the other video i tried to explain you how to use the navigator but honestly i think i do a pretty bad job at it so yeah that's why i did this video it's the explanation seems to be much better this time and you will see in the other the other video what happened exactly is i try to use the navigator but uh i face a problem so i will show you how to face problem in the other video but it's the same concept so that's it for this one and i see you in the next video bye in this video we will learn about the navigator and the navigator will allow us to navigate through different pages good first thing first that i want to tell you is there is two navigator right now with flutter okay because of flutter 2.0 they have integrate the new navigator 2.0 the thing is the navigator 2.0 is much much more harder to understand when we start with flutter okay the navigator 1.0 work super fine okay and in this course right now we are on flutter basics and i don't want to complicate everything by showing you the flutter navigator 2.0 so we will do it right now with the basic flutter this module we will do it with the navigator 1.0 okay you will see it's like way way much easier let's do it first thing first we need to go inside by example our button i will i will select the the next button uh the bottom blue and we'll change this for let's add first thing first the quotation mark and we will say next page good this will now be a constant and if you wonder why i know it just go over you will see prefer constant okay so we would put back the constant and now the on press will be something else the unpress will be the navigator and what will oops navigator dot of context like this dot push okay it's very simple before we continue on this we will need to create another page so you can see right now we have my app my app with the stateful widget and this is what is considered like a page okay because we have this scaffold inside so what we will do is we will create another state full widget so another class that we'll have inside the scaffold we don't need the material app we just need this scaffold okay so let's go down down down and what we'll do is we will create a state less widget so you will see state less widget this one and you will press enter this will give you the stateless widget so what about the name we will call this one next page and we need to do the same thing on this one and inside we just put a scaffold we already knew about this widget the scaffold and the scaffold will have inside an app bar the app bar argument and then we have the app bar widget we will keep it simple like this that's it next what we will need to do is we will need to go inside the push and inside the push we need to say material page route material page route just like this next we need to create a builder so what go inside this let's go just over and you will see that it take a function build context okay so take a function what is a function is this this is a function and then it take a function build context so where it was if i go over again sorry yeah function build context so we need to put the context inside so i will say build context because this is what they want and we will put the context okay next we need to uh so how can i explain you this you need to put the arrow just like this and this will return the next page what we have created the class we have created next page now we have two brackets three brackets one after the other will format document and you can see this will ask a constant constant okay so i will format document again and we will restart the app just by creating this it's navigator.ofcontext dot push material page route we have a builder that this is a function build context we have the build context inside so that's why we have this section and this this will return the next page okay when we press on this nothing happen that's not supposed to happen and why is this nothing happen let's wait it again we will go okay so after some research i found the problem okay and inside this course i really want to show you every problem that we will face so you know how to solve them good what i did is i went into debug console then i add this thing which is saying the context user to push the pop route blah blah blah blah i take all of this and i paste it on the internet then with this i found flutter navigator not working we scroll down and we find the first sensor the first sensor is telling us okay so uh you can either make a new stateless widget or stateful widget okay so let's do this i will put this down and now and yeah the error appear only when we press on the navigator as you can see if i press on it boom we have the error so where where is our navigator uh right there we have the error that appear on the screen like this good um so we will solve this they say create a new um a new state less widget or stateful widget this is what we will do i will make sure to have another class a third class and this one will be state full widget and it is this one enter and then this one will be by example my app extension whatever good and inside this one we will put the scaffold so i will go up i try to go as slow as possible we will take the scaffold and we will go down so you can scroll i will take all of this and you see the scaffold it ends right there you see that the word scaffold we take this we cut this and then we call this my app extension perfect this is what they suggest to do inside internet and we will replace the return container by the scaffold i will remove the comma because we don't need this and then we have some problem with the bottom name and with the current index so what we need to do is go up until we find this information these two variables i will cut them and we will go back inside my app extension and just before the override we will re-paste what we had good this will solve every problem and now if we restart the app and we try again now it worked magnificent so what was the problem is we needed to create another stateful widget in order to put inside the home okay because when we create a new stateful widget this make sure to create a new widget build with a new context okay you will learn more about context later but this create a new context and you can see that inside the elevated button navigator dot of context and this is why we needed to create a new state stateful widget because we needed a new context i hope this was clear and yeah this is why i showed you how to do it so see you on the next video we will talk a little bit more about this see you next video bye in this video i want to show you a super cool website called the icon 8 okay but just before we do this i just want to tell you that in the previous video there was a little mistake and it's about the context why i uh by mistake i put a y inside context it was not supposed to happen it will still work but it was not supposed to happen maybe you have see it maybe not so let's continue um on the website icon 8 what you will find on this website is multiple icons in illustration okay these are both i really like let's say you say welcome let's say you want to create a welcome page inside your app you have some icons that you can use inside your app which are pretty cool okay and the next one is icons so we will say maybe welcome yeah let's search about icons and you will see we have some icons maybe we can use one like this to create our let's pull out the this you see we need an icon for our app the application is right there okay if you don't see it on the menu you will find it in all your apps i just put it there we will need an icon for our launcher okay for our app and we can find the icon maybe there if we want so that was it for the the tip this is very cool website it's called the icon 8 and you can find multiple icons or illustration that's it in the next video what we will do is we will actually put an image on this application okay so see you on the next video bye in this video i will show you how to put a nikon for your app instead of the flutter logo let's start this right now first you will need to go on the internet and you will write on google by example icon launcher flutter and we will find the link from pub.dev flutter launcher icon we click on this one good now this is to put this is what we call a dependencies or a package and we will use this in order to generate an icon for your app is the most easiest way to do it first we need to go on installing and you will take this you will copy this maybe you will have a new the newest version but that's good you can take the newest version no problem you go back inside your code and we will go back inside the file pubspec.com did you remember this one let's click on this and we will add inside so if we go back in the the website where it is okay you see they told us to put this okay under dependencies good this is what we will do so we have dependencies and we will add just under flutter so at the same line we will add this and next we will click on the little arrow and this will get the this will get the package good so we are waiting it is currently doing flutter pubget if you don't have the arrow and you work with android studio you can still do flutter pub get it's the same thing good so now we have it that's great what we need next is an image and what i did previously is i went on the website i show you uh just the video before and i get myself an icon good i will put this icon inside the image folder and i call it this icon launcher icon easy as this and it's a transparent it's transparent transparent behind good uh so that's awesome we have the icon that we want to put there and what else we need to do so i will go inside the readme okay this is all the step they ask us to do we will go down and they told us you need to add this okay so we will add all of this they told us to put the flutter launcher icon it's under dev dependencies okay we did kind of the same we put it under dependencies is good we will change it after maybe and then we need to add also let's copy all of this never mind it's because you see they ask us to put it on their dev dependencies and inside this one installing they ask us to put it under dependencies which is not the same thing but whatever i will remove this one and i will put it under dev dependencies instead okay um i will remove this and as you can see we have flutter test and flutter launcher icon we have also flutter icon android blah blah blah image path inside the image path we need to put the path of the image which is the launcher icon and i remove this and i say launcher icon.png that's awesome next i will click again on get package and now we should have everything to set up the last thing i will go back in the website now what they ask us in the readme they ask us if we go down run the package so what we will do is flutterpop get we did it it's the arrow and now we need to say flutter run launcher icon main and this will set up everything so we go inside the terminal and we paste this and we say enter good i will take back the application and now if we restart if we restart you will see that the app should not yeah you see the image is not there yet we need to close the app so we will stop the app and we relaunch it and because we are not in the main file the play button is not available you can always use the run and start debugging also so i will play on this and i will launch the application also you see we have everything done successfully so you see successfully generate launcher icon that's great you will have the same thing and now i will just fast forward until the application launch okay the application is ready if we go back inside the menu you can see we have an icon for our app that's awesome this is what we wanted to to do for this video and we did it so that's it for this one and see you in the next video bye in this module i want to show you one more thing with flutter the basics of flutter okay and this thing is how to turn anything into a button okay because right now you can only use button like next page or click it elevated button but how can you turn by example an image into a button let's do this right now okay so first thing we will do is we will go where we have the second page which is settings okay and we will wrap the image asset with something called another widget so we'll say refactor wrap with a widget and we will use this time the gesture detector okay this will allow us to detect any click onto anything okay and now we have wrapped this with we have wrapped the image with the gesture detector i will format document i will put my comma because there's do there is two bracket format document and now we need something inside the gesture detector an argument called untap so we take this one if we go over we can see that this is a function if we go over function so we create an empty function we know how to do this and next inside this one what we will do is we will change a variable so we will call first the set state if you remember this is to tell slaughter to change something and we will need to create a variable let's create a variable i will say boolean i will create a boolean and boolean is actually a true or false variable okay it's this is what it mean it's true or false so i will say um is clicked by example and i will say false this has not has not been clicked so i click on it i take this new variable that we have created we go down and we have the gesture detector the on tab the set state and right inside this estate i will say is clicked okay is equal to so actually right now this one is false okay and we will say the invert of is clicked and i put my semicolon at the end so this is what it mean the exclamation point just mean the invert the other thing okay or what you can do you can just say through but it will work only one time when you will click it will it will click but after it will network so this will always make sure that every time we click the variable is clicked will be the invert of what it was so if it was true then it will be false if it was false then it will be true this is what it means it's just the invert of this i'm sure you get it now okay that's great and what we will do is we will say we will use a condition we have already used this before and we can say is clicked so if this is true then we will show the image asset and otherwise we will put an image dot network and i have a source the gpg you can just find an image on on the internet take the url as i show you previously and paste the url i will format document and i will move back this like that great so you can see the url is pretty long but yeah that's that's it so i will format document that's great let's restart the app and let's see how it worked if we go in settings because this is where our image is we can see that right now the uh is click head is set as as false okay so what this mean is is clicked is false so we will go in the second one where we have the image network and this is the image i get from the internet with their url okay so that's great but if we click on it boom we've changed the image now the is click head is now the invert is now through we have set state to refresh the screen and now the code will show this image and we can click as much as we want so this is how to create a click or something that is clickable with the gesture detector widget so that was it for this video and i see you in the next one bye hello hello this is a cheat sheet that i have created for you okay because in the next video what we will do is a practical exercise and before we do the practical exercise i just want to do a review or a recap of everything we have learned together good and this is a cheat sheet so when you will try to do the app by yourself the practical exercise you can refer to this and it will be easier for you to to just practice so you don't have to remember everything and i don't expect you to remember everything you will remember everything with practice great so let's recap flutter doctor it's a common that you do in the terminal okay um i don't know if you remember but if you open a terminal i will do it right now super quick i don't want to go and super long in everything so if we do flutter doctor you will see that this function show us if everything is installed successfully if we have things that work fine and that's pretty much it i think they show us also the version of flutter yeah okay that's it next we have flutter create new app name this is how to create a flutter a flutter project with the name called new app name that's it we have done this in the first video i think also we have the shortcut we have the format documents and we did the refactor okay if you remember we have if we click on something by example gesture detector you can click and you can say refactor and this will be wrap and wrap with widget okay this is the refactor and format document is the shortcut that replace the text so if you put um i don't know like if i remove this boom you see you need to put the comma between two uh uh curly bracket two brackets sorry that's it next we have all the widgets the material app is like what you need to start with you need to start with the material app no matter what okay we will work on this later but you need to know this and you can see on the code we start with the material app so we have the main that run the my app the my app start right there which have the material app inside okay we have the material app inside we have the home in the home we start everything all our code okay good and next we have the second most important widget in flutter the scaffold so if we take back the code right after the my app we have we have the material app inside we have my app x that this will return if we go down return a scaffold so this creates a scaffold and the scaffold looks something like this it's the the skeleton of the app inside the scaffold you have the app bar you have the body and the bottom navigation bar this is the most important things next we have the app bar so i just told you the app bar is what is on the top of the screen we have next the bottom navigation bar which is at the bottom we have and this these are widgets okay we have the icon we have work with that i show you how to use icon it's uh just like this you put icons bracket icons with the s dot something next you have the center widget so the icons is just to show icons in the app i'm sure you get it and next we have the center this will put every widget that is inside this one will put everything in the center we have also the elevated button which is a button we have this stateful widget the stateful widget is if i take the app it is state full widget you see so the my app extend extend the state full widget okay and the stateful widget mean that the app can refresh so if we go you see when we click on this this refresh because every time we click we ask flutter to change the screen for something else so this is the stateful widget stateless we just mean that nothing will change on the screen so the screen will always be static nothing will move so maybe this page nothing can change in this page so this is a stateless widget we have also the column the column is to be able to place multiple widget one over the other we have this sized box the size that box is just to put a widget with a certain width and height and inside you can put another widget we have also the row it's the same as the column but in the horizontal column is vertical we have the container the container is the same as the size that box but you can put more inside by example a color or a different style we have the image network to get an image from the internet the from an url we have the image asset if you want to use the image asset you need to put the image so if we go back in pubspec.young you need to make sure to have the asset image activated with the get package okay and we have the gesture detector this can trigger a click or a trigger an action inside an app and you can wrap any widget with the gesture detector and it will work as a button for the tips we have the double infinity double infinity is to take as much place as possible the condition is the is this if you remember we just did it in the previous video it is let me find it oops what i did okay we have the settings yeah it is click head if it's this is true then show this otherwise show this this is the condition this and this good we have also the navigator dot of context dot push material page route builder context const and next page this is i should i give you this one because this is hard to remember at first and i understand this and the navigator was i think um [Music] it was for the first page we have it somewhere then yeah right there navigator that of context that push material page route and this is if we want to go like this in this page okay is to change pages we have also um if i go down where it is right there we have also the widget catalog this is to find every widget with the flutter.dev documentation we have the function print to print something in the terminal like this in the debug console and we have this set state this is to tell flutter that we want to refresh the screen so this is your cheat sheet okay and in the next video you will do a practical exercise with flutter so i see you in the next video bye welcome back before we move on on the practical exercise i want to show you one little thing it will be super fast it is how to put code inside multiple different files you see we have the dart the main.dart but how can you put your code into two files maybe let's do this we will go in library i will right click and i will say newfound i will call this one maybe next page dot dart so make sure that all is lowercase and make sure to separate everything with the underscore great so i press enter and you need also to have the dart at the end if you have android studio maybe they will put the dart automatically but on visual studio you have to do it next we go on the main and what we will do is we will go down until we find the section next page okay you take all of this you copy this i will cut it okay and then you will go inside next page and you will paste this great now we have an error the error is saying uh things are not searchable searchable okay flutter can't understand what is everything to do this you need to import what we call the material oops material app uh material.dart this one okay you need to import this every time you want to use dart inside a file if we go inside the main and we go on the top you will see we have it import flutter material the dark it was already inside the file when we started that's why we didn't have to work we didn't have to add it great the next thing you want to do is if we go back inside domain we scroll down where we have the error you can see your error on the side okay we have an error with next page the name next page isn't the class how can we do this we need to let note this file the fileman.dart that the file can access the information inside the next page file to do this we go on the top and it's the same logic you say import okay but this time instead of importing a package flutter material.dart you just say next page and you press ctrl space and flutter will find it for you next page.dart great also you can create by example if you right click you can create new folder okay and i will say this one maybe next oops next page also and if we put the next page inside and i will say yes move okay i will say okay good the main you see the main have automatically put next page next page okay that that's mean you need to go inside the file and then find the file awesome uh what else can you do is by example you could you could go back one file by saying two dots this will go back one file up so by example it will go on the library and then maybe you could say like okay yeah so if you do that it will still work but you could you could go back one file go back to file and you see nothing's changed okay whatever this if you do this is just going back by example if you are inside the next page and you want to go back and then follow into the main this is how you need to use it okay i will show you inside the next page instead if i want to import the main.dart access information inside the main.dart i can say import and then i say two dots slash and now i have access to main.org you see so that is how you access other files and if we refresh you will see everything work as the same but it's just that now you are able to create multiple different files and separate and structure your code so see you on the next video for the practical exercise bye in this video i want you to redo an application from absolute scratch so you need to create a new flutter project you call it whatever you want but you need to make sure to put an icon for your app and then inside this app this is what you need to have okay i don't tell you much more you can see no button are available just this try to do it by absolutely yourself and if you're not able to finish this by yourself then on the next video i will show you all the steps to produce this app the challenge inside this one okay first i need to tell you two things the icon for the app is available in the resource and this image also if you want to download them so the challenge for this app okay will be to change the color of this section okay so this is your challenge try to do try to find on on the internet how to do it but this is the challenge so that's it for this one i think and yeah you can check the the cheat sheet if you want to have some help you sh you should actually check the the cheat sheet in order to create this app that's it for this video on the next one i will show you how to create everything but try to do it by yourself first this is the practical exercise see you in the next one but inside this video we will create the application from the practical exercise first thing first i will go inside the this and i will say close project close folder i guess yeah let's do this magnificent then i will go inside the terminal and let me tell you that you should be able to do it by yourself first this is only if you are not able to do it watch this video and then try again by yourself it's very important that you understand how to do this section by yourself okay so i would go inside cd desktop and inside my desktop i will say flutter create so you can see that this is something from the cheat sheet okay flutter create um i will say first app magnificent so this is creating a flutter app for us i will take the file and put it right there so you can see it great i will close this and i will open back my visual studio i will say file and i will open folder and now inside my desktop i have first app select folder great now i will go inside my library main and i will press start okay so i will say start with the pixel 2 because this is the one that is currently open next you will need to go back inside internet where you have if you remember it is the flutter launcher icon so we have searched this on google flutter launcher icon and i will do this right away i will go inside they're installing i will take this one the dependency and i will put this back on the side okay and next we can call we can kill this because we will need to restart anyway so i will go inside the pubspec.yam i will scroll down if you remember it's under dependence dev dependency right under flutter test you paste this i will say flutter pubget so get packages and next we need to do something else which is inside the readme we go usually you should if you don't know how to do this you just read everything but i know exactly where it is so that's convenient i will copy this section perfect and i will paste this right under like this that's great now we need something called an image and it will be icon launcher dot png we need to create a file called image so new folder image boom it has been created and now i have two image that i want to drag and drop you have the two image inside the resource of the course if you want them i will put my to image the launcher icon and the win persona great we will go back inside pubspec.yom it is image you just verify image and uh icon launcher so it's launcher icon never mind launcher icon it's very important that it works fine launch icon and next we need to go down where it is asset we remove twice one two and then we remove twice one two that's great and we keep only image with the dash and this should perfect and we click again get package or flutter pub get okay on the terminal that's great now i think we can just run okay no we cannot run the app right now we need to do one last thing and it is the command flutter pub run flutter on try con main okay this is the last we need to do i will put this on the side and we go in the terminal and we put this comment we press enter and we should have a message saying successful will we have it and success warning icon with alpha are not allowed in app store successfully perfect that's great next we go back i will close this close this and close this in the main what we want to do i will remove this and i will remove all of this okay i will just keep the first build just to make things clearer i remove this and i think this is great title we will remove this one team data we can keep it it's not a big deal we will we will remove it because we have not learned about it but you can see that right now we have the run app my app that my app is the class that will return the material app which is the most important thing and inside you have the home and something else there's something else we will create a state less widget so s state less widget this one i will click enter this will create my stateless widget and next inside my class i will call this one um oh yeah you can you can press ctrl d on mac on windows to select both of them and i will call this one uh i don't know home home page that's great okay next we can put home page magnificent inside we need to have a scaffold and at this point i will run the app and when the the app is running we'll continue to code we have the app bar argument the app bar widget so i will take the one with the the bracket i will have inside a title somewhere title this title is used with a text widget text perfect the text widget will have inside first app or my first app magnificent and what else we want we want the body so we'll put the body we will use the widget center i know it's very fast but it's just because you should do it by yourself and this is just a support for you to understand how i will do it inside the center we will put the child because the child will return a next widget inside and we have the image that asset image dot asset which is the path to the image it is image slash win png image slash win dot png and now if we refresh it should work and while it's refreshing we will go inside the material app and do you remember about the debug show check and mode banner we don't want this this is disgusting and we remove it next we go inside the app bar inside the app bar we have okay i'm not sure i have told you this one yet okay but you should be able to do it okay why because inside the app bar you can see that we have multiple arguments okay and if you don't find one that makes sense by example if none of them make sense you can go on the internet and search about how to change the uh a bar color maybe so how to change app bar color flutter okay and this is what i want you to do is to find yourself when you have problem to to find the answer when you have problem and you see first thing how to change a bar color flutter how to change a bar background color great we go down we have the first check mark 69 percent say 69 people said that this is great so declare a color primary color in the material app level so you can go inside the material app or maybe you can go inside the app bar background color primary color okay so let's take this one i will close this and i will paste this background color it is the argument and we don't have the primary color so what we will do is we will use something that we already know and it is colors dot so if you have colors you can put maybe i don't know it was pink if i remember pink just like this so we have created our first app by ourself okay it is a very very basic app but yeah it's our it should be your first app by yourself so you should be very proud of yourself and if you absolutely need this video to succeed this app what i want you to do is to close everything okay and redo it by yourself absolutely by yourself and when you are ready and you have done it by yourself only all the steps then you will be ready to move on the next module in this three hour video we have learned how to install flutter and the flutter basics this was just the introduction of my flutter course 0 to 0 and if you want to learn more about flutter you can go on fluttermap.com or click the link in the description to have access to the full course in this complete flutter beginner course zero to ero we will talk about how to debug your own app all the flutter advanced widgets how to install packages provider providers at state management this will be used to manage your data inside your phone and talking about data we will learn how to store data inside the phone with the local storage also we will go on firebase and learn about it firebase can be used to authenticate a user so login logout and stuff like this you can also use a database to store data inside the cloud and you can use also the storage to store image by example then we will learn how to use an api and use the http request with flutter finally we will learn how to publish our application because we want to publish this on apple store and play store at the end of this complete flutter beginner course 0 to 0 you will be able to create any application and when you register to the course you have access also to a private discord group i am very active on this one so every time that you have a question i will answer it again at the end of this course you will be 100 able to build any application with flutter i really hope this three hour flutter course was helpful for you you can click the link in the description to go on fluttermap.com if you want to have more information and i wish you the best luck for your future project thank you so much for watching and i see you in the next one bye

Channel: Flutter Mapp

Views: 544,258

Keywords: Flutter, flutter tutorial 2022, flutter tutorial for beginners, flutter tutorial for beginners 2022, flutter tutorial, flutter tutorial beginners, tutorial flutter beginners, flutter beginners tutorial, flutter tuto beginners, flutter tuto 2022, flutter tutorial for beginners in english, tutorial flutter, flutter mapp, flutter course, flutter free course, flutter course for beginners, flutter course full tutorial, flutter course full tutorial for beginners, flutter basics

Id: CD1Y2DmL5JM

Length: 195min 32sec (11732 seconds)

Published: Thu Apr 07 2022