VScode setup and first app on real device

hey there everyone have a shear back again with another video and in this video I will walk you through how you can set up vs code and we are going to run our very first flutter hello world app now in case you haven't watched the previous videos I highly recommend because this video is little bit dependent on that in the setup of windows video I have mentioned and explained how you can make sure your device is up and running which is android simulator in the installation of iOS or Mac installation I walked you through how we can open up a simulator of iPhone and can run your app on that now since fluttery uses the single code base you don't have to worry and I'm not gonna explain this in the future videos you absolutely don't have to worry whatever I am writing the code it's gonna be same for Android and iOS and whether I run it on iOS or Android it should look the same so whatever the device is your choice just make sure it's up and running so the first thing is vs code so I hope many of you are already having the vs code installed if not please go ahead and installed Microsoft Visual Studio code it's absolutely free available for cross-platform and now we are going to set this up in order to set it up for flutter we need to install a couple of things into it and these are known as extensions so just click on this last small button which says extension and we are going to install a few things in my computer they are already installed and I'm using a little bit different theme you can pick up your any theme like that but these things are gonna remain exactly same so the first thing that we are going to look for is dart no doubt is the programming language which we will be using for this entire series so just click on this and it's gonna have a button that says install and then a button that says reload so first install that and then hit the reload it should take al just a little bit time it's a very small package and that said it's not really a rocket science once the dart is installed then we are going to move and install the things required by flutter so we're gonna say simply flutter and once you search for flutter the first is going to pop up on to your screen and we need this one as well this is the flutter extension which is going to help us to create build and run the flutter wraps so make sure you hit the install button there and then hit the reload now this is also responsible for the errors that we have seen in the past when we did ran the command flutter dr. and I believe as soon as you are going to install this it's going to just help you out and just figure out all the things now one more thing that I would recommend you to install is this one I have already installed it it's not super compulsory but it's sometime can be super helpful now it gives you some shortcuts so that you can have widgets and children's and some components and scaffoldings and a lot of other clutter jargon words you can just have a shortcut for that and can produce a lot of code now in the initial phase we will not be using it and it's not compulsory to use this you can write your code manually as well but I recommend that it at least you install this this is a flutter widget snippet it's by Alex's so make sure you use this one only there are hundreds of other as well and there is nothing wrong with them just feel free to pick up any one of them now similar kind of extension is also available for Dart I haven't used it in case you want to check that out it's a dart import or dart snippet so there are snippets available for almost everything I'm not using this one but feel free to have it in case you want to have it okay now what we're going to do is we are going to open up our terminal and we are going to run our first flutter command or flutter app actually in order to do so and obviously I will be providing you all the exercise files and links as well from the next video onwards first and foremost what I'm gonna do is I'm gonna right-click on my desktop and I'm gonna call this as flutter exercise so I'm gonna call this as flutter oops need to rename that I'm gonna call this as flutter exercise okay let me open this up this is an empty folder yes I did that on another screen but it's not rocket science and everybody can do that just create an empty folder and call it as flutter exercise okay once you have done that make sure you open that folder or you can just drag and drop this folder here as well I need to close this what you can do is simply you can just drag and drop this folder flutter exercise I need to close this one and it's gonna just open this up here as well so now the directory is opened up that says flutter exercise so what we're gonna do is we need to create new flutter project now there are hundreds of ways of creating flow project and there is one small sidebar that I would like to point here you can do all these things in Android studio as well Android studio supports flutter so you can write directly commands and all these things here but the whole point of this series is to make sure that your system is even not that up to mark for handling Android studio and still you are able to design Android apps so that's why we will be using simple lightweight editor which is vs code but feel free to just write all these codes in your Android studio as well there is a little bit documentation that you have to dig up to set up Android studio for flutter it's not very big but definitely you have to do it okay now and throughout this course I will be walking you through with some of the shortcuts and commands for the vs code as well by the way a sidebar I'm using a different theme yours might be a little bit different so make sure you explode in theme section and installing the theme is actually super easy you can just choose for color theme there are hundreds of them available so feel free to explore so I'm gonna press ctrl + tilde sign which is just below your Escape key and this opens up a terminal now there are some things which we'll be doing through terminal so it's always better to just have a terminal in the editor as well so what we're going to do is first and foremost we are going to create a flutter project now you can hit PWD or maybe a dir or equivalent command and windows to make sure again that you are into write folder but if you have followed along exactly like me like drag and drop you are definitely into the correct folder so now we are going to create a command we are going to create a new project which is flutter create and then the app name so it's a really simple command create and then the app name so I'm gonna call this as simply hello flutter so this is the command that I'm gonna hit and enter now as soon as you hit enter it's going to create a project in your directory that says flutter hello now we are going to open this up and notice it's not yet done how you can mention that obviously it's being mentioned on the terminal as well and until unless you see a main dot dot file that means it's still doing some things it's creating some packages or maybe downloading some packages from the internet and you definitely might want to wait for that and again make sure you are connected to internet properly if it doesn't really work or just ask for Internet just run the command again okay so not much of a wait and finally the flutter is ready and there we go we can see our main dart file here somewhere if I can find that okay there we go main dart so this is our file now don't worry we are going to completely erase that file and try to learn it from the scratch as well right now we just have this file inside our Lib the notice here that we are having Android and iOS as well we will be talking about that later on we write most of our code in directly Lib and that code is being exported in iOS and Android we usually remember usually don't touch the things in Android and iOS but sometimes we do so that's it your very first app now what we're going to do is we are going to test that what are the devices available so I'm going to call this as flutter and then I'm gonna check for devices it's going to make sure and it's going to tell me that is there any flutter emulator of a label and it says hey there is no device detected so there are a variety of options depends on what platform you are maybe you are on Android so make sure your emulator is up and running and if you are on iOS you can open up a simulator of iPhone so I'm gonna say open a simulator there we go let's hit enter and it's going to open up an iPhone for me now it's not gonna may take much of the time to just get up and running but let's just wait for a minute for that so now that our iPhone is up and running or maybe your Android device that you have started is up and running now the only thing that we have to do is run our app it's not one of the very exciting app but we are still going to run it and I'm gonna just move it a little bit here so that I can adjust all the things on one screen I don't have much of the real estate of the screen but still we are going to interest in whatever we have got okay looks nice and only command that you should know is flutter runs so that's it for Android and for iOS whatever the device is up and running it's going to just handle the flutter run now notice here there is a problem here this command should be run from the root of the flutter project do not run this command outside now what the problem is this is one of the very common error that everybody faces they are not inside the project and that they try to run this command and if your other Linux are using git bash then you can verify that by using PWD it says hey you are into flutter exercise and if you do a quick LS there is no such file that I can run notice whenever it says no pub spec via Mel file not found that means you are not inside the project so now that you have learned one more error let's go into this Hello flutter and now run the command let her run again and this time we are not gonna face any problem hopefully so it's gonna take a little bit while to just download and install the app on your device so just be a little bit patient there so there we go our app is now up and running on an iPhone and similarly if you are using an Android it should be up and running on Android as well and we can just press this button it just changed the number not much of the fun stuff is going on but yeah it's it's something that is amazing and surely you can edit a few things here not much because we we don't know what we are editing right now and we can just play around only a little bit once we understand the dart programming language as well as we understand how these things are laid out what are the themes what are these chills and children's who visits all these things then things will definitely get much more clear as of now this is what we really want to do and that's all I wanted and one more thing important one have you ever considered subscribing my youtube channel and in case you want more such videos definitely and looking forward just only one thing share these videos as much as possible now coming on to one more thing I'm gonna just close down this iPhone come on I can close you down so this select this and we are going to quit this now there's one more thing that some people were asking and that is can I run all of this on my real Android device as well so let's see how we can do that so I'm gonna plug in up my Android device I'm gonna just unlock it and make sure whatever the device you are using it's gonna say allow USB dubbing debugging make sure you click on OK there I cannot replicate it right now but this is my actually not the testing device this is my personal phone that I use it for as a daily driver but definitely you can use your phone as well I use a different testing device for such testings so there we go just plug it up one more important thing make sure that your developer options are enabled it's super easy look onto any blog and settings and you just have to click like ten times and it says now you're a developer on Android now what we're going to do is we are going to run a command that we have seen in the past which is flutter devices when I hit enter let's see what it says it says one device is connected and it also names my device and some crucial information regarding that as well and now we are going to say flutter run once I do so it's going to initialize the Gradle and is going to build everything for Android as well it will also download and install the app on my real device as well and you can just plug and play and do everything on your real Android device as well so this is the device I'm gonna show you in a minute as soon as it's it's gonna done I'm gonna show you the app on my real device as well so now this is the flutter app that we are having and this is running on my actual real device so this is also fun and can be really interesting for all those people who are not having an amazing system and their system is just decent enough to have a simple editor like vs code or sublime so definitely you can work out all everything on your just real device and just vs code you don't need much of the stuff surely that is also totally possible and it's really simple just plug it up your device make sure your debugging mode is enabled and that's it all super easy and super awesome I hope you are enjoying this series if you have any questions post down then in the come in the discussion section I would be really happy to see them and if in case you have any other resource that you would like to share with the community don't hesitate please do so that's it for this video and consider subscribing the channel and sharing the videos so that I can continue making such CDs and that's it for this video let's catch up in a next one

Channel: Hitesh Choudhary

Views: 268,604

Keywords: Programming, LearnCodeOnline

Id: UgmKKtmgdKY

Length: 13min 12sec (792 seconds)

Published: Thu Sep 06 2018