Flutter Crash Course #4 - Making a New Flutter Project

Key Takeaways

all right then so now we have flutter installed the next step is to create a brand new flutter project so open up a terminal and navigate to the directory you want to create this project in you can see I'm in a folder called flutter project and by the way when you're creating a new project with flutter try not to have any directory with spaces in or special characters if you need to use a space use an underscore instead all right so the way we create a new flutter project is by saying flutter then create and then a project name and I'm going to call this coffee underscore card and same goes for the project names use it underscore not a space or anything like that all right so press enter and this is going to go ahead and create this new flutter project for us all right so we can see that was really quick it's all done now so the next step is to CD into that new directory so CD and then coffee underscore card and then we can use flutter run to run the application however I'm not going to do that just yet what I'm going to do is open this up in vs code by type in code space and then a DOT and press enter and this is going to crack open vs code for me inside this project directory all right then so here we go this is our new project now just a quick reminder that before you go any further if you've not already definitely install the flutter package for vs code just go to extensions type in flutter it's going to be the first option right here I already have it installed but if you install this it's going to automatically install the darts um extension as well and this flutter extension comes with with extra tooling for creating flut applications so definitely definitely make sure you install that now if you've not already all right so then now what I'd like to do is take this starter project that we've got right here I mean we don't know what any of this is yet but it is a starter project and we can run this in an emulator now to do that we want to make sure that this status bar down here in vs code is showing so go to view and then go to appearance and then make sure you've got a little check next to status bar click if if not you should see this and then over here on the right where it says Windows this is our Target device for the application so currently it's windows but we want to select um a different device this one right here this emulator that we created in an earlier lesson this is the Android emulator so if you've not already created an Android emulator make sure you do that I show you how to do that in the previous two lessons so click on this right here and that is going to launch this particular emulator all right and that's over here woohoo so we can see now some kind of phone device right here the flutter app isn't showing on it we have to manually run the flutter application to see over here so let me just scoot that out the way again and you can do this in a couple of different ways if you want to you can open up your terminal and you can type flutter run we're not going to do that instead what I like to do is go to the lib folder and then open the main. file and then go to this play button right over here click on the Arrow next to it and then say run without debugging click on this and this is going to start up the application for us now we have to do this from the main doart file if it's any other file then it's not going to show this play button over here so I'm going to cross off this for a second and then just bring over the emulator again and you should see in a second the flutter application spin up on here all right and now we can see that loading right here in a second we should see the application itself all right cool and this is the start application we get when we create a new flutter application now it might have taken a little bit longer for yours to load up especially if it's the first time you're booting up an application on a new emulator you've recently created but it should load after a minute or two all right so what I'm going to do now is just quickly resize the windows a little bit so we can have this on the right and then this on the left okay so that looks a little bit better now when you run your flutter application you're going to notice this little two bar right here which you can move around I'm going to keep mine there there's a few different icons on here this one is to stop the application this one right here this green arrow is to do a full restart on the application and when we do that it's going to take it to its original state so it's not going to preserve any state or data within it by that I mean something like this look at this number when I click on the plus sign it goes up and that is essentially the state of this application this number right it uses it now if I do a full restart it's going to take the application back to the original state and that's going to go back to zero so it doesn't preserve that number that we had now this one right here this lightning icon this is a hot reload this does preserve State however for the time being we're not going to be using hot reload I will explain that later on in like two or three videos time for now if we make a change in the code and we want to see that change over here we're going to have to do a full restart of the application okay all right so now we have a new flutter project and we've seen how to get that up and running in this emulator in the next lesson I'm going to go over just a little bit these files and folders over here and maybe a little bit inside main. d as well just so you've got a rough idea of what everything is