First Flutter App On Android - Build Flutter Apps 2

what's going on guys john oliver here from codamy.com and in this video we're going to set up an android emulator and create our first app with flutter all right guys like i said in this video we're going to set up an android emulator and then create our first app with flutter before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codemy.com we have dozens of courses with thousands of videos that teach you to code use coupon code youtube50 to get 50 percent off memberships all my courses videos and books runtime fee which is insanely cheap okay in the last video we installed flutter and all the things in this video we're going to create our first app and also create an android emulator to run it on we're also going to run it as a web app as well i'll show you how to do both in this video so head over to visual studio code and let's come up here to terminal and click on new terminal and i'm just going to create a directory so i'm going to go mk dir and i want to put this in the c drive and i'm just going to call this flutter apps or something like that and that's where we're going to save all of our flutter apps going forward so now i want a cd change directory into that letter apps directory and you can see there we are so now we just want to create an app so to do that we type in flutter create and then just name our app and let's just call this firster firstly whatever just a first app doesn't matter we're not going to do much with this app and you can see it's creating the app for us and there we go so we can type in ls and we can see we now have this firstly directory so now let's come up here to the top and go file open folder and we want to navigate to that c drive in that flutter app directory there we go and then our firstly click on that and then just click select folder and this will import all of that into visual studio code now our flutter apps are always located in the lib directory so we can click here and we see there it is main.dart so if we want to click this and take a look at this i don't know why this is so big we could resize that here's our app now i'm not going to go into any of this stuff in this video this is just the starter app that they always add when you create a new app and this is actually a working app this creates a little counter app in fact we can run it by coming down here and you see right down here if we click on windows we can say where we want to run this thing so i want to run it in the chrome web browser so i'll click that now we can come over here to this main.dart file right click and click run without debugging and this will launch this thing fire it up and it should open automatically in a minute or two in chrome now it takes a second for this to get started and get going that's just the way flutter is but if you wait just a second it should pop right up there we go and this opened in a chrome browser all by itself over here we can also open this in firefox if we want just by popping in this localhost colon 57492 and then the number sign or you can just run it in chrome either way this will open the app and you can see here's our app so this is the basic app that's been created for us and you can see you've pushed the button zero times we can come down here to this little plus and we can hit it a few times and when we do it updates the counter so not a very sophisticated app but it is a working actual app and you can see it runs perfectly fine in a web browser that's a cool thing about flutter the apps work in web browsers they work in phones they work in all different operating systems and it's really cool so okay that's great but what we really want to do is run this in an android emulator see how it looks on a phone so if we come down here we click there we see we just have web browser options how do we get a little phone to pop up well we need an android emulator so we need to head over to android studio we installed that in the last video if you didn't see that video check it out i'm just going to go to my windows start menu and start to type in android and the android studio thing pops right up go ahead and click that and here we are android studio come down here to more actions and we want the virtual device manager and here we want to create a device and here we can come through and pick what phone you want to emulate so i'm just going to come down here and i don't know nexus 6 maybe something like that click next and now you're going to want to download it now i've already downloaded it so it says r here but it will say download you just click that and a little thing will pop up if you get a little error message over there that says something about virtualization it means likely that virtualization isn't turned on on your computer so you're gonna have to restart your computer and go into your system bios ios bios if you say that bios settings and uh enable virtualization you'll have to google it for your specific machine intel amd whatever you've got is going to be different so i'll let you do that but we don't have any errors there so we're good to go click next now like i said this will download and install that emulator but like i said i've already done that so one thing you want to do is come down here to graphics where it says automatic change this to hardware that'll speed things up a lot so go ahead and click finish and all right we've got this thing right here now we want to run this we just come over here and click this little guy and it starts up the emulator and boom there it is so this is an actual like phone on your computer right uh we can sort of run this thing turn it on and boom it's starting right up so cool it's a little slow it can be a little slow or a little clunky depending on your computer uh but it works pretty good so let's just wait for a second for this thing to get going now like i said this is an actual phone you can install stuff on here if you want to put instagram or something like that facebook app you could do that but for our purposes we're just going to leave it like this so now we can come back over here and let's minimize these things head back over to our app [Music] and then come down here and you can see it's already showing up nexus 6 api so if we click this now it's sort of you know determined to use that same thing we just come over here to our main.dart right click and run without debugging and bang zoom in just a second it should pop up right there but again like everything in flutter it takes a little time to compile and do all the stuff and uh so just give it a minute here and boom there we go and there's our app so you can see it looks just like the web app we can click the button and do a thing if we want to kind of flip this around there we go so that's kind of all there is to it so like i said we're not going to go through this code we'll get into this in future videos what all this stuff is and how we can change this and how we can create our own apps but for now you have a solid foundation of just getting an app up and running emulating it on an android phone also emulating it in the web browser and uh pretty easy so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out codabee.com we can use coupon code youtube50 to get 50 off membership so that's access to all my courses over 50 courses thousands of videos in the pds of all my best-selling coding books don't over 150 000 students learn to code just like you my name is john elder from codiby.com and i'll see you in the next video you

Channel: Codemy.com

Views: 11,560

Keywords: flutter, first flutter app, flutter android emulator, flutter hello world, flutter app development, flutter app development tutorial, flutter app development for beginners, flutter app development tutorial for beginners, flutter web app, flutter android app, codemy.com, john elder, john elder flutter, john elder flutter tutorial, john elder flutter tutorial 2, flutter tutorial for beginners, flutter dart

Id: p7MkQHfVbcQ

Length: 7min 22sec (442 seconds)

Published: Thu Aug 25 2022