Flutter in VSCode - Setup and Demo in IOS Simulator and Android Emulator

hey guys welcome back to my channel so in this video we're going to be talking about flutter so what is flutter so flutter is basically an sdk a software development kit which can be used to develop mobile applications so specifically 2d mobile applications you can use it to develop 3d applications but it is mostly targeted for 2d applications so it can develop apps which will run both on ios and android so why is this an advantage because normally in companies if you have separate ios and android teams the problems which they run into is they need to maintain two separate teams two separate and also android and ios they have their own frameworks they have their own build pipelines they have their own sdks and everything so you basically have to maintain two separate teams and all the costs which are associated with those two separate teams so flutter is kind of going to bridge that uh costly gap uh by bringing both like having just one team and that same team writes one code base and the same code base will run both on ios and android so that's the solution which is going to be both good for the company both in an economic sense as well as from a maintenance standpoint so that is basically uh what flutter is basically easing for a company so so that's pretty much the intro on what is flutter so what i'm going to be doing is i'm going to be demoing like a a very simple flutter application and i'm actually going to do it in vs code so of course you need to have xcode and android pretty much installed in on your system but i'm going to basically um pretend that they are not there and then basically just demo it as if i don't have those but you guys do have to install the android studio and the xcode to actually be able to make this work all right so let me go to the next slide here so why do you learn would you learn flutter it is basically advantage so if you're running on windows um you need to learn c sharp because that's from microsoft java kotlin for android developed by google and then objective c swift uh for ios apple but now since you're doing uh hybrid development you can basically use flutter and build apps which will run both on android and ios so do were there other hybrid developmental languages yes you had xamarin iconic phonegap react native and flutter is again developed by google so if you want to learn more go to flutter.io the advantages of this is basically it has a very easy learning curve and looks like it has very good employability with android and ios applications if you're going to targeting to become an android or an ios developer so how do we basically install so let's kind of go and look at how to install and run this app so before we get there uh i want to kind of talk about uh you know you basically can use brew so broof brew is the package management tools for a mac os so there are probably other um tools which you can use for to install flutter on windows maybe chocolaty has it and then i guess in linux you probably can use apt-get i haven't actually gone down that path i'm just doing this on a mac os so i'm going to basically uh because xcode even now i would say is not installable on windows or um linux operating systems so if you want to basically run this um run the emulator maybe the emulator is still kind of going to work on linux or and windows for ios not the emulator i mean the simulator for ios so there's a distinction between what the simulators are called i guess emulators are called so on ios you need to call them simulators and for android you have to call them emulators and okay so let's kind of install flutter and then open vs code go go and get those extensions and then try to create a new project and see if we can run them uh in the bs code so and now in terms of the architecture let's see there is basically uh you have a hierarchy of widgets and then you have both stateless and stateful widgets and most of the uh code that you write in the flutter is called dot so that's and then there is the flutter api as well so that's what it's getting called and it'll probably call the um um call the uh engine at the back because it runs on c plus plus it is supposed to be fast and so that's pretty much it for the slides so let's actually get on with the uh presentation or actually the demo so here i have uh vs code and so to install flutter you basically will start off with brew install flutter it will probably tell me that i already have it so i don't have to install it so nothing probably would get installed here this should be quick because i already have it installed so i think it's a cask it's not a formulae so that's how i have it already installed so i'm going to kind of show you guys the extensions which i have installed for flutter so so after you install flutter from brew install then you need to get some extensions so all i did was actually pick the extensions pack so that was kind of the easier way to get so i think i can do like installed so installed and then i'm going to search for clutter that would just give me so flutter files complete flutter extension packs so if you install this i think you get pretty much rest of them so there are actually 44 extensions in this um so i would kind of suggest you guys do that so there are some things which are not flutter based so if you don't want it then you probably can go and pick each one of it and then separately install it but i already had most of these extensions um like the better comments um support the block library that provides uh let's see what is that even i don't know what that is but um and then let's see if we want to find out wait guess we can click on it and that tells me vs code support for block library and provides tools for actively creating blocks and cup cup bits for both flutter and angular dot so that's again something to uh something to do with flutter and deprecated carbon now a code package to open current okay so there's a lot of things mostly dot related and then editor config so all this so and get graph i already had that one uh jumpy live share so markdown and material theme so that's kind of big for uh flutter i think they kind of have it already in built and pops back okay so you guys can go look through it but this is the extension which i did install after i basically um install the brew package of flutter then i can add that so now i have that so i'm going to basically be in a folder so here i'm in a folder called flutter but i'm going to create another directory called make directory i'm just going to call it hello 2 actually delete glo yeah okay let's make directory make directory hello two so and then cd into hello two so that is it so at this point i'm going to start creating the flutter app and since i have the packages and all installed already like the flutter packages what i can do is i can um so this is my floater folder so like what i can do is i can do [Music] command shift p and then there is the option to do flutter new project so and i can basically so i think right now i don't have any folder open so i should actually open that folder which is even though it's empty i need to kind of create that so that it will do that so let me just open that folder so instead of opening it like this what i'll do is i would do code dot so when i do code dot it's going to give me a new window which with that particular folder already open so you can see it's kind of says hello to here so i'm going to use this one and i'm going to close this that way i'm i'm already starting off with hello to as my folder and then i'm going to initialize the flutter application inside of this folder so let's do that and i'm just going to open up my console as well and then ctrl shift b and then got a new project so this should basically create all the files necessary uh in that hello folder for the flutter so let's see if that kind of works i think actually i didn't create it let me try this again and new project okay so now i have to select what do i want to do i want to do like an application and now i need to say what is the name of my application so [Music] select the folder to create the project in so i'm going to select this folder called actually i'm going to select plotter and then i'm going to select this hello2 and then and then it's kind of saying hello flutter application one so i'm going to say solder application 2 and that should kind of start creating the flutter application let's see how that works so guys just remember that i'm actually doing this all in one shot so that's why um it probably is going to um there may be little gotchas here and there because uh but i do kind of pause recording uh if i basically run into issues so it's not really all at one shot okay so looks like we have all of this uh created and we are in the uh main application so this main dot dot is your main like and go application or in your c-sharp application or in any other application you have your main file uh which is the program's entry point so that particular entry point here for this android app or uh or not android it's a flutter app so it works both on ios and android so that is um that is this all right so [Music] so now that that is kind of uh set up let's see um so what you can do is you can do like a flutter doctor and that will kind of tell you if you have anything which is missing that you need to install so a few things which i had to install after i finished this installation is i had to accept some license agreements so i found one issue in one category xcode flutter recommends the number of x core version of 13 so it tells me i have i still have the xcode 12.5.1 i need to upgrade but that's the error but other than that looks like i have android studio i have vs code and i've connected to two devices available http host availability uh android tool chain so there is another tool chain which you will have to install and that you can install from android studio let me see if i can show that so for that what you have to do is you have to go to android studio and then go to android studio preferences now these kind of take some time to open up so once you open up then you go to the android sdk and then you go into [Music] uh this is the android sdk location then you go to install sdk plugins click on the sdk tools and inside the sdk tools click on the android sdk command line tools and then click apply i already installed it so that's why i don't have it but once you do that that's what i kind of got when i run the random flutter doctor and then of course um that's the only thing which i had to do to basically tell me that only the xcode is kind of outdated rest of it is good the other thing which i had to install was the emulators for the android so if you go into the extensions you would kind of search for android and then so that is the one which i installed here android ios so that is the uh android emulator so this one i installed and then there is the android ios emulator as well which i installed so those are the two emulators uh which i kind of installed so i would kind of suggest installing these two as well all right so coming back now i think we are kind of ready to basically uh run our app so let's see so to basically run this particular app [Music] if you go into the debug mode you can click on run and debug and it is going to run the main dot dot program so let's see if it kind of whether it's going to start it for the android or is it going to start it for the ios so i do have both the emulators here running uh actually i do have just the android emulator running so after i installed that i can just click on this emulator to bring this up so if i wanted to kill this i would kind of go here and kill it so that would kind of destroy this butler app and if i wanted to restart that one i would just go here and view android emulators and i can pick one of these then it would kind of bring it back up and similarly i can click on it and then i can say i o simulators and and then i can pick like iphone 11 pro max so here i have this one running and then i also will have the xcode or ios simulator as well running so i'm going to pause the video here because um it does take some time to initially come up so i'm going to pause this so we are kind of doing some installation here build app outpost flutter app app.apk so the progressing slowly okay and in terms of we have open dev tools widget so i think when i run it like this it is going to actually run in the browser so it's going to actually do the emulator in the browser and then once we have it running in the browser i will i will show you guys how to actually connect it to the emulator so let's see first of it run in the browser so here is where i have to introduce like vs code launch dot json so that we can actually run this particular app on the ios simulator and the android emulator so the configuration which i'm using for running it on the [Music] iphone 11 pro max is this so i just call it debug iphone launch and the type is of dart code and the flutter mode is debug and then i the so this is the most important thing you have to add this iphone 11 pro max and i got that when i go into the ios simulator so i have this iphone 11 pro mac so i just can i use that to put it down here i maybe also can put this device id but i just can put the name as well so i was able to put the name enable run so i'm going to demonstrate that so [Music] this is my configuration so this is what i picked here so i'm going to click on that and that should run it okay so it's saying no devices running right now so i need to start the device and so here i started the device and now i should be able to run it so select and run it let's see if it does better now so this is our debug console going to pause it here because normally this can take a while so now we basically have the application starting up so as we can see it kind of started up successfully here so let me uh demo something else here so so the other thing which you can do is the hot reload so i can basically come here and i can change the color to red and so that would kind of hot reload so to oh i think i have an extra thing there and so now i change the color to red so this is this top bar color so i can just go and press this button here and that would kind of hot reload it but the thing is i didn't save this so i think actually even if i save it it'll probably hot reload it yeah so it automatically hot reloads it you don't really have to click that button you can you can probably forcefully reload it if you click that button as well so so that is that app is functioning good so so this is basically the uh hello world flutter demo using the ios simulator so next i will demo how to use the same thing using the android app so let's gonna close this guy out and now we have the android so for the android i have another profile so debug android and if we go back into the launch.json we can see for the android it's basically debug android and and the device id is kind of different here you can just use even though this probably is the pixel uh i think what was the device name let me check so it was the i picked the pixel 4 xl api 30 but even though you picked it you can just specify it as a device id because i think android is kind of different so you'll have to kind of set to run flutter app on a specific device ignoring the device selected in the status bar so there may be a status bar down here but this will actually use that device that is kind of being selected here so when i kind of click this it will try to go and run inside here so let's see how that works again this might take a while so i'm just going to pause the vid so there you guys have it so it is kind of starting to run that apk app debug dot apk and um it's not at fully started there it is now it is kind of started and it is so before we demonstrate it in ios now we can see it is kind of working in here and i will kind of change the color to show the hot reload as well because that's kind of uh the interesting piece here so let's kind of go to like colors dot let's try deep purple and all i have to do is just save this and it should hot reload so there you guys have it so it is hot reloaded that and that's basically the demo for um basically flutter um using both ios and android apps or and the simulators so that's how easy it is to kind of start off so this kind of gives us a starting point to go and write your own app so i mean um and so this gives the framework to get you guys started so hope you guys found this useful if you did then please do like and subscribe to my channel thanks for watching bye

Channel: Nat Kus

Views: 22,412

Keywords: flutter, gradle, ruby, fastlane, android, xcode, simulator, emulator, dart, mobile, apps

Id: PSidWh1EBVA

Length: 28min 0sec (1680 seconds)

Published: Wed Apr 13 2022