Flutter Tutorial For Dummies

okay so you want to learn flutter right now and at the end of this video you will have built your first mobile app with vlogger but why should you learn from this video instead of any other video on YouTube I will teach you like if you're five years old you can see all the timestamp in the description first we will install flutter then I will teach you flutter alright so let's learn how to install flutter first You Will Go On flutter.dev and once you're on Florida Dev you will click on get started perfect now we will install this on Windows first so I will click on Windows I will go down and I will click on the button flutter Windows stable.zip click on this and this will install flutter okay so when it's downloaded then you can go inside your downloads in your computer so you go inside your documents download you will see flutter windows and then you will take another finder and this one will be inside your documents in your documents you will create a new folder this one will be called flutter Dev like this enter and you will go inside flutter Dev what you will go what you will do is you will extract this folder inside the flutter Dev so I will right click I will say extract and then I will select the location and the location will be the one inside this file so I will go right there I will click Ctrl C to copy and I will go back right here and Ctrl V to paste the information and then I would say extract inside this folder when it's extracted the next thing you want to do is go back on Google and you want to go on Android Studio like this and when you are on Android Studio you would go on developer.android.com and you click on this you will need to install Android Studio because we want to have access to an emulator and the emulator will just be a phone on your screen that you can work with flutter so you will see your application directly on your computer so let's click on download Android Studio I will go down I will accept all the terms that I have absolutely read and I will click on this when it's downloaded so you will see there will be three things to download we have the flutter SDK that we just downloaded then we have the Android Studio that we are currently downloading and then third we will download the visual studio this is where we will code everything with Flur alright so after waiting forever you can click on Android studio.x so I click on this and this will load Android Studio for the first time you should see a pop-up saying do you want to allow this app to make change on your device I will click yes and now you have this Android setup Studio alright so now you're going to have access to the Android Studio setup on my side I have the previous version of Android Studio so it asked me to uninstall the previous version I will say next and I will say yes so this will install the new version this is what you should have on your screen so you will click next you will click you will make sure that your Android visual studio device is activated so check you will say next then you will say next also you will say Do not create a shortcut because we don't need a shortcut and I would say install now you just have to wait for the installation after this you can click on next and you can say finish so I'll click on finish and this will automatically start Android Studio so at this point you have two choice you can code with Android Studio with flutter or you can code with Visual Studio personally Visual Studio is way better way faster and you have also other stuff that make it way better to use with flutter so we will not code inside this tutorial with Android Studio because it's absolutely BS and the only thing we need from this is the visual device so the emulator I will click on more action and I will click on visual virtual device manager let's click on this and you will see that I already have a device the pixel 6 ap30 so if you don't have any device you will need only create a device and you can follow the step it's pretty simple you just select your device by example pixel 2 you say next and then if you don't have anything downloaded you just download a version of Android you say next and then you name your device if you want you say finish okay this will create a device for you I will click cancel because we already have a device that's great so we have the device with Android Studio the next thing we need to do is you can close Android Studio everything is fine you can go on Google and write Visual Studio code you will click on the first link and then you can click on download for Windows alright so this will download visual studio code I will see you when the download is over okay so now you will click on vs code user setup and this will trigger the installation of Visual Studio I will click on I accept the agreements I will say next this will set up everything inside this folder I will say next in the folder already exists this is because I already have set up visual studio code so I will just say yes because this will override the older version and you probably don't have this option next you will see we just say next and then you can set up your stuff so ad path to require shell that's important make sure that you have this and that's pretty much it I don't need a desktop icon so we'll just say next I will say install all right so you see the the option just before um installed to the Shell we will need to do this um manually with flutter later and I will show you how to do this all right so we have set up visual studio I will click on complete so this is your Visual Studio code okay so now that we have installed pretty much everything you will need to write a terminal inside your windows and in the terminal you will write flutter doctor like this and you will see that flutter is not recognized as an internal or external command this is because the path is not added in your computer and you need to add the path of the file that we have downloaded before you remember inside the flutter Dev flutter and uh yeah inside this we need to add the path in our computer we will see it's very simple you go inside your search and you write environment variable environment so it did the system environment variable you click on this this will open this pop-up so what you will do is you will save environment variable you will click on this and then you will go on path you see this one you have the path and you will edit so that's perfect now you have all the path allowed allowed in your computer and we will add the back of the flutter document we have downloaded so you see we have the inside your document if you have flutter Dev and flutter you will go inside bin and right there what you can do is copy this entire path so we'll say Ctrl C and I will go inside my environment variable I will click on new so I will add a new one make sure that you put the kuma like this because if your name have by example a space or anything it will not work so make sure that you have the two command like this and I will paste so you see it's user my user document flutter Dev flutter and Bin make sure you have the same thing it's very important otherwise it will not work then you press on enter great I will click ok then I will click OK and I will click OK again now if we go back inside our terminal we will try it again so you can you can click the the up Arrow it will get this the flutter doctor or you can rewrite it again so flutter dot doctor I will click enter you see it does it doesn't work so what we'll do is we will close the terminal reopen a new terminal so see the common prompt and inside you will write flutter doctor again and you will see that this time it will work because we have just added the environment the environment variable for flutter and you should see that everything is fine you should have all the check mark if you see a problem with the Android licenses because I have already accepted the licenses but maybe you will need to agree them so what you will do is you will say flutter doctor and you will write um Android licenses and you need to be exactly the same okay and you press enter this will allow you to accept all the licenses for Android you will see that I have already accept all the licenses the only thing you will have to do is press uh y for yes multiple times so yes yes yes yes enter and that's it so when everything is complete then we can start our flutter application if you have a problem with flutter so if the command is not working this is because your flutter and variant variable is not working so try it again make sure that you have the same thing as I do and it will work all right so now it's time to create our first flutter project right now let's do this I will go in the terminal once again because this is in my opinion the best way to create a flutter project and it will save you a lot of time in the future so what we'll do is we need to navigate inside the document where all our project will be in this document will be inside your flutter Dev so you click on flutter Dev you see this is the flutter which is the installation of flutter you will create a new folder this one will be called flutter projects and you can put exactly like this so it will be better later so I will click enter and you will write CD because right now we are inside your our user so I would say CD documents and I will press enter you see that now we are inside the document folder it's very simple CD is just to navigate inside something from the terminal next you will see again CD and you will see flutter Dev press enter now we are inside this folder and you will do the same thing for flutter projects like this press enter and now we are inside this folder the flutter project we can create our flutter project inside this one so to create one you will need to write flutter create so what I will do is I will create a PDF with all the commands you need all the cheat sheet and this will be inside okay how to create a flutter project because sometimes we can forget how to do it so what I will do is I will write org because this is the name of your organization you will put your website in Reverse so come dot fluttermap if you don't have a website you can write com.example or something like that and then you will name uh you would put the name of your application I will write my first app and I will press enter this will create a project inside our folder flutter projects you see it just works we have our first loader project now let's go inside visual studio and what we'll do is we'll say file open folder you will go inside your documents inside the flutter Dev inside the flutter projects and you will click on my first app you can down you can now click on select folder all right so this is our flutter app and you will need to go inside the Library so lib in the main dot Dart click on this this is the flutter project that flutter will automatically create for you okay so what you will need to have before we run everything is you need to install five extensions so you can see that on my screen I have icons before each folder and you can see also that my code is working because I have the flutter extension to have this you will need to go inside your extensions and make sure that you have the the five extension like this awesome flutter snippet better comments Dart fluttering material icon team if you don't know how to install an extension you just go inside the search extensions and you ride by simple flutter and you will see that when you have flutter you can just click on install you have this one flutter.code you click install and that's about it so you need to have these five extensions flutter material icon team this one will have the folders before the the icons before each folders and then you will need the better comments this will be used to have comments inside your app but it will be just better and then you have the flutter awesome snippet this one is used because it will generate automatically big chunks of code so we will save a lot of time while coding the flutter and dart extension this is just required for flutter so you will need them also install all of these and when you're ready you can go back inside the Explorer page and you can go inside the main.dart you can click on library main.dart but how do we run this okay so to run this thing I will put this on the side and now what I will do is I will open the emulator you can click on the bottom you see we have Windows but you can click on the bottom and you will see that you will have your emulators right here so what I will do is I will click on start the pixel 6 and I will not use the the offline emulator but the normal emulator let's click on this and this will launch the pixel 6 inside your computer and it might take a little while if it's the first time you run it so what I will do is I will um I will just cut when the emulator is ready okay so I see you in a couple of minutes all right so the emulator has started what I will do next is I will click on the button on the top Corner make sure that you are inside the library main.dart and you will have this little play button you click on this and this will launch the application inside your emulator you see it's currently loading this might take like 2-3 minutes so I see you again in two three minutes okay so the application has been started in the computer you can see you can click on the plus sign and this will count in the application it's a really really basic app but um it's the first one we just created so from there we will create our application so that was all the installation for flutter The Next Step will be to put this application inside your com inside your physical form so that's the next step I will show you and then we will be able to start coding with flutter okay so I just connected my phone with the cable inside my computer okay you can see and then you will have this little pop-up Hollow USB debugging you would say always alone for this computer and allo if you don't have this pop-up maybe it's because you need to go inside your settings and inside the setting of your phone I hope you can see everything you will see you have the developer option if this is not activated you will need to activate this thing so you will need to go inside the about the phone and the software information if you click multiple time on the build number you will see that eventually this will trigger the developer mode great now you can go inside the developer options and inside this one if you go down you will see that you have the you SB debugame so make sure that this oops so make sure that this is activated allow USB debugging okay and that's great now your computer your flutter app will be able to be installed inside your physical phone so make sure that you have this activated otherwise it will not work great so now what we can do is I will put this on the side I will stop to run the flutter app inside the emulator and we will run the flutter app inside our physical phone let's do this right now what I will do is I will click on the bottom you see that instead of using the pixel 6 I will use my phone so it's the SMG whatever so I click on this make sure that it's a it's available it's connected and then you will click on the play button like this so this time instead of running inside the pixel 6 it will run on my physical phone so let's wait like two minutes and then I will show you when the application has been launched you see it's starting right now boom we have the application on our physical phone also you can click the plus button and you can see that the number will change that's how to launch your application your photo app inside a physical phone for this tutorial on flutter we will do everything on the emulator if you prefer you can keep your phone but I will do it on the emulator because it will be way easier to record and show you how it works and let's start to learn flutter and create our first application together okay so it's time to install flutter but for Mac for this you will go on flutter.dev and then you will click on get started then you will select the Mac OS so click on this you will go down and you will find two options so two blue buttons though this one is for the Intel chip and this one is for the Apple silicon chip so I know that my Mac has this so I will select this one if your Mac have an Intel you select this the other one the Intel one so I will save this inside my downloads and then I will wait and I will see you back when the download is over okay so now this has been downloaded so what I will do is I will open the finders I will move this on the side and I will create a new folder but I need to create this one inside the home folder so you will go inside your documents then you will press command and the up Arrow like this this will bring you inside the name of your computer my computer is named Mac then I will press command up again the up arrow and you will see you have the home folder if you want to access this one at at any time you can just take this one and drag it on the side like this now you have access directly pretty quick next thing we need to create a folder inside this so I will right click and I will say new folder this one will be called flutter Dev you press OK and then inside this one we will drag and drop the zip folder that we just received from flutter so this I will drag and drop inside like this great now what you can do is you can double click on it and this will automatically um extract the zip file okay so you should have this flutter folder now what you can do is you can click there and you can move to trash the zip file we don't need this anymore all right so now we have downloaded flutter inside our Mac but if we want our Mac to use flutter and be able to use it at any time we need to add it inside the path of the computer I will show you how to do this so you go back inside the website and you will scroll down you will find update your path this so I will click on this and it will bring me at the middle of the page and now you can see that we need to understand which shell we have first so what I will do is I will open a terminal I will press command space I will write terminal and I would press enter inside this one I will write this command the echo dollar sign shell and you would press enter if you are like me and you have a shell zsh this mean that you have this thing you can edit inside this the zshrc but if your it's a bash profile then you will need to write something else okay I will show you right now what we need to do so what you need to do is to write them with the wave sign slash Dot and it at the end you can write by Example The z s h r c okay you need to make sure that you have a space between vim and the and the sign and you can write the rest of this so you can see zshrc but if you don't have the Zs zsh shell and you have the other one you need to write bash profile Bash profile like this and then you will press enter so because I have this zsh I will write zshrc and I will press enter great now we can add the path of flutter inside this to edit this file you will need to press I so now you can see we have the insert we can insert stuff inside after this we will need to copy this information so this one you will copy this and then you will go inside the terminal and you will paste it but we still have one thing to do so you can see that if I delete yeah I can edit this file what I will do is I will remove everything that was inside the bracket I will just keep the semicolon and the dash like this and we need to put some pad the path of the file that we have right there so you will click on your Mac okay the home file inside the home you can see that we have the flutter Dev so we need to tell this we need to tell this to the computer so we'll say at the home you need to write exactly the same head to home then you put the dash you say the flutter Dev flutter Dev document and then you put another Dash we need to go inside this one we need to direct inside flutter so we'll say flutter then you go inside and you will see that we have the bin folder and that's perfect because this is what we have we go inside the home we go inside the flutter Dev folder then flutter then bin and with this everything is fine your path is great what you can do now is press Escape and now you can press semicolon W Cube this will write the information inside the file and it will save and quit so I will press enter like this if you want to verify if everything has worked fine you can press the up Arrow to redo the command Vim dot the the shell and I will press enter you see I have the export everything is fine make sure you have the good thing otherwise it will not work I will quit this by doing the semicolon WQ again and press enter great so now we have access to flutter I will quit this terminal and I will open a new one so I'll press command space terminal and inside I will write flutter doctor and you press enter if this comment doesn't work for you it means that your path is wrong so make sure that you do it again and try to like do the same thing as I I just done okay and eventually it will work like this so what I will do is I will go inside the App Store and I will write xcode I will press enter what you need is this one you need to get this thing so you will press get and install on the xcode when it's installed then you can press on open so I will click on open right now so you click on this file you click on this you will see xcode on the top and then you will press on open developer tool and you will click on simulator this will open a simulator inside your Mac okay so I have closed xcode and only keep the simulator on the Mac after this what you need to do is to go on Google again and you will search for Android Studio I will go down I will click on the link and you will need to install so I will say download Android Studio you accept the licenses and you download with either Intel chip or the mac Apple chip I do have the mac Apple chip so I will click on this and I already installed Android Studio so I will not click on this but you just have to install it and you run the setup and you just say next next next and finish and then you will have Android Studio the goal of Android Studio why we download this is because we will have the Android SDK and we will need this to run flutter alright so once you have the Android Studio installed and set up um so you'll see it's very simple to set up and everything otherwise you can watch on YouTube and find a small tutorial I'm sure about that after this you will need to have the visual studio also so you will write Visual Studio code and you will click on the link Visual Studio code this is where we will code flutter because it's way better than Android Studio because yeah it's faster and also you will have some extension that will allow you to code faster so you will click on download Mac universal and then you will see you will have a download page so you can just say save and you double click on this thing and it will run the setup for visual studio again if you are not able to set up visual studio code you can just find a tutorial on YouTube great so once you have all of this you will open your Visual Studio code so I will do this right now and you need to have five different extensions after this we will be able to run the application on the simulator so I will put this like that and we'll go inside the extensions this little logo do you need five different extensions the awesome flutter snippet the better comments Dart flutter and material icon theme you see I have multiple extensions but you don't need all of them you just need the five I told you okay and if you want to search an extension you just go in the search bar you say flutter and then you will see it's this one you will just install it okay so you see it's already installed you just click on install and that's it after this once you have this you will need to create your project with flutter so we will open the terminal we will say command space terminal and now we need to navigate inside the file that we have inside the Mac so you see we have the Mac and then inside this one we have the flutter Dev we created in flutter inside this you create a new file new folder and you write this one flutter project like this so every time you create a project you go inside this and you create a new project how do you navigate and create a new flutter project you will say inside the terminal you will say CD and then you will write flutter Dev this is because we are inside the home and then we can navigate so we are inside the mac and now we can navigate inside flutter Dev we will do CD again and we will navigate inside flutter projects great so now we are inside this one after this you can write and create your flutter project for this you need to remember this comment I would also put it inside the PDF the cheat sheet in the description of this video so you can get this one also so you just write flutter create and then you say dash dash org and you say your website in Reverse com Dot fluttermap if you don't have a website you can put com dot example or anything so we'll see flutter map and then you will write the name of your application we will call this one my first app but it can be anything and then you just press enter and this will generate and create a flutter project you can see we have it right there you can close the terminal and we just need to open this project from Visual Studio code so I will close this and I will say I will click on this I will say file I will say open I will go inside my Mac inside flutter Dev flutter project and I will click on my first app and open so when you open the project you will click on lib for library and you will click on main.dart this is your project okay for now we will just run this basic project but after inside this video I will show you step by step how to learn flutter so what you need to do is you click right there you will see iPhone 11 if it's not selected then you will select your emulator which for me it's the iPhone 11 so I will click on this and then I will click on this play button so it will start debugging so this will run the flutter application inside this simulator so let's wait a little bit and I will see you when the application has been launched great so the application just started you see you can click on this and it's just a counter so that's about it how to start flutter or install flutter if you have any question let me know in the comments and so it's time to learn flutter so at the end of this video you will be able to build this application you will click on the button login and this will bring you to the home page inside this one will have kind of a Blog a Blog about money so you see we have a couple of button on the top and then we have three different blog you can click by example on the first one how to get rich and this will bring you to another page you see it's very simple I will go back and then you can see that we have also a dryer on the side that you can click log out to bring back inside the login page this is what we will build and I will show you step by step how to do this alright so let's start learning flutter right now what I've done is I created a note everything I want to show you inside this video and also I have created a cheat sheet for you so it's easier for you to understand and remember all the concepts that we will learn in this video keep in mind that at the end we will have build our first letter app together alright so if you want the cheat sheet you can have it it's available in the description so you can follow along so this is all that we will learn let's start this right now first thing first we are inside the main.dart you can see that I have the notes the dart this is just all my notes you it's normal if you don't have it perfect so in the main.dart you should already have your application triggered which mean you have pressed display button and the application is currently working on your computer or on the physical phone at this point what you need to do is we will just remove all the comments inside the code okay so this is all the comments when you have to slash like this it means it's a comment so let's delete this and also we'll delete all that is after the line 21. all this thing will remove it let's start from absolute scratch you see the home home is the application so we will also delete this and create our home our our home by ourselves so what we will do is first thing first I will bring the cheat sheet okay and what it will do is at the end I have something called the stateless or state full widget we will start with stateless stateless mean that the screen will not refresh so when the user does action on the screen the screen does not refresh doesn't need to refresh but if it's if it's a stateful then the screen need to refresh for example the the user click on something and the screen change that will be a stateful all right we'll bring this back on the side and we will start by creating a stateless widget okay so if I write STL I will see two options flutter stateless widget or flutter State full widget it if you don't see this option is because you don't have all the extensions that I have previously in this video I've talked about five is five extension that I have so make sure that you have them so I will click on this stateless widget or press enter and this will automatically generate chunks of code so this chunks of code so the my widget what I will do is I will press Ctrl D to select the next one also and I will call this the login page so make sure that you do exactly the same inside this video in the home what it will do is we will call the login page with the bracket make sure you have the bracket you can see that if we go over login page it says prefer a const with constant a constants just mean that it will never change for flutter so it will be something that will never change so we can just say counts before and this is because when flutter will build the application and if it need to refresh the screen if it's a constant flutter will know that it doesn't need to refresh this thing because it's the constant so that's about it and now let's restart the application so you have two button we have the HP load and the restart the restart will restart the entire app every time and the Earth build will just refresh the screen if we made changes so usually if you just press Ctrl save it will it will auto reload at the same time okay so now you have a black screen the thing is we just display a container an empty container is just an empty box with nothing inside so instead we will use a widget called scaffold I will go back inside my node and we will check everything we've done okay so how to learn flutter we've started this create the login page we just did it I will show you this Command right after the cheat sheet we've done it let's do the scaffold okay I will go there and I will write the scaffold widget so you you start by writing s scaffold with the capital letter because each widget are capital letter I will click on it and now you see we need to put a constant and if I save Ctrl s this will automatically at reload and we have now a white screen let me show you a little bit more now you will write an argument inside which we call the a bar I will press Ctrl space and you will see I have the app bar I will click enter the up bar will be the top okay so the scaffold is the skeleton of the app the app bar is the top of the the application the body will be the center and the bottom navigation bar will be the bottom so now we work on the app bar for this we need to put a nap bar widget inside like this with the bracket you can see that we have now an error so I will go over and you will see that if you scroll down the Constructor is not a constant so now we need to remove the content this will happen often because just the scaffold widget is a constant but with the app bar it's not a constant anymore so if I say now you see that we have a NAB bar on the top okay so with flutter I will bring back the cheat sheet with flutter is very simple if we go on the top you will see that we have the key concept bladder is widget inside widget so you will see just a stack of widget one over there and when you stack one after the other at the end you will have a complete application so first you need to add a widget that's what we've done with the scaffold and the widget always start with a capital letter okay and the arguments always start with a lowercase letter so you can see the up bar is an argument and the up bar like this is a widget okay so make sure you remember this the key concept so now you see we add a widget the scaffold an argument in the widget the app bar and then we use the control space to show all the arguments and then we add a widget in the argument the a bar so this is the key concept you can remember this with the cheat sheet if you want so now what we will do is inside the up bar we need another argument so we say control space to have all the options and then there is one argument called it the title so if you press enter and you have the title you will see that each arguments are used the widget inside with the two point like this make sure you have this the title will use a widget called the text widget the one with the bracket inside if you want to know what you need to put inside a widget you just go over the widget with your mouse and you will see that the text widget will require a string inside a string is just a simple text so we put the comma and we write by example flutter or we can say blog map blog okay I will say welcome instead sorry so welcome and now I need to put a constant before because the text is a constant I will save now you see we have welcome okay after this what we can do is we can find another argument call it the center title if you go over the argument you will see that this required a Boolean a Boolean is a true or false value so we'll say this is true and we will save when we save this will automatically at reload you can save by using Ctrl s and now we have the title in the center if you use Mac Mac already put the title in the center so sometimes you will see some differences all right the next thing we can do is you see that you have uh everything everything seems pretty clean but what if you remove one comma like this and you say and or you can format document format document would be alt shift f so if I bring back the um the cheat sheet you will see that you have all the commands right there so alt shift F format document this will just put your document clean or not so if you don't have the comma this will clean it like this so make sure that you always put your comma everywhere so now if you format document it looks way better you can also format document by clicking right click and format document so you see the comment next um what we will do is we'll go back in the notes I want to show you about the Ctrl B Ctrl G so if you press Ctrl B this will just remove the sidebar like this so you will see I will use it a lot in this video so now you can see better the code and the Ctrl G this will bring the terminal so we will use this later in this course also the terminal so if you want to have more space and just code you can use Ctrl B Control G all right all the commands are inside this also so you will see you would have the control B Ctrl G okay in the cheat sheet so let's move on we have done the Ctrl V we have talked about the cheat sheet that's good you can have it in the description and the format document we have talked about it also this was with the comma before we have talked about the text widget and now right click to refactor we will do this with the center widget right now I will bring this was good I will take the main and what I want to do is to put a text in the center of the app let's do this what I would say I will say buddy and the body will have the so the body it's an argument make sure you understand this so I press enter control space and I have the body option this is the center of the app so I will say text and inside the text widget which starts with a capital letter we will put by example welcome also I will put my constant before and Save now you see my the text is inside the body but it's not in the center so if you want to put it in the center you can right click on text and then you can say refactor control shift error and then you have multiple option you can wrap it with a center widget a builder column a container or just wrap it with another widget we will use the center widget so I will click right click and now I will put this as a constant and remove the other constant I will save now the text is in the center okay but you can see that we have two bracket one after the other so if we put the comma and we format document alt shift F now it's better to look at okay the code is just better is formatted so you see format document all right the next thing will be we have done the right click refactor Center you can use a column a column will be used to put two things one after the other so let's say you want to add another text how do you do this right you are inside the Buddy you are inside the center widget and the text so you don't have place to put the other welcome maybe you think okay I could do something like this another child but it doesn't work not with flutter you need to put a column widget and in the column widget you will be able to put a list of widget so what it will do is I will right click on text and I will say refactor and I will wrap with a column this will automatically place everything you see that the column don't want this to be a constant so I will remove the constant and then you will see that we can put the constant before the list like this I will save now the text is on the top this is because the column will start from the top till the end now you can add multiple text inside and save you will see will have multiple so let's save you will see you will have multiple things okay so the next thing I want to show you is we have done this we have added more text maybe we could talk about um how to add a size box let's see let's say you have two texts and you want to add some space between both of them so you could use the size that box widget the argument could be a height and the height if you go over you will see that this take a double in a double is uh like this 20.0 and then I will put my comma so you see we have a problem if I go over and I scroll expect to find the comma so I put the comma and I save now I have a space in the screen if you don't remember how to solve bugs any errors we have the solution solve errors right there if you have a red underline this is what we had it says like add expected to find the comma so just just follow along okay so you put your mouse over the widget a box will appear you scroll down and you read the error this is how you solve your type of error you will have other type of error later in this video all right so next thing we want to do is maybe we can change the font of the text let's do this first I will go inside the text I will change the style so the style is an argument so flutter is always widget inside widget and if you want to add another widget you need to put an argument so Style and this will use the text style widget inside this one you could change by example the color so you can see colors that red oops I will use color argument and colors dot red I will put my comma format document save and now the welcome is red we can change also the font size let's say 55 and we can change on so the fund weight which will be the fund weight dot bold all right so I've draw a lot of things at you right now but I just want to repeat inside the cheat sheet if you bring this and you start flutter you always like have your create a new flutter project this is how to do it next you have the key concept add a widget add an argument and add another widget it's very simple so you see by example we add a widget capital letter argument lowercase letter two point another widget another argument another widget and that's it forever until you have your complete application okay we have watched a lot of these things this is all the comments we will use in this video and then we have all the basic widgets we will watch so this all the basic widgets will learn in this video also we have done a couple of them like all of these after this if you want to just see all the widget available you can watch this video uh you don't have the link but you can share you can search on YouTube and you have also my top 70 widget if you want because we won't be able to watch every widget in this video so if you want to create a variable we'll do this later Navigator will do this later solver we have done the first one and then set let's reject we have to talk about it a little bit send argument we will do this later okay all right so we have done done a little recap of the cheat sheet after this what we want to do is to change the color of the background so the background will be inside this scaffold widget so you see this is a scaffold widget and if you want to change the background how you do it first you need to understand you need to change something inside this scaffold which which need which means you need to use an argument and then you need to use a widget so the argument we use when we press Ctrl space and we say you see it's already there background color I would click on this and if by example you're not sure what it it means you can just click on the little arrow like this you can use the arrow to navigate and click on this Arrow to have more information about the argument so you see the color of the widget under the entire scaffold I will re-click on it to remove the box and click on background color this if you if you go over you will need to have a color widget for this you can just use colors dot something and then you will say red you have all the options for example if you don't have the option you press Ctrl space all the options of colors are there I will use red like this and save now you see the background is all red we will need to change the color of the welcome by white like this and I will click also on this thing just to have less bugs we click on the white and save now we have the welcome okay so if we want to have the application I show you at the beginning we will need to remove the app bar but we will reuse it later in the next in the next page so make sure you understand how to create one because it will be your job to do it by yourself I will still show you a turban so try to remember let's remove this one and Save great the next thing you want to do is we want to change the we want to add another text so we have the scaffold uh yeah we have the scaffold the center the text we will remove the sized box it was just for learning purposes and we will copy this text and change this one Boom Like This okay we will replace this to two map plug or you can put whatever you want and then we will change the size for 35 then we will change the bolt is good and this will be white 70 which mean it will have a little bit less opacity okay the next thing you want to do is we want to add the sized box I just removed so what I will do is I will press Ctrl Z until I find it oops like this I will copy this and I will do Ctrl shift Z to reboot what I had before it's a little tricks right and I will put my sighted box I will remove the comma because if I for format document you will see it look just better after this what we want is how to put an image inside the application but for this you will say image.asset and then you can put the name of your asset but maybe we could start with an image from the internet so that's what I will do I will write Einstein like this and bring this page on the side image let's try this very simple I'll click on this I will right click and say open in a new tab now you can see that this is pretty messy but it ends up with the gpg so that's great I will select all Ctrl a control C and then we can close this I will replace the asset for network and the source will be the URL we have just copied and at the end I will put my semicolon or I will just just let's see what happened the problem is um so if I go over the value can't is it later okay so we need to remove the constant so you see sometimes we'll have error with flutter you just go over the problem so that was the error type one like this where it is red underline so if you have this you just put your mouse over the widget a box will appear you scroll down at the bottom and you read the error okay bring this right there so this is what I've done I just went over scroll down then you see the value in a const list must be constant try removing the keyword const so I've I've just went at the top in the list I've removed the const and now you see that we have other stuff we just need to put const before the text before the other text and before the size of box like this now if you go I go at the end I can put my comma like this format document save and now we have the image on the application but for this example I want to put image from the assets so we need to go inside our application or Explorer so you can use the Ctrl B if you want and inside I will right click at the end and I will say new folder this one will be called image okay we'll press enter I have a list of image that I want to use so you can see this is a document I have the cheat sheet which we are currently using and multiple image that I will use inside this video so where did I found all this image you can find it in icon8.com this is where I find all my image so by example you will say illustration and you will say I don't know um welcome insect you will see you'll have multiple animations multiple image that you can use I think I've used something like this but if you want to have the same image you could find what I've done like inside this this is the same image I have so I will close this you can use icons8.com you can use your own image or try to find the same image I had I have so I take all of these bring drag and drop inside image boom all right so we have all our image the next thing we need to do is we need to activate those image inside flutter so I will go inside the pubspec.com and inside this one you'll see it's a long file so you will scroll pretty much at the end until you find assets okay what you will do is you will put your cursor before the A and delete twice one two make sure it's exactly the same otherwise it will not work next you will put after the hashtag you will right click once and delete twice one two all right so now you will just delete the this and keep the image Dash like this and you you can click on the get packages right so now we should have access to the file the folder image inside our project so if we restart the application I will close the pub spec and we will use the image dot asset this time so let me delete this and instead I will use we can see there is a lot of mess but it will all solve after so image that assets I will format document save so you will see you should have the same thing after this I will put my bracket my comma whatever quotation mark and then I will say login or I will see image inside the image folder with the s slash I would say login.png because this is my image login.png this one so now if I save it works but if it doesn't Works what you have to do is if you have like a red X just close the application stop it and relaunch the application and it should work so now we have an image from the asset inside our app so I will go inside the note what have we done we have done about the size of box that's great the add image I said we have done it the image has set unsighted bugs that's good now we need to create elevated buttons so I will go inside the main and what I will do is first you see that everything is on the top and this is because the column starts from the top till the end but we can change this to make sure that it start in the middle so what I will do is I will say main axis alignment okay this is an argument inside the widget main axis alignment and inside you put the widget main axis alignment that's Center and now you can see maybe you wonder why do you need to put the center like this and also the widget Center well you're right before we didn't have the column inside so the text was in the center but now you could remove the center so I will right click I would say refactor this is a comment in available inside the cheat sheet refactor and I'll say remove this widget and now if we save you will see that oh this change a little bit because the column will take just as much size as it needs so the column you can see it just stays this much size maybe so don't don't code right now I will just show you what I meant okay I will refactor this with a container and I will change the color with an argument colors that white and I will save you see this is the column and right now it takes as much size as it need so that's why we needed to put the center because this will put the column so if I I press right click refactor and in a center and save this will put the column inside the center okay and the main axis alignment this one Center will put it in the center from the vertical axis now I will remove my container I will click right click refactor remove this widget and Save this is what you should have on the screen okay next we need to add some buttons so I will go down after the image asset and I will add another sized box so Ctrl C Ctrl V okay save and now we will add an elevated on our widget elevated button like this the elevated button required two arguments you absolutely need to have them otherwise if you remove them you'll see boom it doesn't work we have a problem because we go over it's the error type one you scroll down and you see the parameter unpressed and child is required so we'll see Ctrl Z and the unpress if you go over you see take a function so we'll put an empty function inside for now this is an empty function okay and then the child if you go over you see that this required a widget and the widget will be a text widget that we have already learned and this one will be login you can see that we need to put a constant before again a constant is just something that will never change because the login the text login will never change inside the widget text if we format document you see that we have a problem we don't have the comma between both uh brackets so I would put my comma format document save now we have a button login but how do we change the color of this button so you will need to go inside the arguments of the elevated button and write Style and inside you can repeat the name of the widget so elevated button dot style from and inside you have for example the background color this is an argument and you use the widget colors dot red we'll use the Red X I will use white the button will be white let's say now the button is white but the text is also white so we can see it so I will put my comma and I will write foreground color this will use the widget colors Dot red and if we put my the comma and save now we can see the button login let's try to change the size of this button so it's still inside the style argument inside the elevated button that start from you can change this for the minimum size this one will use the widget size and you can say by example inside the size if you go over you see that you need to put a double width and a double height this will be the the width of the the button and the height so we'll say 340 I will put this as a constant and oops constant and Save perfect we have our button with different size if we format document you will see that this will go next to this one because we don't have a comma I will format document and personally I don't like it so I will put my comma format document again and Save now your challenge is to create another elevated button right under this one okay we have done a lot together your challenge is to put another elevated button right under this one and write the text require a register inside okay but the button will be red and the text will be white okay so try it yourself otherwise I will show you right now so if you have not pose I will do it now with you so I will just put my comma copy this and paste it right under because I will save time and as a programmer we are lazy so I will save and I just need to change the color for red accent this is the background color and the foreground color which is the text I will say this is white I will save and now we have our button we just need to change the text inside register and Save great so this was our first screen our login screen there is two things I want to show you okay first we can change the we can remove the debug Banner okay we will go on the top and this is inside the material app we have not talked about it yet and this is the time so what I would do is the material app will control pretty much everything that is outside the scaffold by example the theme of the color of the app or the debug Banner at the top so if we go inside the material app and we say show debug show check mode Banner okay and you say false because the debug Banner will be show if we run the application in debug mode and this is what we are currently doing so the now we don't have the banner anymore and another thing I want to show you is um you don't have to code for this part just watch I will add back the app bar with the app bar widget insight you can see that the up bar is blue this is because the application with the the primary color of the application is blue but if we change this for by example I don't know purple and save you will see it's now purple so what we can do is we can just say the color of the application will be overall red so I will save and now this is what we have we don't need to have the up bar we just need to have the primary Swatch to Red so I will remove the app bar I created and Save so this was the login page now let's go back in the node you see that we have created two elevated button and that's great so the next step is if you have watched till this point so it's been like maybe I don't know 30 minutes make sure that you commit to learn flutter this is the most important step if you say in the comment I commit to learn flutter right now inside this video and watch this video then you will most likely do it so that's what I ask you to do and it's the best thing you can do if you really really want to learn flutter and build your own apps next thing we need to create a home page so you see we have quite a lot of things to do yet what it will do is we will create the home page so when we click on this login button we will go inside the home page how do we do this first I will queue inside the Library I will right click and I will say new file and I will call this one ohm page.dart make sure that you have no capital letter and no space okay we'll press enter and now inside this one I will create I will start by importing the material so import like this import M this is the the shortcut for importing the material and if you go inside the main at the top we already have the import material this is to have access to all the flutter widgets so it's important to have it after this you can say sdl we have already done this this is to create a stateless widget okay here we go we click on this and you will call this one the home page after this what we will do is for now we will I think we will keep it like that okay because I want you to have another practical exercise after but what I will show you is how to click on this button and navigate inside this page so we'll go inside the main and I will show you about the Navigator okay so we have created the home page the scaffold in the above this will be your task with a practical exercise and the Navigator I will show you right now let's go back inside the main and inside this one I will scroll down until I found the elevated button with the login when we press on it this will trigger an empty function for now but what we can do is we can navigate into another page so Navigator Dot of context and if you don't remember like what you need to write because this one it will be pretty complex for now you can just copy paste it inside the cheat sheet you will see that we have the Navigator right here how to change page so you have three options you can push a new page this will add a page uh this will add a page over the one you currently have you can push and replace so this will replace the page you currently have or you can pop which mean it will remove the page so this is the code you need to write to add a new page to push a new page over the one you currently have so if you forget because I know this one is hard to remember and I had the hard time to remember this one when I started you just have it right there and you can just copy paste eventually with time you will remember it all right so I will put this on the side and I will say navigator.ofcontext dot push this will push another page over the one you currently have and the route you need to write a widget material page route and the Builder if you go over you can see that the Builder will require a function build context so I will create a function because it requires a function and inside you need to put the context so it says the build context watch this build context context so we'll just write build context so you can understand better build context and this is a context okay so it just required this and inside the function this will return the other page so we'll see return and we will put the new page we created just before the home page home page with the bracket you put your semicolon you put your constant before and at the end of this you can see that after the push we have the bracket you put your semicolon format document save and that's great you can see that we have three bracket one after the other without comma so I'll put comma and comma format document save so as I told you this one is pretty hard to remember so make sure that you have the cheat sheet and just copy paste this part because it's hard it's quite hard to remember just understand that push is to push another page over so if I save and I press on login you will see that now we have a black screen and this is because we use inside the home page only a container we don't have this scaffold and we don't have the a bar neither so your task your practical exercise because the best way to learn how to code is to actually code by ourselves your task is to First create a scaffold widget and inside you will put a nav bar so try to do it by yourself you can refer to the cheat sheet if you want at the top I have an example like this and this is what you have to do try to do it by yourself I know it's pretty simple maybe but do it by yourself otherwise we'll do it together right now so I give you like two seconds all right so let's do this now I will say scaffold and then inside I will put the up bar argument and the app bar widget so widget starts with capital argument with lowercase if we save now you see we have a scaffold with diabar we have automatically the arrow to go back in the previous page this is because Twitter will give you automatically the option to go back in the previous page if you want to remove this you can say leading uh it's inside the up bar I think so automatically imply the name you can say false and save so now if you click on login you don't have the option anymore okay I will remove this I will format documents save and restart the app okay so that's great I will go inside the notes so we have none the scaffold next we have the app bar Navigator we have to learn about it so it's time to create a column and a row and elevated button okay let's go inside the home page and inside this one we start with a column so instead of having an empty buddy we will create a body argument and inside we will say I would put a color I would say and now we can click on login just to see what happened on the screen okay so we have the column what we need to put inside is multiple children okay so instead we will go inside and we will put as the argument the children press enter and now you have the possibility to put multiple widget one after the other inside the first one we will put will be a row widget okay this is the same thing as the column but instead of being vertical it is horizontal so we will be able to put multiple buttons inside the first button will be the elevated one we will say also children and inside you will put the elevated button so try to do it by yourself try to create an elevated button um inside this rope because we have already done we have already done it inside the main.dark so try to do it by yourself it's another practical exercise otherwise we will do it together right now so I will say elevated elevated button the unpressed function will be an empty function and inside the child I will say a text widget and the text inside will be I don't know it can be um money whatever I don't know and we put the comma to separate everything put the constant format document save you can see that after my row I don't have a comma so I will add it I usually try to put my comma everywhere okay the next thing we can do is we can add other buttons so we will do this right after but we will change the style of this one first so I will say Style and I will repeat the elevated button dot style from and inside we can change the background color we have already done this so colors the red accent and it will change the foreground color this one will be colors dot White perfect you can see that we have a problem and if we go over this says the sort child property last in the widget instance so we need to put the child argument at the end so I will just put this at the end for my document and Save okay after this we could change the shape of the button also this is another thing I want to show you you can change the shapes with the shape argument and say um Stadium border put the comma and put the constant and Save now you see the button instead of beating beings like Square it's more like rounded corner great so we have our first button we will add a couple more button like this um I will call this how to make money uh online perfect so it's a big button so now if we add three buttons like this what up save you see that we have an error and the error is because we don't have enough place on the screen so what you could do is inside my node uh I want to show you how to solve the error and then we will replace this with a wrap so I will go back inside the home you see that we don't have the error on the on the widget like inside the cheat sheet we have the solution I will go inside my where it is solve error so type 1 is if we see the error type 2 is if we have the error on the screen so sometimes you will see the error with the red screen but now we just have the error with the black and yellow error it can happen also so read the error on the screen check in the terminal for more information and then the top link will show you where the error is from all right so let's do this we will open the terminal with Ctrl G and you can see that we have an error if we go on the top here we go a render overflow by I don't know pixel on the right so I will click on this this is the link that will show you where the error is and you can see it's the row widget that was pretty obvious for this one but sometimes it's not obvious and now how do we change this we could replace the raw widget with the wrap widget so if I save you will see that the wrap widget will make sure that if it go over the screen size then it will bring the next widget right under so if you have multiple of them it will make sure that all of them are right under okay so the next thing I want to do is I will say by example money I will change the name for this let me say money Bitcoin I would say I don't know stock market stock market and I just want to have a couple of buttons two two more buttons Maybe up and up I will call this one um house Market and the last one we'll call this uh diamond the diamond hands and save great so we have all our buttons okay but we would like to have some space between each buttons so for this you can go inside your wrap widget and you can say the um well what it is spacing I think yeah spacing spacing 20. this is an argument that will make sure that we put a little spacing we couldn't pull 10 maybe just to see if this is better yeah 10 is good another widget I want to show you is the padding widget so you see we don't have space on this side like this so you can wrap the wrap widget so I will right click refactor and then we will see the padding widget so wrap with a padding click on this and then I will use this as 10. you can see that we have now a padding around the wrap widget of 10 pixel on each side but sometimes you want to have only horizontal for a certain amount and vertical for a certain amount so what we'll do is instead of using the edge and sets.all we will use the DOT symmetrics and now we can say horizontal we want 10 that's 0 and vertical we want 5.0 format document save this is what it looked like now we can go back inside the nodes we have solved the error type 2 We have replaced with the wrap widget refactor with the padding have done it and now I want to show you a container color white with infinity this should create a bug also so we will solve another bug together so the container color let's go at the end and you can see that we have the wrap the padding and inside the color so right there right after the padding okay you see right there we have the padding we will add a widget called column a container the container widget is just a box an empty box with nothing inside so sometimes you will need it and in this example we need one so we will say that the color is equal to colors.green for now just to see it if we save you will see that we don't see the container Okay the reason is the container does don't have any size right now so what we'll do is we will add we will add a width of I don't know 50 in a height argument of 50. let's save now you see we have a little box like this for now we will leave it like this I will remove the width and the height and we'll put stuff inside this container but later we'll change the size we'll change the color and I will show you more stuff so inside this one what I want to put is a column so the child what would be inside the container will be a column widget the column will take the children arguments and what I will do is inside the children we will add an image so image dot asset like this and the image will be you go inside the image folder that we have already created and we have the image one so we'll see image slash image one dot PNG we'll put my comma format document save now we have the image inside the container the green container I will change this for white and now what I will do is I will change the width the argument with for double dot Infinity doubled in Infinity will make sure that the widget container will take as much place as possible on the width so I will save and now you see that this if I change the color again for red and save you see that this take all the place possible I will bring this back to White so it's just a little bit visible but later it will be more visible because we will add a shadow but for now let's keep it like this after the image what we'll do is we will create a list Tau this is a new widget and the list style is just a box that take all the plays on the width and you can put a title and a leading in a trailing you will see so first we will add the title the title argument will be a text this is like the the text inside the list so the text will be how to get rich and I would put this as a constant and Save you see that we have a little how to get rich just like this you can also add a trailing trailing would be something at the end of this list Style this will be a new widget that we have not used yet and it's called the icon okay you will use this with the bracket and inside to put an icon if you go over you will see that it required a Nikon data this one is a little bit special but it's icons with the S like the color so colors.something it's icons Dot and we will put the arrow forward a row forward iOS rounded I would save now you see that we have something at the end at the trailing of the list Style you can also add the leading I will just add the same icon just for you to see and Save you see we have also the leading but we don't need this one so I will save put my comma right there and then we can move on what I want to show you is how to add a shadow behind the container so let's do this right now this could trigger an error and I want you to maybe try to solve the error yourself first okay you can use the cheat sheet to solve the error actually it's the exact error example we have on the cheat sheet so you should be able to do it otherwise we'll do it together okay so let me put this on the side and let's do this so for the container what we'll do is we will put a shadow for this we need to change the we need to use the decoration argument this one will use the Box decoration like this and what we will do is we will use the border radius so this will change the the rounded Corner okay so let's say border radius dot circular and I will use 15. so if we save oh we have a little problem exactly perfect so this is the error we have you see that the the error will show us automatically and we cannot run the application anymore you will need to press the play button and now we have the red screen so if I restart the application one thing I want to show you and I always do it is let's say we have an error with flutter flutter will stop everything to show you the error I personally don't like this I like to search the error myself inside the terminal so what I usually do is I go inside the run and debug and I uncheck the uncut exception if you like that flutter show you that you have a problem you can keep it but personally I don't like it so I will remove it go back inside the Explorer and restart the application so what I do usually I will click on login now you see that we have a red screen can you try to debug yourself this with the type 2 red screen error it's exactly the same error so try to do it yourself if you can't otherwise I will do it right now with you but that's a good example for you to understand how to debug so let's do it together instead if you can't do it and let me show you first you need to read the error you see that it's just saying color it equal that null and the decoration is equal at null so cannot provide bold color and or decoration okay so you cannot provide I I already know the error but you cannot provide inside a container the color and the decoration the reason is inside the decoration you also have the argument color which which is the same thing so if you want to have the decoration in the color you need to put the color inside the decoration you save you see we don't have the error anymore okay what I want to do is I will press Ctrl B so we can see better and I will remove I will put my comma format document and Save okay next thing we want to do is we have the Border radius circular 15 but we can't really see it right now so I will change the color for red and save so you can see that the Border are rounded okay so that's the reason I will save back at White and now we need to add a shadow for this we will use the argument box shadow if you go over you will see that this required a list of books Shadow widget so we put a list with flutter this mean is it it's a list and we'll see but shadow bug Shadow widget this one okay this one will require four things the color the color of the Shadow the spread radius the blur radius and the offset all of them together will create a shadow so you don't have to remember this by uh by yourself because it's like not really relevant but you can just copy paste and reuse it if you need okay because that's a lot of information and you need to really remember the stuff that are fundamentals this is just an add-on so let's say color argument colors.black 12 this mean it will be black with the opacity I will save now this change nothing so we see also the spread radius will be two the blur radius will be two and the offset the offset will be an argument uh widget of set which will use two and two I will tell you what everything means in a couple of seconds so you can see that we need if if you go over expect to find a commas I'll put my comma and save now we have a box with a shadow the color is the color of the Shadow the spread radius is how it is spread for the Shadow the blur radius is how it is blurred with the number and the offset is to know on the x-axis and the y-axis how many you want to move so 2 and 2 for Y and X okay I will put my comma right there for my document and Save another thing I want to do is maybe we can add a little margin around the container because right now it's it's on the side of the phone and it's pretty ugly so what I will do is in the container I will say margin argument and I would say Edge and sets Dot symmetry like this we have already used this before for the padding before it was right there you see we have already done this so I will just copy the horizontal and vertical I will go back down and inside the symmetric I will put horizontal and vertical format document add my constant const and Save great so now this is how it looks so your next job or your next task to do would be try to just I don't know add another container right under this one okay so copy this this entire container try to add two or three containers one after the other and you will see you will find anywhere so try to do it yourself and in couples again I will do it together with you okay so I will do it with you right now what we will do is I will take the container like all of this code so if you click right there you will see this is all the container so I'll copy this I will put my comma and add a second one and a third one and now let's save what happened we have a problem this is because we need to have a scrollable screen and right now we have not tell further that we want this to be Scrabble so what we will do is we will go at the top of everything and we will wrap the column from the body I will right click refactor wrap with a widget and this one would be the single child scroll View I press enter and I save now this is scrollable pretty simple right the next thing we want to do is inside the note so we have the container white with the with infinity this is done the Border radius 15 done fixed bug done column inside done this is done wrap with gesture detector this is what we need to do so when we press on this nothing happened but we would like to go inside another page when we press on this to see like the information of this blog okay I will go inside the home page and I will scroll where we have the container this I think is the yeah this is the first image okay I will right click and I will refactor and wrap with a wrap with a widget this one will be the gesture detector widget like this let's save and now this is clickable it's now a clickable widget but it doesn't work because we need to put an argument on tap this would be an empty function so let's save and now we can do something when we press on it let's do something very simple for example print click and put a semicolon I will save I will press Ctrl G to open the terminal now you can see that we have an error so let's restart the application to see if the error is still there I will click on login and there is no more error that's great so you see on the debug console when I click on how to get rich we have the click this is because we have Trend in the terminal the word click so that's about it that's the only thing I want to shoot so I will press Ctrl G and it will use a navigator instead if you don't remember how to do the Navigator you can use the cheat sheet again it's inside the cheat sheet we have the Navigator where it is right there you can copy this otherwise we'll do it together like this so we'll see navigator navigator dot of context this time we will say that yes we will see that push and we will put the route this is the material page route I know this is a little bit complex but it's just how to do it okay so I will put my semicolon at the end the Builder if you go over take a function with the build context inside so I will put an empty function with the build context inside context and we will return something by example for now we'll return as an empty container but after we'll return the new page we'll put all our comma together and Save if you're not sure what the context mean okay you can see this as a bridge between everything so if you go if you have like 100 page in your app okay and you click on this button to go inside the next one flutter need to have some some kind of bridge some kind of some kind of information that link the two page together and this is the information you send them so you send the context so flutter understand if I go back I know which page was before I know which page I need to go so this is only a bridge between the pages that's why we use the context after this um if I click on this you will see that now I go inside a black screen because I use the Android I have the back button but on iOS you should not have this button so you can just restart the app so the next thing we want to do I will go inside my node we have done the gesture detector and we need to add an another blog page okay oh we have done this actually the other blog we have done this with the single transport View with the error now what we need to do is we need to add another page the description page so you can try to do it by yourself like we have done with the home page we created another file we created also this stateless widget inside you have this scaffold and the app bar try to do it by yourself and otherwise I will do it right now with you so you go inside the Library I will right click I will say new file we'll see description page dot Dart and inside I would say import M to import all the widget of flutter then I will say STL for stateless widget we will have the two options I will use the stateless widget and I will call this one the description page okay next we want to replace the container for a scaffold widget the scaffold widget will have a nut bar argument with the app bar widget just like this format document save now we can go back inside the home page okay you just have to do the same thing we go back inside the home page and if you scroll down you will find the gesture detector and the Navigator push inside you will replace the return container for the description page okay we need to put this as a constant and Save now when we go inside the how to get rich we go inside another empty page which should be called the description page this is the description page let's go back another thing I want to show you is we shall not have this button right here okay because when we log in we should have a button to log out instead so I will click on this we are inside the login page and what we want is instead of pushing another page over the login page we want to push a page and replace this one like in the cheat sheet you have the option push or push replacement this will replace the current page with the new one so this is what we will do and it will also do the pub after so let's do this uh now we will not do the pop but you can understand how it works by example if you have multiple page one after the other and you just want to remove the page you are currently on you use the pub but we will not use it or need it right now so I will go inside the main and in the main I will replace with that lines 56 Push by push replacement that's it now if you restart the app you will see that when you press on the login this will go in the page but you don't have the back button anymore because there is no page before it's not available anymore we don't have this page because we have replaced the current page but now how do we get back to the login page for this we need to go inside the home page and we will create a drawer so if I go inside my notes you see that the description page is done scaffold is done app bar is done but we need to create a drawer for this page the home page I will go in the home page and this can be create if I go on the top you see that we have the app bar the body and we can create in an argument of the scaffold something called each wire the dryer will take the dryer widget like this this one will take the child okay and the child will take a column inside the column just means we can add multiple widget let's save if you just save you will see that you have this on the corner this is a drawer you can now click on this and it will open a page on the side this is where we will put the sign out button okay so you see just by adding this code we have created a dryer on the side what I want to do next is you see that the top is like gray but it would be better if it was the same red color so we will start the dryer I will right click refactor and wrap with a widget this one would be the safe area widget and now let's save and try again the drawer you see that we don't have the gray bar anymore the safe area widget just mean that you won't have anything that is inside the status bar you see this tattoos bar right there where we have like icons not zero widget will be inside so that's why the drawer is now starting that's why the drawer is now starting at this place next what we want to do is we want to use we have the drawer we have the safe area we want we have the column but we want the drawer header the list style and the Navigator so I would go inside the home and inside the corner I will write children argument this will be a list of widget format documents and then I will press enter and I will write the drawer header press enter the child will be a list Style like this this is the list style budget put my comma format document and inside the list down we'll need to have the title argument the title is a text widget and inside we will say by example flutter map this will just be the name you can put your name at this location I will put this as a constant or we will put the constant just before the list now you can save let's click on this you see now we have a widget flutter map and it's maybe it's not visible but you have a little line like this and this is the header of the drawer next we'll change the color to make it red and it will just look a little bit better so inside the drawer header you have an option decoration this will be the same as the container it was inside the Box decoration so the widget box decoration the argument will be color and then you would put colors dot red and now I will for I will put my comma format document and Save so you can see that now we have to draw our header which is red we can also change the color of the text so let me show you how to change this I think we have done this in the previous login page if we restart the app you will see that the welcome page is now white so we have changed this already so we will do it again we use the style argument and inside we use the text style widget textile we can change the color for colors.white and then can we change other stuff maybe we can change the font size to make it a little bit bigger so I will say font size argument which start with the lowercase and we say if you go over font size you see this require a double so you can say 20.0 comma same so it's a little bit bigger now the next thing you want to do is to add a list style right there right under the drawer header so we'll copy this list now copy and right after the drawer header we will put this okay so this one will have the untapped argument with an empty function and you can see that we have a problem we need to remove the constant because we have a function so I will remove the constant there put it before the drawer comes right like this and put it before the text so this is better now we should have a list style if you right click we can't see it because the color is white so what I will do is I will change the style will remove the style this and I will just say so you see we have flutter map we will change this for settings so settings and Save okay maybe we would like to have an icon also so you can say leading argument icon icons dot settings and then we need to put the constant before save and we have the setting settings with the S I will add another list style right under but this one will be the logout so we'll say log out instead and save the the leading will be log out we should have one and Save perfect your next challenge or your next practical exercise is to use inside the list style the logout a navigator okay this one will remove this page and put back the login page so if you understand we'll bring back the cheat sheet you will need to use the push replacement so it's the same thing but you use push replacement and inside the return you put the login page try to do it yourself and I will do it with you right now if needed so what I will do is because programmers are lazy we will go inside the main and I will take this Navigator replacement I will copy all of this I will go back inside the home page and inside the list Style on tap I will copy paste this information but the only thing I need to do is to replace the home page by the login page format document save and now if we close the drawer and we open it and click on logout here we go we are back inside the login page so you can see that we can click on login come back and sign out when we want so that was it about the dryer widget I will go back in the node we have done the drawer header the list style the navigator that was your challenge now for the description page when we go inside this page in the blog we want to add multiple stuff but just before we do this I just want to clean up this page okay you can see the home page we don't have we have the same image can you by example do it yourself could you add all the gesture detector because currently we have only one gesture detector before the first one okay that bring us to the description page but all the others doesn't work so could you make sure that all the other works and you that you have multiple ones so in the end I will create six different blog okay so try to do it yourself add the gesture detector otherwise I will do it right now with you okay so let's do this let's add all the gesture detector and add multiple blogs so it looks a little bit more complex and better so what I will do is I will go inside the gesture the first one gesture detector and because I'm a programmer remember this we are lazy so I will copy this and I will replace this container and this one with I don't know let's put like two three four I will just put four different image that's enough so the first one will be the image one so you can put comments if you want by example um first first just like this so you know this is the first one okay so I will go inside the image we have the image one the second one have the image two the third one have the image three and then we put the image four okay I will also change the text inside so the the first one would be how to get rich the second one will be by example should you by um and house okay um stock market I don't know study Market and the fourth one would be uh online online how to make an app how to make great that's perfect so that's about it the next thing so if you click now everything should be gesture detector and bring us to the description page what we'll do is we'll go inside the description I will check my note we need to add a column an image asset and send argument to the page this one will be pretty complex but it's also available in the cheat sheet if I bring it to you how to send arguments so you can't forget about it okay how to send arguments inside we need to go back in the description page we start by adding a title for the app bar so I will say title try to do it you need to put a text widget and inside you put a text so you say text widget and inside it will say flutter map for now I will put this as a constant constant and same all right after this we need to put a column so I will say body the body Widget the body argument sorry and I will put a column with the bracket this will need the children the children argument and inside you would put an image dot asset for now we will put the image folder with image image one dot PNG but after we need to create a logic that use the image that we click on it for the gesture detector for example if I click on this one I want to see not this image but I want to see the image with the phone and the bag of money okay I will put my BRAC my comma format document save so I will show you how to do this logic later after this we will create right under a text this text would be how to get rich but we will also need to send this information from the text we have okay we'll put my comma we'll put my this as a constant and right under I will add a constant sized box size box the height will be 20 and a format document we need to put another text but first I would change the style of the first one so I will say the style will have the text Style text Style and the style will have the font size argument to 20. the font weight the font weight will be font weight dot bold at this point you should be able to understand a little bit what I'm doing okay that's why I'm going a little bit faster and we need to add the text to be justified okay justify just mean that the text will be perfectly fitting the screen so we'll do this on the the next text I will sorry it was not this one so that's good uh we'll add this text copy and paste right under and these texts need to be very very long so I will go online and I will search for Beacon ipsum you click on this this will generate five paragraph talking about begin so we'll say give me bacon I will copy all of this like this copy and I will close this that's enough for me after this I will bring back the cheat sheet and I want to show you how to create a variable so you will see create a variable if you want to create a string variable this is what you need you write string the name of your variable and then you say equal to the text this is what we'll do with the bacon information so I will say I will do it on the top of the app the the top of this file so we'll say string bacon bacon text and you will see this bacon text is equal to you open the quotation mark and you paste this information at the end you need to put your semicolon but now you can see that we have like problems the thing is we need to put this in the same line so I will delete delete and put a space then I will go back at the start I will delete delete and put a space and Save now we have the bacon text information I will copy this and paste it inside the text I will remove the quotation mark with how to get rich and I will put bacon text we need to remove the constant and now we can put the constant for the textile you can see that we have now the text between blah blah blah blah all information this is not scrollable for so we need to change this for a scrollable column so I will right click refactor and wrap with a widget this one will be the single child scroll View and say now it's scrollable after this we will change the style for the beacon we will say this is a style the font size 18 and remove the font weight like this so it look just a little bit better like this now it's way too close to the side so we will put a padding also I will go on the column I will right click and I will say refactor width so we'll do it slowly right click on column refactor and wrap with a padding the padding will be 10. now let's save you see it's a little bit better before I told you that we need to justify the text this mean it will be very clean so we'll go where we have the bacon after the style we can say text align agreement and we can say we can use the widget text align Dot Center and now let's say save oops it was text aligned that justify now let's say save now the text is Justified it's way better the next thing we can do is um so I think it's about it for this this page look pretty great what we need to do is send the image and the text for the other page so I click if I click on this I want the astronaut to appear right there so out how do we send information inside another page this is where we need the cheat sheet again so we have the Navigator that's good let's find send argument in other page so if it's a stateless widget this is how you do it and if it's a state full widget it's just a little bit different how you use the text so if you want to use the text you need to say Widget the title but when it's a stateless widget you just say title you just use the title like this okay so how do we do this first we need to create all of this create your second page add the required that this so you can see this is the required this at the final this one and use the argument title and for the Navigator we just need to put this as an argument I will do it right now with you so what I will do is I will go on the top and I will put my comma right after the Super Key format document and I need to say you can you can put your cheat sheet on the side it would be the same thing so you say required this dot title or anything you want for now it would be a title so I will write title after this I would say final train final just mean it it's a final thing so it will not change it will be the same okay so final string which is called title you need both of them this will receive the information and this will set this formation as a title so now you can go inside the app bar and replace the type the flutter map with title this will not be a constant anymore so you remove this and then you can also change the how to get rich with the title this will need to remove the constant also and put it for the text style if you save nothing will change because you see we have an error in the home page because we have added something required inside the title we absolutely need to put this as an argument when we use the description page so if we go inside the home page you will see I will go up the description page now if I go over the error the parameter title is required so I will go inside I will press Ctrl space and I will use the argument title and I will give this I know that this is a string if I go over the value string and I will say this would be the name so stock market it would be the same thing so I would copy this and write stock market format document and Save but now I need to do the same thing for all the gesture detector that need this information so I will copy this title stock market like this and I will go on the top for the next one I will paste it and I will copy what I need to copy is we have to gesture detector I need to copy this information should you buy house perfect should you buy your house we'll see your house will you buy your house or whatever should you buy today okay whatever it is should you buy today next I will go on the other one I will put it there oops I need to put the title with the same text how to get rich this and I think we have one last to do this one we need to put the title and it will be what it is I don't know what is yeah the title is I don't Diamond ends I'm I'm lost a little bit but we will solve this after okay so if we save now you can see that we have first how to get rich so the first one if I go on the top where we have the red you see we have Diamond ends this is the title and then I will go down we have the image in how to get here so I will replace this the first one would be diamonds hands the second one would be how to get rich I will copy this and paste it right there the third one will be should you buy today so we'll go down and I will put this the fourth one oops I will put this the fourth one I'll put my comma the fourth one will be stock market and I go down and I paste so now everything is fine I had a little problem so if you click on should you buy a house you see that um nothing happened I will at least I will I will save the application and if you click on should you buy a house why it's not like this I will restart the application okay maybe it's just a little problem log in and you click on should you buy today ah perfect so now you see we have should you buy today should you buy today and if you click on stock market you will have stock market stock market so it worked fine right now the next thing we want is to send also the image information so for the image it's the same thing you will go inside the description and you will send some information let's say that this one we will say required this dot image path because we'll just send the image pattern this one I will also say final train image path okay with the semicolon what we can do is we can now use the image path instead of the image pad that we have right there I will paste this save and we go back inside the home page and we need to change the fourth of them so for the diamond hand we use the image one so we'll copy this and I will put it inside the image path like that okay for the second one we use the second image so I will paste this and I will say image 2. border third one we use the 30 mage like this and for the first the fourth one I will say four format document save so if we restart the application and finally we click on any blog by Example The the should you buy today we have the same image so it looked pretty good if we click on how to get rich we get this image all right so one last thing I want to show you before we finish is when the user interact with the screen we need to change something on the application for example when the user will press a button the background of the application color will change and we will refresh the screen I want to show you this for this you will need to go for the state full widget instead so I will right click on stateless widget refactor and use the convert to State full widget good so if we save nothing will have changed but now you can create a logic in order to change the background color when the user interact with the app for this I will go inside the app bar in the app bar I will use a action the action argument the action is everything that is at the end of the app bar so we will create what we call a Nikon button widget so this is the first time we use this one and it's pretty useful so I wanted also to show this one the unfresh will be an empty function for now then the icon will use the icon widget inside you put the icons Dot and we will say by example color maybe let's see what the color is yeah that's perfect we'll use the color lens I will put my comma everywhere format document and I will put my content before the icon you can see that now we have an icon button on the app bar but now how do we change something when the user interact with the button let me show you first we will go over the build okay because every time it will refresh the screen it will rebuild the widget like this it will rebuild all this thing so we need to put the variable before let's say we have a variable called color this one will be the background color and then this can be equal to colors colors that I don't know white let's let's see colors.white so what we can do is I can take the background color and put it inside this scaffold so I can say background color is equal to the variable background color so if we save the background should now be white white white now it's like a little bit of black inside so if I save you see that can you see it it's very very similar so what I will do is I will restart the app just to be sure it take in into consideration I will log in and yeah we have the white background that's good the next thing we want to do is to use the set State okay so first I will show you without the state what it happened then we will use the sets data we will say the background color the background color or we can create even a condition if the background color is equal two colors that white so if it's currently white then we will do something else you will do something else so if the background color is currently White then we will see the background color is equal to color is equal to Colors dot I will remove this dot red accent so there's multiple logic that you could create this is one of the easiest one and next else we will see the background color is equal to White so I will save and now you can see that when I press the button nothing happened that's because we don't use the set State we need to tell flutter that we want to refresh the screen with the new information we have so I will use the set state you you see you can have it right there I will press enter and I will put all my conditions inside the set State format document save and now when I press the button you can see that the background color will change let's see instead of red accent we'll just use red so it's a little bit better so you see this is how to refresh the screen while the user interact with the application okay so if we go in the node everything is done but we have one problem the files inside the home page or any files are not optimized it's not like the good way of coding it was very simple to understand because I want you to learn how to code with flutter first but I also want you to know how to structure your file the right way so make sure that you click the video in the description to learn more about how to structure well your files and how to save time and further and you can like the video it help a lot the channel that's it for this one and I see you in the next one or something like this that's it bye

Channel: Flutter Mapp

Views: 83,029

Keywords: Flutter, flutter tutorial, how to learn flutter, flutter tutorial for beginners, flutter tutorial for dummies, flutter easy tutorial, flutter mapp tutorial flutter, tutorial flutter, flutter 3 tutorial, flutter 3.0 tutorial, flutter tutorial for beginners english

Id: 3XipSv2CWiQ

Length: 129min 9sec (7749 seconds)

Published: Tue Dec 13 2022