Blog Post: https://medium.com/@rody.davis.jr/creating-your-first-flutter-project-58fd0312204b Source Code: https://github.com/rodydavis/flutter_take_5/
0:00 · my name is Rhodey today we’re gonna be starting a new series called flutter take five first in this series we’re gonna be talking about how to set up your first flutter projects so if you go ahead and open up finder if you’re on Mac let’s go ahead and create a new folder we’re going to name it my project and once you do that go ahead and drag that into vs code now right now it’s just empty folder so let’s go ahead and open up terminal and run flutter create
0:32 · period now if you’re on the master channel it will add the web and Mac OS folder if you’re not you’re just going to see the iOS and Android so first thing you do is if you’re on vs code go ahead and install the flutter extension as well as there’s some other useful ones that I like pub spec assists for example and also remove blank lines
1:12 · right here and another one we can do is remove all comments yes or keyboard shortcuts for all these but I just think it makes it pretty easy so let’s go ahead and type remove all comments remove blank lines
1:35 · and now you’ll have your basic pups back this is where you’re gonna have all your dependencies for your flutter project as well as some information about the version number name and description this is also where we’re gonna include any assets but we’ll go over that later so once you kind of get started with your project and you kind of remove the the
1:57 · default boilerplate what you want to do is go ahead and go into your main duct art this is inside your live folder we’re gonna go ahead and be prompted to get packages so go ahead and do that once we do that we can go ahead and start let’s go ahead dismiss this do the same thing as before remove all comments and we can format by holding down option shift + F so this is
2:25 · pretty great but still not good for a basic flutter project so let’s go ahead and create a new folder called UI in that folder let’s create another one called home and instead there let’s create a new file called screen dart in
2:43 · there let’s go ahead and import material this is flutters package for all the components let’s go ahead and type st and we’ll get stateless let’s go ahead and type home screen let’s just give it
3:00 · a default scaffold or a so replace container or scaffold an app bar we can make it empty for now and a body with a container go ahead and copy home screen we’re gonna go in here and replace this this would be prompted to import this we can use the relative or the fully qualified import let’s go ahead and delete that and once we have that that’s
3:31 · good so we started to refactor out some stuff if you’re running on the simulator and you don’t want to show the banner we can go ahead and hide that so show show checked debug mode banner and let’s do the false let’s go ahead and give this a proper title so my project let’s go ahead and change this to the default light theme and if
3:55 · you want dark mode let’s go ahead and give it a theme data dark if you want to manually switch between modes you can do theme mode thoughts system alright great so once we have that all set up you should be able to start flutter run so go ahead and open up terminal you can do
4:23 · flutter run - the Mac OS this makes it really easy to debug applications faster if you’re using the desktop because it doesn’t have to spend up the iOS simulator or Android emulators as well and cool so we go ahead and have our project if we go back over to home screen we can give it a title and hit
4:52 · our you know hot reload awesome thanks so much for watching I’ll see you in the next episode