How To Run Flutter App In Visual Studio Code 2024! (Full Tutorial)

yo hello everyone and welcome back again to a brand new video running your flatter app in Visual Studio code enhances development and debugging this tutorial provides a step-by-step guide on setting up and executing flatter applications seamlessly within Visual Studio code so guys let's get started before we start with this video make sure to watch it from now till the end so you have the full information so the first thing guys that you need to do is to download flat. Dev so simply all you need to do is to click here to get started choose whether you want it to be on Windows Mac OS Linux or Chrome OS so this is the first step the second step is to download as well the visual studio code so visual studio code just by going to code. visual studio.com you will be hitting the right place so simply click on the first link make sure it is the blue logo not the purple logo because CH is different between Visual Studio code and the visual studio so here we are now simply click on this arrow and choose either uh what is your system basically Mac OS Windows Linux and then click here if you want to see other downloads or to just open it on web so now I have it installed and downloaded on my PC so I will just simply click here search for visual studio code and open it just close this one Visual Studio here we go now let's wait until it opens and here I am so guys now basically it is very much straightforward the next thing to do is to make sure that your flatter is downloaded and after that as you can see here on the left you will find Explorer search Source control run and debug and extensions so here basically just click on this and search for flatter and as you can see here we it is so this is flatter for vs code now all you need to do to add it is simply by clicking on install and it should start installing right to front of you it shouldn't take that much of time it can take at maximum 20 second and at least like 15 seconds since the files in here are not really that big any kind of like uh plugin that you add or you download on the this actual platform which is vs code doesn't have that much of like it will be a small size now what is basically this platform and what is this tool actually you how can I uh get uses of it well introduction this vs code extension adds support for effectively editing refactoring running and reloading flutter mobile apps it depends on and will automatically install the Dodge extension so as you can see it will be automatically insult as well that's why it take a little bit more time for support for the D programming language note project should be run using F5 or debug menu for for debugging functionality running form the buil in terminal will not provide all features so installation install from the visual studio code Marketplace or by SE within vs code the dart extension will be installed automatically if not already installed documentation make sure to see this documentation so we can find all the information necessary so let's go open it and here here we go so this is an article made by them it explains how to start a project and how to start everything uh or flatter inside of vs code so let's read it all so as you can see here guys we have installation and setup so here I have already shown you how to do that click on extension if the flat extension has an available update updated reload and restart vs code now the creation of a project how can we create a new project using it so to create a new flutter project from the flutter starter app template go to view comment pallet and you can also click on control CMD shift plus P which is very hard to get into so simply all you need to do is go to vs code click on view and here you will find conent pallet search for flatter so here we go flat new project and here as you can see we should download the SDK so we should download it and you want to download so go here as I said go to Windows and you should of course download the SDK as I said so I have it already installed I guess somewhere here let me just go to download and here it is yes exactly here so now just click on flatter go here and make sure that it is installed so you should run it through this uh batter is right here the flut console and it will be good to go and you will be running it without any problems so here as you can see type flut select the flut new project press enter select application and press enter select the project location and turn your desired project name so how can we open a project from existing source code simply go to file open you can also press control CMD Z and brow to the dev holding your existing flter source code files and click open now for editing code and viewing issues simply the flut extension performs code analysis the code analysis can highlight language syntax completes code based on R type analysis now forget to type declarations go to go go to the definition uh you can also press F12 find type usages press shift plus F12 view all current source code problems go to view problems you can also press control/ CMD plus shift M The Problems P displays any analysis issues as you can see here it will be something around that now for running and debugging as you can see here they said like every run and debug as you can see not project should be run using F5 or or the debug menu so what about that exactly so here as you can see so note you can debug your app in a couple of ways using def tools are suit of debugging in profiling tools that run in a browser using vs code buil in debugging features such as getting breakpoints the instructions below describe features available in vs code for information on using launching diff TOS see running diff TOS from vs code in the diff TOS docs so to start debugging by clicking run and start debugging from the main Ed window or press F5 so simply they said to go to vs code press F5 and you will be able to start debugging but here as you can see I don't have uh I have to need to add the flutter which I currently don't have I need to install it through the dot uh or through the exe execution uh folder that I have showed you right before I started this process there is also guys a lot of uh extensions or other extensions that can come with the same name of flutter so there's for example flut widget snippet uh they can have other stuff more than the normal flatter uh extension uh there is flutter files so each one of these can actually have a lot of benefits on your projects on flutter nvs code so make sure to take a look on all of them because they can be very very useful especially each one of them is is not added for no reason they have all a lot of downloads so each one of them for example FL has 7 million downloads the second one has 1 million this one has 4,000 400,000 this one has 200,000 this one has like 400,000 so there's a lot of actual tools and extension that are being used by dozens and thousands thousand hundreds of people around the world to execute their codes perfectly and yeah guys that was it for today's video if you do have any more questions make sure to leave Down Below in the comment section thank you guys a lot for watching and see you guys in the next tutorial bye-bye

Channel: Easy Solution

Views: 7,418

Keywords: run flutter app in visual studio code, flutter, flutter tutorial, vs code, flutter vscode, how to install flutter in visual studio code, run flutter app on real device

Id: 0nVwyem7UZM

Length: 8min 6sec (486 seconds)

Published: Thu Jan 04 2024