in this video you will learn further with the latest flutter version let's start right now in this video I will show you the fundamentals of Dart okay so first thing first you will go on Dart pads the dev and then you will click on run you will see on the screen console we have all the thing that has been print from the function for Loop so first thing first we will remove this one and we'll go from the basics you can start by writing something like print hello and now because you use a function like print print something you need to put a semicolon with dark and I will press run you will see on the screen you will have hello perfect the next thing you can do with flutter is create variables usually when you code you will create variables like this a variable but with flutter and dart it's very specific so if you want a string variable you will see string and you will say by example this one will be called text and this will be a text hello again you will need to put the semicolon at the end just to define the things and now you can just put the string and the string is just a text value you can put the string inside the print so now if I save and I run you will see we still have hello so if I say hello text and I run this you will see it will be hello text all right so this is one kind of variable you can add another kind of variable which is the double this one will be a decimal you can say is equal to 5.5 you can also Define variables end which is numbers and this is round number so it will be five by example and if you want to display it inside the print you can add two other prints you can use this symbol dot to string like this and you will do the same thing for the number number Dot tostring like this and now if you just run you will see Hello text and then you will see 5.5 and 5. all right so this is kind of this is the variables you can use with flutter instead of using VAR the next thing I want to show you is in flutter you have the constant so by example we create a constant string food is equal to Pizza and we'll create another another one this one is the final string by example topping and this one will be equal to uh Beacon all right and put the semicolon at the end so everything is working fine and now if you want to know the difference between both of them I have a perfect place for you and the difference between a cons and a final is this so the value must be known at compile time this is for a const and a const mean a constant and then you have the final the final is used at the runtime if this mean nothing for you no worry it doesn't it doesn't matter that much okay if you have already some coding experience you will understand this part but if you don't have coding experience no problem I will I will show you like exactly when we use the cons and the final in the further videos okay so at least for now you know the definition of both of them now the next thing I want to show you is how to create by example a switch case so we will do the same thing and we'll delete a couple of things like this and now we will create a switch case so you will say switch and then you can create by example inside what you want to validate okay a switch case will be something that you put something inside and you will validate if the thing is equal to another thing and you will return something so that's which text you can you can create a you can create a case for example if the text is equal to high then you will put the two point and you will print something you will say by example print um the text is higher like this and you put the semicolon after the after this you need to break because this will go by example you will start inside the switch then the text will be validate if it's the same thing then we'll print this and then and then it will break and it will go outside the switch that's the purpose of the switch next thing you can do is create another switch case for example we will say this one will be hello text because we want to have the same thing as the text that we want to validate and we will print success like this after this you can create also a default so default and you will print for example nothing found nothing bound all right so now if we try to print at the end you don't need to print anything I will just run this and you will see on the screen this should send success this is because we have the text we go inside the switch we validate if the text is equal to high it's not the case we go in the on the other case we validate if the text is hello text if it's the case we will print success so let's try to add something else like hello text ad now if we want if we run this you will see it will be nothing found because we go inside the default not uh no no case has been equal to the text okay so this was how to create a switch with uh with dart now we will create a if hell statement so I will create a if I will say if the text is equal to high then we will print success like this and otherwise we will say else this is how to create the if else condition we will say else we will print failure something like this and you put the seven column let's run this and we should have failure on the console and here we go we have failure but if instead we put hello text inside the the condition and we run this this mean it will be true because the text is equal to hello text and we will have success so we have one last thing that I want to show you and it's the for Loop so for the for Loop we had it when we started I will create another one let's do this so we'll say we can even remove the string we will say four we call this a variable int equals zero or you can call this a end oops sorry you can you can call this a variable or an end because in flutter we are very specific and then it will say I is smaller than 5. you put the semicolon and you should put a semicolon there also and then after you will say I plus plus I will tell you what does this mean then you will print the I dot to string okay I will put the at the end of the print this and now if we run this we should have zero one two three four or something like this yep okay so how does this work first we go inside a four condition we say for this value where the I is equal to zero I want to go five times through this loop I want to go I is equal to zero then we add 1 to the I and so now it will be one and we will do this Loop five times because we want to finish at five and each time we will print the value I so first time we will print zero the second time we go I plus one this this just mean we will add one okay and we'll go plus one then we will print the value one we will print the value 2 3 and 4. so if you do 10 instead and you run it with c0 one two three four five six seven nine uh six seven eight nine ten and nine just like that all right so this was the fundamentals of dark pretty simple if you have already some coding experience you already understand everything I just show you but if you are new to coding that was pretty much all the basic you need for coding so that's pretty much it and on the next video we will start working on flutter that's it bye let's learn about the fundamentals of note safety with dart and flutter there is two things you need to know first what mean the question mark and then the exclamation point so to learn this we will start with creating a Boolean is admin set as false by example and then we will print this is admin variable so what happen if if I run this thing we will see on the console the false great now what happened if I try to say the is and Min is equal to null you see that with flutter and dart we have a problem it's not possible because a Boolean is a true or false value but if you use the question mark this mean this variable is now nullable which means the Boolean is admin can be true false and null so if I run this you will see it will be null on the console great so now you understand the question mark this mean it can be nullable now let's learn about the exclamation point so what I will do is I will create a text so I will say this is a string text which is equal to Pizza and then what I will do is I will create a condition if the text is equal to Pizza like this so we know as human that this is true but the code is not sure yet if it's true so what will happen if if I say by example first I will remove the null because this means the same thing the Boolean is admin is now null and now what I will do is I will say if this is true the tech city called pizza then I will say is admin admin is equal to true so we will set this value as true so it's not null anymore but what happens if we create a condition Again by saying is admin and then we create a condition Inside by trying to print something by example hello you will see that we have a problem with flutter and dart because if I go over flutter don't know if this value is null true or false so we know that this will be true so if we are 100 sure that this will be true or false and it's not null anymore we can use the exclamation point to tell further I am absolutely sure that this value will not be null and I will run this you will see we will see print hello so we have the hello and the print through that's great but what happened if it's not actually true you need to be careful because if it's by example we think it will not be null and we run this we will have a problem we will have an error so make sure that you use the examination Point only if you are absolutely sure that this will not be null so this was the fundamentals of null safety with letter see you in the next one bye now in this section of the course we will create this application with flutter I will show you step by step everything you need to learn and we'll do it together with some practical exercise so I see you in the next video bye in this video the first thing we'll do is create a new flutter project I will show you how I do this first I open what we call the comment prompt or you can open the terminal if you work on Mac I will open the terminal I will bring this on this page and now we'll create a flutter project so when you navigate through this command prompt or The Terminal you can navigate using what we call CD when you when you write CD you can write by example desktop and now I will navigate through the desktop folder if I want to go back one folder earlier like in the in my name folder I can say CD and add two points and press enter now I will be in the document user and my name all right I will go back inside the desktop and if you're not sure like which doc Which documents are available you can say by example first I will go inside my desktop if if I want to know like all the files available or all the the folder available in the desktop I can just write LS and press enter you will see I have some file 555 tags capture and I have flutter cores this is documents so if you want to navigate through the the folder app one by example you you could say CD app one and now you're inside the app one all right the next thing I will do is first I will CD and go back you probably already know this but this is for people that have never code before so now you are on the same page for the desktop I would create a flutter project I would say flutter create and this will be by example flutter app will come okay we'll call this one you can change the name if you want make sure that you don't have capitals okay you see it I have no capital and make sure that you don't put spaces like flutter or something make sure that you put an underscore so flutter app welcome I would call this this one like this and I would press enter now this will create a flutter project and we will wait like five seconds it's done let's go now we can close this and we can open a folder you can see I am inside a visual studio code and you have the choice between Android studio and visual code I prefer visual code because it's lighter it's easier to use on any computer Android Studio is like a very very big software and I don't really like it I prefer this one also you have extensions and all the stuff I will click on open folder now we'll go inside my desktop so if I find it desktop and you will see I have the flutter app will come I just created I click on this and now I say select folder but if you go inside you will see you have all these files this is all the file for flutter I will go back and click one on flutter app will come and select folder now we are inside our flutter project you will Target the library folder like this and you will click on Main you will see this is our application our basic application if you want you can click on this icon start debugging make sure that you are inside domain.dart otherwise you will not see this button and you click on this this will start the flutter application also as soon as you click on it you will see you go inside the run and debug tab you have multiple tab inside we'll go back inside the Explorer while we are waiting for the application to start I will show you something you can see that we have multiple icon before each folder I like this if you want to have the same thing you can go inside the extensions and inside the extension you will add the material icon theme okay so you search for this you see material material icon theme and you just install this you see the button okay the next thing I want to show you other extension that you should really have because it's the best extension you can add the better comments this will allow you to add comments inside your Visual Studio like this you have comments with colors which is pretty cool you should already have the dart extension and the flutter extension and yeah that's pretty much it that's the thing you should have um after this you see the flutter application has just started so now I will put this on the side and on the next video I can close this tab we don't use it and reopen the main on the next video I will show you a couple of comments that you can use which is pretty useful and then I will explain you what does this mean in the code and how do we create applications so I see you in the next video bye in this video I will show you two commands that you should remember when you use Visual Studio so the first one you can see that when we start the application we have this bar on the side and we have this debug console maybe your debug console is on the uh the left but whatever the right but whatever okay you can press Ctrl G like this and this will hide and show the debug console this is really cool because if you have it always you don't have a lot of place to code so remember this one Ctrl G okay the next one is Ctrl B this one would allow you to remove the tab for the Explorer like this Ctrl B so this was two commands that you should remember Ctrl G and control B I see you in the next video to explain you what is this code and how do we use this code to create this basic application okay so in this video I will show you uh what does this code mean and how do we create this application with the code inside the main.dark the first thing we'll do is remove all the comments because this is ugly so you can see that when you have Double Dash like this this is no code and this is only comments so I will remove this I will also remove this and I will remove all the the comments okay you can do the same thing as I do I will remove the comments so we can see it's way better all right we remove this and this it should not be long I remove something bad if you see red thing like by example like this you see red on the side and red like this you have deleted something uh too much so make sure that you just delete the comments all right I will delete this just to have the same line and I think we have another one like this perfect so now we have just clean code no talking or stuff like this so um how does this work first thing first you will see we have on the top domain domain will run the application and which application it could run it will run the my app where is this one if you double click you will see this is highlighted which means the class my app is what we go inside what go inside the Run app then this is a stateless widget stateless just mean the screen will never change if the user like press something or do something with it the screen will never change good I will show you after what is the other thing it will be the stateful widget but let's continue we have this then inside we use the override build the build will build what is inside my app and we will build the widget material app in flutter everything is a widget does this mean you will create something and then you will add a widget inside it will create by example the bar you can see then you will add a widget inside which it will be the text and it's just widget over widget over widget that will at the end create an application so we have the first one material app this one is like um what uh is about like all the application if you want to to by example change the theme of your app this will be inside the material app so you can see just right there you have the team data inside this one you have the phone the home will have inside the my home page my home page if you double highlight double click it will highlight this one so you can see that this was a widget inside you have the home which have a widget inside and then you have my home page this one in this case is a state full widget this mean the screen can refresh so if the user do something on the screen the screen will refresh you can see that we have a button when we press this go up the counter okay it's because we have a refresh screen it's possible with the stable widget uh other things you will see that we have a title this is you will call this thing and inside you will also add this information a title which you will get from the string title so you will be able to access this information we go we continue you will see we have a void increment counter this is a function and the function will set State when you use the set State this means the screen will refresh with the new information inside you can see we have a counter end counter which start at zero and then we refresh the screen by adding one to the counter so you will see this is a lot of information and it's okay if you're a little bit confused right now I just want to like understand the first big picture of what is flutter and then we will delete everything and do it by yourself so we have the function then we will build inside this stateful widget if you remember we have a stateful widget we will build and we will build a scaffold this is the skeleton of the app you have the app bar the app bar is like the blue thing on the top then we have a buddy Center this is all the middle of the app you can see we have a text widget you have to push this button this many time this is the widget you have another widget which is the counter the counter is the number like 10. and when you press on this button this button will be what we call a floating action button and The Floating Action button when you press on it will trigger the function increment counter if you remember this is the function that refresh the screen and add one to the counter okay so this was it we have also the the child which is an icon ad so this was what create this application which you can refer to screen what we will do is on the next video we will delete pretty much everything and we will start building our application this one I have saved it inside another screen you see we will build all this application together step by step so I see you in the next video to start building this application starting from absolute scratch bye in this video we will delete everything and start from absolute scratch so from the line 21 till the end you will delete everything okay and now you will delete also this little line of code in the home you will just keep the comma and we want to create what will go inside the home which will be a stateless widget State less widget so you can see I have access like this if I write St you will see I have access to those little bugs okay and those little bugs are accessible just because I use an extension so stateless widget if I press on it this will code everything for myself okay which you will save a lot of time if you use those extensions so to use those extensions you would go inside extensions and you will add the one called the awesome flutter snippet this one okay so we can write awesome flutter snippet and you need to install this one otherwise you will have to write everything by yourself this one you can install it okay so now that you have this installed remember that you can use I will close this remember that you can use the Ctrl B to remove the bar on the side and I will redo it with you now that you have the extensions um you will write sdl and by writing STL you will see you have access to the flutter stateless widget and the flutter State full widget if you want to have more information about it you can click the little arrow re node so you can use the arrow to navigate inside the menu and you can press the arrow to have more information about anything so if you go down you will see have more information about all of them so we will use the stateful widget I will remove the information and I will click on this perfect now we have everything right in for us you can see I made a little mistake I use the state full widget I wanted to use the stateless widget so STL and state less widget this one we will call this one the welcome page by example okay and now if you want to put the welcome page inside home you just have to write welcome page and you can select in your menu you have to option the one without the bracket and the one with the brackets I always use the one with the brackets because it will code more things so you don't have to write the brackets for yourself I will press on it perfect now we have a little blue things under a little bar it said if you go over the the widget welcome page you see preferred const a const is a constant this mean because we use the state less Widget the screen will never change it will always be the same so this can be a constant so I will write const before so every time you have an error with flutter this is just a warning you can go over and you will have the information what you need to do okay so I will write const and now we have this information what else can we do if we say what happened you can press Ctrl s and this will trigger this button the UT reload so with flutter you have two choice you can use the restart which is the Green Arrow or the out reload art reload will just refresh the screen with the new data the reload the restart sorry will restart the application completely okay so sometimes we'll use this one sometimes we'll use this one I will show you every time so now if I save I will see a black screen this is because we don't use the scaffold widget so let's use this one I will write scaffold like this so you just start to write scaffold you will see that with flutter if you want to write a widget it need to start with a capital letter so you will write scaffold you will see the option and you will select this one with the bracket if you have it otherwise you will see you might have this one but use the one with the bracket when you can so we'll click on it and now if I save Ctrl s just before I will add a constant you see if we go over the scaffold you go down you see prefer a constant variable okay I will run I will add this before and now we don't have errors if I save Ctrl s or I press this button which is the same thing okay I click on this this will refresh the screen and we will see a white screen so this was the scaffold widget starting from absolute scratch the next thing we can do is we could change the primary Swatch to Red because we want our application to be a red team all right you will see nothing I will click on this button but just to refresh the the entire application because this is like you need to refresh the entire application to make sure that Flora understands we have changed the theme all right the next thing we want to do is we will work inside the scaffold widget we will add other widget inside this one like the app bar and the Buddy so this will be on further video in the next one I will just show you how to remove the debug Banner like this you can see this little bar on the top I will show you how to remove this see you in the next one in this video I will show you how to remove the debug Banner you will see it's pretty simple inside the material app you will have arguments so with flutter we work with arguments and a widget that's all it is okay if you have a widget which starts always with the capital letter then inside you have an argument you have multiple argument actually and each argument will have something inside some of them is widgets like this one the team and the home and that's how it works arguments always start with the little letter and widget always start with the capital letter so the argument is the lowercase all right so we will add another argument I will press Ctrl space and this would show us all the possible arguments that you can use if you use the arrow you can select what you want the one we want is with flutter you can just start to write what you think it is so it's a debug Banner let's write debug debug and now you see we have three options the debug show checked mode Banner material grid semantic debugger if you're not sure about it you can click the little arrow and this will give you more information and if we go over the show check and mode Banner you will see turn a little debug Manner and indicate the app it's in debug this is just to show you this is in debug mode I think it's pretty ugly so I will remove it I would say debug show checked mode banner I will click on this or you can press enter because you are selecting this thing press enter and now if you're not sure what you need to put inside you just go over the debug show check mode banner and you will see it's a Boolean this mean is a true or false value so I will say false I don't want to see this now I will save control s and you'll see this is now gone this was how to remove the debug show banner and also I have teach you what is the difference between an argument and a widget widget always start with a capital letter arguments with a lowercase all right in the next video we will start and create a nap bar inside the application see you in the next one bye in this video we will work on the app bar widget so inside the scaffold we have this the scaffold is the skeleton first thing you will create where add is control space this will show you all the possible argument inside the scaffold the one we will use is what we call the app bar because I think this takes a lot of place I will just remove the information by re-clicking the icon so I click on app bar this will take a nap bar widget with the capital letter again it's very important otherwise it will not work you click app bar by pressing enter and now you have a number you can see that we have an error how do we solve a root flutter it's very simple you go over the thing and you scroll down you will see the Constructor being called is in a constant this mean it's not a constant the a bar is not a constant all right how do we solve this we say that the scaffold will be a constant which is false because inside this is not a constant so by removing what is on the top you will see now it will work if I say you will see that we have a radar bar just like this very simple now you want to add I don't know a title inside your app so you go inside the app bar you go check all the arguments possible and one of them will be called the title argument you click on this and now you want to create a text how do you use a text inside flower well it's pretty simple there is a widget just for this and it's called the text widget with the capital letter again so you write text and then you will select this one the text with the bracket you press enter and now you need to put something inside some data so I will remove data you see we have an error you just go over the text if you scroll down you will see a one positional argument is expected but zero found all right what does text expect to have inside if you go over and on the top you will see that the text Widget the first thing we need to put inside is a string data so inside you need to put a string very simple you will have the the bracket like this the whatever how it calls you will add this and you will write your text for example I will write welcome and if you save you will see uh this had it automatically the const sorry for this so I will just if you save you will have welcome and you will have the title now you will you need to add the const like this because it's a constant this will never change if you use a Mac a Mac to create your flutter apps you will see that your title is on the middle right now this is okay so what you can do to put everything in the send in the center you can say title and you have the center title argument if you go over you will see that this takes a Boolean so we will see through and now everyone will have the title in the center the next thing you can go and the next thing you can do inside the nav bar is the background color so you can use the background color so this is an argument if you just start writing background you will see you have the option automatically if you don't have it you can just press by example if I go outside you can just press Ctrl space now you have all the options and I will press enter this will save you a lot of times next inside the background color this take a color so you go over you will see this take a color I'll do how do we add calories in flutter super simple you write Colors with plurals with the S so colors with a capital letter make sure it's a capital letter because it's always argument widget argument widget you know uh insert in some cases it's just a Boolean you need to put inside but you get the point so you say colors Dot and you have all your colors you want to use we will use light green by example and I will save you will see now we have the abar green this will override the color primary Swatch red okay um what else can I tell you so make sure that you have a s okay it's very important I will just change this for a red accent like this and I will save you will see this is a different red so if I remove the background color and I save you will see this is a more uh red red and this one is just with a little Accent on it I prefer this color so I will use this one this was how to create an up bar with flutter in the next video we will start and add an image inside your application so I see you in the next one bye in this video I will show you where I get all my image and icons from my website called from the website called the icon8.com so icons8.com you will have the illustrations usually what I do is I go right there I write illustration and I will write by example welcome and press enter this will give me like multiple icon or like animation I can use I think I really like I don't know this one so I will click on this one and now you can just download and you have the download a low resolution which is absolutely free so you can download image if you want I will download some random image and we will start working on how to add an image inside your flutter app in the next video so this is where I get my image from you can do the same thing or you can get your image from another website it's up to you so I see you in the next video and I will show you how to add an image inside your app this is three image that I've decided to take for the application so I have the rock welcome and yay so I will just put this file on the side and to add image inside your flutter app it's I will show you how the process all the process so you press Ctrl B to reopen the side the first thing you need to do is create a folder for those image so what you can do is go at the end right click and say new folder and now you will write this one image I will press enter we have a folder image I will take all these three major take it and put it inside image all right the next thing you will need to do is go inside the pubspec.yong and what I will do is I will add the image so you can scroll down in the pubspec.com and you will see a section called the asset like this so it's very important that you do exactly what I do you will see asset you will put your cursor before the A and you will delete twice one two okay and now you will do the same thing for this line of code you will put your arrow after the hashtag you will arrow to the right once and you will delete twice one two it's very important that you do the same thing otherwise it will mess up this valid okay and now you see I have a little thing right there I will press Ctrl G to remove this because I have more place to work on and now I will delete this thing I will just say image this will make sure that the assets image is now accessible inside our flutter project so now what I will do is I will click this get package okay you see this is running the flutter Pub yet running all right now we will have access to this asset thing um the other thing I want to show you we will go back inside the main so inside the main you will see that after the app bar argument so this is the app bar this is the last thing of the app bar we have the comma after the comma we will write the body the body will be all the center of the application inside this one we will write image dot asset okay and inside this the asset you will see that this required a string name this is the path where the image is located so you will write a string and you will write image so make sure that it's exactly the same thing image because the folder is called image and then you will write welcome.png or the name of your image my image is welcome.png so I will write welcome.png and now if I save you will see that it's working but sometime it will not work okay and what you will have to do is to kill the application so you will stop the application because sometimes when you add folders like this and add image you will see like a box and it will not work so if you have something like this you just close the application and now you reopen this application by going inside domain and you re-click this thing you start debugging okay when because we have to wait for the application to restart uh we will do something else between this time so I will go inside the pubspec.com again this file you have access right there and I will delete all the comments because this is pretty ugly so usually this is what I do when I start a new project I remove all the comments make absolutely sure that you don't delete the real code the comments inside this file is only the hashtag okay so you can remove all of this and make sure that you see copertino icon is on this there is two space before so if you delete something and it's now one space make sure that you put two space it need to be exactly how it was if you want you can keep all the the message if you don't want to mess anything but if you want you can just clean everything like this just make sure that everything is on the same line you see right there I made a little mistake I just have to make sure that it's two space now I can delete everything else and this file is way more clean all right so now we have the image and that was how to add an image with flutter it was pretty simple so in the next video I will show you also how to add an image but from the network so you will not need to put the image inside a folder I see you in the next video bye okay so if you want to add an image from the network you can go on Google by example and you can write I will write Einstein I will go inside the image and I will just select any image I want so I will click on this one then I will click right click and I will open this image in a new tab so I click on this now I can go inside this one and you can see that we have all the link of the image make sure that the end of the link finish with something that makes sense like dot png.gpg.gpeg if it's like a long text like this super random don't use it don't use this one take another image okay you need to make sure that it ends up with something that makes sense I will take this I will copy the link I will close this and this and with the link you can go back inside your code and you can replace this image asset so for now what I will do is I will just comment this so I will press two space a two bar like this so now it's not it's now a comments it's no code anymore and I will add the image with the capital letter dot Network and inside you will put the source of the image so I will press I will put this I will press Ctrl B just so we can see a little bit better and now I will put a comma just because it makes more sense now you can see that the text is really long on the same line so what you can do is you can press right click refactor oops no it's not this one sorry it's right click and format document and now you see everything will be structured if I press Ctrl Z you will see its nut structure but in the further of this course I will always use the command shift alt F I will say I will format the document but I will use this command this is way faster so I will press shift alt f sorry like this and now the the the format is now perfect it's way better to read and if I restart the refresh the application or Ctrl s to save you will see that now we have the image from the network this was how to add an image from the network now what I will do is I will remove all of this just to keep the image asset because we don't want the image from Network this was just to show you how it works and I will press Ctrl save and now let's say I have I don't know um I will remove this little thing okay the comma I will save I will format document sorry now you see we have two bracket with flutter what I like to do and to make sure that the code is very clean every time I have two brackets one after the other I put the comma so now when you use the format document so Ctrl uh I don't know what is like right click is this format document just remember the command for yourself when I use the format document boom this will replace the code perfectly and it's way more readable so that was how to add an image with flutter how to use also the refactor the format document great I see you in the next video bye in this video I will show you how to put the image inside the center of the application for this we have a widget which we call the center widget if you want you can write you can like delete this write the widget Center widget and put the information inside so this is what it will do first and after I will show you a shortcut how you can add widget faster so first I will control X this will just delete the text and save it okay so if I press Ctrl V after this will reboot the text so it's just a cut I will cut the the information Ctrl X and I will write the center widget I will press enter I was pretty quick so center with the capital letter you use the one with the bracket always press enter and now you will see this take a constant so I will write constant before const and inside the center when you want to use like a widget inside another one usually it will be called a child so you will have a widget inside you will have the argument child if you want you can press Ctrl space to see all the arguments available and I will use the child argument this mean it will be the widget inside this one so we can we can just control V so paste the image we had previously now you see we have an error if we go at the end again you will see what is the problem the Consular turbine call isn't accounts this means we just have to remove the const of the center and now if we format document this will replace everything if we save you will see the image now in the center okay now it's time to show you how to add a widget with a little shortcut I will cut this again Ctrl X and I will delete this Center widget I will Ctrl V to re-add the image if I save you will see the images on the top now what I will do is I will do something which we call refactor so you go over the widget which is an image in this case you right click and you see this time it's not the format document but the refactor so you can use the command Ctrl shift error if you want so I click on refactor this will give us multiple widgets that we can use to wrap this one and we will say I want to wrap with a center widget and I will click this one boom you can see we have the center inside we have the child argument and the image everything has been done for us so if I press the format document nothing will change and this is because we need the comma between those two brackets so I will add the comma and I will say format document this is the same thing but way much faster so I will press Ctrl s and now it's now in the center all right this was the center widget and I see you in the next video bye this is our first practical exercise together because in the previous video I've shown you a lot of things and I want to make sure that you understand and register those things what you will do is you will go after the line at the line 21 and it will delete everything okay that's your goal also you can delete this little things okay now what I want you I want you to do is to recreate the application that we have right there but I want some different things what I want is the color instead of red I want this to be green and also instead of using this image I want you to use another image by example you can use the rock image or any image you have downloaded okay so this is what I will do in the next video I will show you again super fast step by step how to recreate this app with the green app bar and this image instead of this one so I will close this this is your task start right now recreate everything from scratch at this point like you have all this code but recreate everything I want you to have an image in the center another image with the green the green app bar that's it that's your task do it yourself if you're not able in the next video I will I will do the solution in one video super fast see you in the next one bye okay so this is the solution how to create the upper green and change the uh the image for another image but again from scratch again make sure that you are able to do it by yourself first and if you're in a table this is the solution so first I will write State STL so I can create a stateless widget next I will call this one the welcome page perfect and I will put the welcome page inside the home I will say welcome page and I need to put the bracket to call this welcome page I have a little thing I need to put the const because it's a constant and now we can keep the primary Swatch to Red it doesn't matter next inside the return inside the build we have the return we use this scaffold widget and now I can put the cons before and save if I save you will see this is the app we have right now inside this one we use the argument app bar the widget will be the app bar widget this one the we can change the title the title will be a text widget again this is super fast but you should be able to do it by yourself because we have two brackets one after the other I will put a comma the text will take a string inside and the string will be the welcome I will format document now I see I have a problem because I use the const I will remove this the text now need a constant the title if I save this is what we'll see the title we can change the center title for through and then we can add also the color background background color we can say colors.green and I will save perfect now we need an image in the center this for this we need to use the body argument so buddy we have the center widget because we want this image to be in the center the child the child argument will be the image so image dot asset the name will be the path of the image which is which is inside the image folder slash I will use the rock image so rock.png I will press Ctrl V to remove this so rock.png I will save and now here we go we have the we have what we want this was the Practical exercise make sure that you are about to do this by yourself so now what I will do is I will remove the green I will re-put the welcome image and actually I will put the background color to colors.red accent so now we are back with our previous app and we will keep working on this one that's it and I'll see you in the next one I'll see you in the next video bye in this video I will show you how to use the widget columns so you can see inside the body with inside the body argument we have the center widget okay this means we can put only one widget but what happened if we want to have a button over this image for this you need to wrap the center or actually we can wrap the image so I will say right click refactor and I will use the wrap with a column just like this perfect and now we are able to put multiple widgets inside the column you can see the column instead of taking a child like the center it take children which mean it's a list of multiple widget and in flutter this the the square bracket mean it's a list so you can put the image and we could put another one right under oops sorry I made a mistake we'll copy this now we'll add another one and three and I will save you will see we have two image I will remove this one just keep one image and in the next video I will show you how to add a button see you in the next one bye in this video I will show you how to add a button in your app so inside just before the image I said you will see that inside the list every widget is separated with a comma okay so I will write an elevated button elevated button you see we have we have it right there elevated button the first one I press enter and now we have all automatically the arguments on press and child the reason is if you go over elevated button you will see that the unpressed function is absolutely required it will not work otherwise and the child is also required this mean you absolutely need to put them otherwise it will not work next you know this is a widget and you need to separate every widget with a comma inside a list so I put a command we need to work on the unpress the unpressed funnel will be an empty function so a function with flutter is this so two two different type of bracket we have the first one when we can put arguments inside and we have an the other one this is what we want to trigger one who what we want to happen when we press the button I will show you after how this is working so the child will be a text widget again remember widgets start with a capital letter you use the text widget and the data inside will be a string the string will say by example click you can see that we have a problem this is because we need the const I will now go at the end because we have two brackets and add the comma like this hold save and if I format document this is way better to look at all right we have the button on the top but the button is doing nothing for now the next thing we want is inside the unpress we have an empty function but we want to trigger something so we'll click inside the thing to triggers and I will use what we have used previously inside the dart fundamentals I will use the print so I will use this and the print start with the lowercase okay make sure you click on this one and inside this will take any object we will put a string we will say a button pressed like this and because you use a function every trigger need to be separated with the semicolon so if you want to add another print make sure that you add another print you put the semicolon you see so button press number one two and three so if I save the application and now I will press Ctrl G to open the terminal okay if I press on the click button oh you need to make sure that you go inside the tab debug console you will see that I have button press one button press 2 and button press three we have all the prints inside I will remove two of them I will just keep the button pressed I will save and now I can click again and you will see button pressed so the button is now working I will press Ctrl G to remove this and we will remove the print because we will not use it anymore this was just to show you that the button is now working um what we want to do on the next video is every time we click on the the button we want to change the image we want to switch between this image and another one how do we do this I will show you this in the next video bye before we work on the logic to create when you press on the button to change the image I just want to show you how you can change the look of the button if you want to change the color for this you go inside the elevated button and you add an argument which is called style this one to change the style of a button is very simple you recall the name of the button so this one is the elevated button early vaded button and you say dot style from all right you just use this one inside you will have the color which is the background color you can press on this argument and now you use the color widget which we I already show you how it's colors with the S with the capital letter dot you can use by example green now if I save you will see the button is now green you can change other arguments if I put the command you can put other arguments like if you want to change other things for the button this is all the styles all right so this was how to change the style for the color I will use the red accent and I will format document and Save that's it see you in the next video bye in this video I will show you how you can click on this button to change the image and switch between one and the other all right so keep the focus on this one it will be a little bit harder than the other video we have done first we will go inside on the top and I will create before the class I will create two variables and those two will be strings so I will say string this one will be called the image path and the image path will be a string obviously and it will be the the path of the first image so this one so instead of writing the path like this I will copy this and put it inside like that oops sorry like that and put the semicolon at the end make sure that this is like that I will call this one the image path one and I will do the same thing for the other path so I will say string image path two and I will replace the welcome if I click on this Explorer the image I will use the image EA dot PNG I will use Ctrl B to remove the side I will use yay dot PNG all right so now what we can do is we can create a logic if we click on the button then show another image so what will go is inside the unpress we go inside and we say if we create a condition if the sorry first we need to create a current image so we can say the string uh yeah we can see string current path this will be the pattern that we will put in the image and this one can be by example the image path one okay this is when we start the first the first value is the image path so I will use the current path and put it inside the image I will replace the image I set with the current path and the logic would be if the current path is currently equal to the image path one then we need to open the bracket we say then we will set the current path to the image path too and you need to put the summary bracket the semicolon at the end all right so if the current path is equal to the image one then the current path will be equal to the other image we can do the else condition so else otherwise this means it will be the image path2 we do the invert so we say the current path is now equal to the image path one I will save so now it should work but it will not work so I will save the application and I will click on this you see it's not working and but it work in the the value will change but not the screen I can prove I can show you this by example if I after the on press after the condition I can say print the current path with the semicolon now if I open the terminal with Ctrl G you will see when I press on the click let me control save because we just added the print I will click on click you will see the image change the path will change it's yay and welcome yay and welcome but the screen doesn't refresh I will press Ctrl G and now I will delete the print first how do we refresh the screen how do we tell flutter to refresh the screen for this you need to use the set state so when you call the unpress you use the S E T set State you will see s set oops set state I don't know why I don't have the option oh yeah I know why I don't have the option if you want to refresh the screen if you remember you need to use the state state full widget stateless will never change the screen so you can go over the stateless widget you can you can sorry you can right click the stateless widget and you can click refactor this will tell you convert to a stateful widget and you click on this perfect now it's the it's a stateful widget and we will be able to use the set state so on the on press so if I just save it will still not work you can see it's not working you need to use this set state so the Indian press function I will say set State you will use the first option set State like this this tells letter refresh the screen but you need to put all the thing that you want to refresh inside the set state I will format document save and now when I press on the click oh nothing happened so I will refresh again and now it's it's working so I'll just save again or you can click the the restart if you want so I will restart the application and now when you click on click you see the image change between one and the other so that was it how to change the image and I see you on the next video bye in this video I will show you how to use a widget called the sized box so uh what what this will do is let me show you you see the the button and the up bar we want to add a space between both of them because it's very close so you can go inside the list of widgets inside the column and before the elevated button which is the click button we will add a widget with the capital letter size at box you click on enter and now you make sure to put a comma because we are inside a list and every widget is separated with the comma the sized box need to be a constant and inside you would press Ctrl space to have the options and we want to use the height argument and we will say if we go over you will see that this take a double okay so we will say 50.0 and I will save you will see that now we have a little spacing a 50 pixel between the welcome and the click we can do the same thing between the elevated button and the image asset okay just copy paste decided box and now I will save we have a little space there also this was the sized box widget in this video I will show you a widget called the single child scroll View let's say inside your your application you add three other image so you see we have the image asset I will copy this one and inside the list inside the column we will add two other image and I will save you see that the screen is not scrollable and we have a problem because the flutter is telling us okay we have this is not working we can't put every widget inside the screen because you don't have place you don't have enough place for this you can wrap everything so we will go over the center widget and I will right click refactor and I will wrap with a widget I click on this and I write and I use the single child scroll and if I press Ctrl space I have the option single child scroll View with a capital letter if now we save you will see the screen is now scrollable and this was the single chart scroll View see you in the next video bye in this video I will show you how to create a list dot generate so if you don't want to put three time the same image you can create a list that will replicate this image X many times so five times ten time or whatever let me show you how it works first thing first you will need to create the list dot generate okay and you press enter this is the widget list the generate you generate a list and you can see that we have first thing first anywhere if I go over you will see that we have the error the widget type list can't be assigned to the list type widget so you can't put a list inside a place where we expect to have a widget because you can see that the the column the column is a list of multiple widget and right now we try to tell slutter all right I want to put a list inside a list of multiple widget where where I'm supposed to put only one widget what do we use in this case if you remember you can use the column widget so we'll put a column inside the column that's that word it's perfect so we will see column I use the column widget and I put my comma to make sure that we separate every widget inside you have the children if you remember the children we have already used this one the children is a list of widget and instead of putting a widget inside the list we remove the list and we put the list that generates inside so I will delete this and I will put list dot generate and I press enter this will automatically put everything I will format document and now you see the length is how many item we want to generate I would say I want to generate four of them and inside the the little arrow will tell you I want to put what do you want to create five times so we'll take the image as set I will cut this remove the comma because we only need one comma and in the null we will replace this with the image asset since we have two comma two bracket I put the comma between format document and now I save you will see that now on the screen we have four image generated because we use the list.generate four items and this is the image asset maybe you wonder what is this little uh little thing I will tell you what is this in the next video bye in this video I will show you how you can use the arrow instead of the empty function okay so what you see right there is you can either use the arrow to display the image asset or you can remove this and use the curly bracket and return the same image with the semicolon at the end this will do the same thing okay so you can either use the bracket and return something inside or you can just use if I control Z you can just use the arrow and it will do the same thing what is the difference you can see this one will allow you to only return one thing but in the other case if you use instead the um the bracket and return something you could create by example a print function before to write something or you could do other stuff before returning the image okay this is the only thing like this you can put multiple things inside but if you use the arrow you can put only one thing okay so now you know if you see the arrow with flutter you understand it a bit more let me give you another example you can see that inside the unpressed elevated button we use the empty function and inside we put something which is the set state but let's say we take this set State I will cut this Ctrl X and now I will replace this curly bracket with the arrow and I will reboot the set state after I will remove the semicolon you see this will do the exact same thing but when we press on this at this point because we use the arrow we can only do one thing we can only set State and do this stuff but if you use the curly bracket which I usually always use because I don't know it's just something I prefer you can add before the print function by example hello and put the semicolon all right this was the difference between the arrow and the normal function one can allow you to do one thing and the other one can allow you to do multiple things but I always prefer to use the the curling bracket sometime I will use the Arrow when the code will automatically give it to me you know so that was it see you in the next video bye our next challenge inside this course is to create another button and this one will add other image so instead of having always four image we want to start with one image and when we press the other button this will add an image inside the list so this is the next challenge we want to do I will show you right now how to create this so um first thing first we will need to create a variable end with the number of item inside so you can see that in the list the generate we have four item but we will replace this with a variable for this we will go before the build okay because the build will re will be rebuilt every time we set state so we need to to set this information before I will say end current number of image is equal to one when we start and now I will take this variable which is the end I will copy this and put it instead of the four boom just like this and now if we save you will see that we have only one image but how can we add one to this this number image first I will add another button so you can see that we have this elevated button but instead you can just copy paste if you want but I will recreate it so right under I would say elevated button boom and I will the unpress I will put an empty function for now the child will be a text widget inside I would say add an image and then I will put my comma and my other comma and I will add a const I will format document now okay so you can see this is the elevated button I just created on the on press what we will do is if you remember when I add an item this will have now two image if I add an item but I need to refresh the screen so we need to start with this set state like this this function set state and inside you can create your logic by example you could say a number of image is equal to the number of image plus one and you put your semicolon I form a document and I save and now if I press on the add image this add a number this add one to the number of image and we can see it on the screen the screen will refresh because we use the set state I can re-click on it you see now we have three image all right that's pretty cool and if we click this button all the image will change okay so that was it we can just change the color of the button I will use this the style of the other button copy this because I want the red accent instead of this this red it's a little difference I will go in this elevated button and I add the style for my document save okay make sure that your code is similar if you have red errors you just put your cursor over the errors and you try to find the problem so this was pretty simple I will refresh the the entire application I like to do this because if you do this this will reset the value of number of image and this was it I see you in the next video bye in this video I will show you how you can put two widget one after the other so instead of one over the other it will be inside a horizontal axis but just first I want to show a couple of things you can see that the number of image instead of doing this logic you could just say plus plus and encoding this will be the same thing this adding two plus we'll do the same thing as adding one and I will save to show you how it works so if I click on add an image you will see it works just as the same it's the same thing it's just a shortcut the other thing I want to do is you see how we don't have a space between those two image I want to add a little sized box so we can add this size box we'll copy this and I would put it between those two elevated buttons so you have this one and this one I will put it between both of them like this and I will save you see now we have a little spacing all right now we want to put this inside a row so instead of a column we want to put this in a row let me show you how it works first we will take this elevated button or you can yeah you can take the elevator button you can right click refactor and wrap with a row widget like this okay so you have the row now this elevated button is inside a row so if I save you will see it's a little different it's now inside the row the next thing you want is to put the auto elevated button inside this list of widget which is inside the row so we'll go take the other elevated button and go down I take this I will take this with the sized box I will cut Ctrl X and now I can go right after the other elevated button you see this button will end right there with the comma and I will add all the code right there and I will save okay you see inside the row we have the children the list in the list of widget we have the first one the elevated button the second one the size box and the third one the elevated button if we save you see that we don't have any space between both widget this is because the sized box use the height 50 but this doesn't change anything because we use a row widget now so you can replace the height with the width like this now if you save you will see you have a spacing but how do we put the row and the widget inside in the center for this you can go inside the row and there is an argument called the main axis alignment this one will take the main access alignment widget Dot Center now if you save you will see that this is now in the center how does this work so if you go inside you see that you have also the cross access alignment so in a row the main axis of the row is horizontal and the cross axis is vertical because it's the other axis so we want to change the the location of the widget inside the main axis alignment that's why we have used this one this was the raw widget inside your flutter app and you can see that we still have everything that works the click button still work and the add an image still work also I see you in the next video bye in this video I will show you how you could display the number of image inside the button add an image so what we will do is we'll find this button either an image it's this button elevated button with the text add an image inside you have the text which will try to put the counter or the number of image inside for this you can use the dollar sign this will tell Slaughter that the next thing you want to put is a variable and not a plain text and you can just press enter Because you see we have the number of image so you start to write number of image and now you see you have a problem this is because it's not a constant anymore if you save you will see that you have add an image and you have six after this is the number of image we have on the screen you can put also the bracket if you want this will be in plain text so if you save you have the number of image right in like this so this was how to add a variable inside a text I see you in the next video bye in this video I will show you how you can navigate through another page so instead of clicking this button and changing the image we will click on this button and we will go inside another page so let's clean our files inside the main so I will Ctrl B to move this on the side what I will do is I will keep the row I will keep the elevated button that's all good but I will remove everything that is inside so you can see that the unpress I will remove the set state number of image I will clean everything so we remove the unpress we remove also the other on press for the other button so bolt and press are empty functions now next we will say we will replace the add an image by register I will add a constant okay and I will add the other button the other button will be login so if you save this is what you should see on the screen after this we will go down and in the column and the list generate image asset we will just take the image asset I will cut this and I will delete the column widget because I just want to have the image asset I will save now we only have one image great the next thing we want to do is we will go on the top and we will remove the image path we will we will not work will not use the switch button anymore so I will just take the image path will come I will copy this and I will remove those three string we have created the image path to and the image part one two and current path let's remove all of this you see we have the error now on the little red thing if you go down you will see the error we replace the image as set with the image path so I will put the this and the image path great nothing has changed but now we don't have the variable anymore we need to clean other stuff um do we need actually everything is now perfect now oh yeah we just need to remove the end number of image we don't need this anymore I remove this and now everything is fine all right so our goal is since we have cleaned everything those two buttons do nothing and what we want is when we click on this one we want to go in another page so I will go inside the elevated button login and what I will do is I will say navigator actually I think I will do it on the next video okay because this video was just to clean the project I will call this video clean the project I see you in the next video to use the Navigator bye it's now time to learn how to navigate through a different page now that we have cleaned the entire project we will use the login button to navigate through a different page so I will say navigator you will see this one have a lot to remember but um yeah it's just with practice you will remember Navigator with a capital letter then you will say dot of like this of and you will press enter this will write of context for you the context what is the context and flutter is just a bridge okay so every time you switch Pages or you move with flutter you create other stuff flutter need to understand what happened previously what will happen next and just link everything together and everything is linked with the context okay it's just a bridge so with what happened previously and what is currently happening we have the context of what happened in the screen in the app flutter understand what it can do next so you see navigator.ofcontext dot push because we want to push another page over this one we'll press enter inside we need to put a route so another page for this you use the material page not Material page route and you press enter all right at the end I will add the semicolon okay and I will add also the comma and I will format document okay so it's cleaner the Builder how do we know what we put inside this if you go over the Builder argument you will see that this will take you have the function Builder this will only take your build context inside so the only thing you need to do is put a function build context so I will create a function an empty function and inside I put the context perfect now you can see that if we go inside we need to return something so causing null to be returned we need to return something inside I will say return and what I will return is the other page for this we need to press Ctrl D and create another page so I will say right click I will create a folder this folder will be called pages okay I will press enter and now inside this Pages folder I will right click again and add a new file this file will be called by example the login page so when you create another file make sure that everything is lowercase and you don't put spaces you just put bars like this to separate words and you see Dart so login page.dart it's very important that you put the dart otherwise it will not be a dart file now you can press enter for this one you need to start with the import okay write import and you write you click enter inside you put the material so this one the material Dart you see we have the package that are material dark you absolutely need to put this pretty much every time you need to coat with flutter this will import all the widgets and everything you need to create for if you go inside the main you will see on the top we have the import material it was already right in when we started so in the login page we start by creating a stateless widget so STL you will see you have the option because we have the extension so we use the stateless widget I press enter and now you need to call this class the same name as the file you you don't need to but it's like what I do and it's better for like understanding what happened in the thing it's not required but it's what I do okay you should do it also so you have the login page I will call This One login page if you double click and you press Ctrl D you will select the other one also so you can change both of them at the same time you can write login page but make sure that every word starts with a capital letter not like this one this one use the capital letter on every word but not the the name of the file great inside we will put a scaffold widget because the scaffold is the skeleton and inside the scaffold we'll use the app bar argument with the app bar widget okay just like this very simple after this you can use by example the title argument the text inside because we want to have a text the text argument the text widget will have inside a string the string will be the login page and you can put a constant we are just creating another page all right the last thing we want to do is the center title set as true great so now we can go inside the main and inside domain we can put where we have the error right there in the return we can put the name of the new class we created so inside the login page we have created the login page with the capital letters and you press enter you make sure that you have this semicolon the the bracket and you put the semicolon this is a constant so you had the const you can save the application and now when you press on login boom you go inside another page the login page great you can see just before we end this video when I press on login the the app bar is not the same color this is because we don't use the red accent color we will just change this before we end this video in the login page you have the app bar and you can change the background color to colors.red accent I will press enter and now we save and we can go inside the login page and you see we have the same color the button you will see we all automatically have a button on the leading that will allow us to return on the other page okay so that's why we have a button on this page because it will allow us to remove the page we pushed over and show us the previous page this was how to navigate inside your filter app so next video bye this is your second practical exercise what I want you to do is you can see inside the main we have another elevated button which is register I want you to make sure that when you click on this button you go inside another page which is called the register page all right it's exactly the same thing we just did in the previous video with the login page but I want to make sure that you are able to do it by yourself you will see it might be hard to remember like what you need to do like uh you used to you need to use the Navigator you can see in the login page right in the main page right there you have the navigator that of context that push try and try not to just copy paste try to redo it by yourself inside the unpress function and then try to create another page another file which is called the register page and build everything okay you just have to create the same thing but with the register Pages like instead instead sorry so I see you in the next video with the solution uh I will do it pretty fast and that's it see you in the next one bye in this video I will show you how to navigate through the register page right now so first thing first we will go inside the pages and I will go quite fast because we already did all this so I'll create a new file register register page dot Dart and then inside you will create the import of the material Dart this one and then you can create a state less widget like this and I will write this one the register page then inside the return I will create a scaffold because I want the skeleton of the app I will create a nav bar with the app bar widget so read up our widget and inside the app bar I will create the title which is a text Widget the text will be a register register page and then the center title Center title will be true and finally the color color background color will be will be colors.red accents perfect I will save and now I just need to put a constant like this and register page I will sorry I will close this I will close also the login page and I will go inside the unpress I would create the Navigator Navigator dot of context Dot push and inside we use the material page route like this the Builder I will put my semicolom at the end first my comma because we have two bracket I will save format document the Builder will take a function with a context inside so we create an empty function with the context inside and we will return the new page we created which is the register page I will put my semicolon add my constant like this I would say great now if we press on register we go inside the register page and log in go inside the login page that was the solution of the Practical exercise see you in the next video bye I hope you have learned a lot in this one hour 30 and that's it for today I see you in the next video bye