Flutter Tutorial for Beginners #4 - Creating a Flutter App in Android Studio

alright then going so hopefully by now you've already installed Android studio on your computer but if you've not I'm gonna leave the link to where you can download it down below you can go ahead and do that the next thing we need to do is set up Android studio to work with flutter and out so we're going to crack up an Android studio and in fact the first thing we're going to do is create an Android emulator so that we can test our flutter apps on them so go to configure and then go to AVD manager which stands for Android virtual device manager and we're going to create a virtual device and the virtual device is just like having some kind of Android device like a phone or a tablet on your computer so we don't need the physical device we can test it all on our computer so I'm going to create a virtual device and we can choose from a plethora of different devices right here I'm going to go with the Nexus 6 and click Next then we have to choose a system image so the version of the operating system I'm going to go with PI because in the past whenever you used Q I've had a couple of problems with running the app so I'm gonna go with PI for now so there's no problems and click on next and then I'm going to name this in fact I'll keep the name Nexus 6 API 28 28 is the version number of the system image and down here I'll say graphics is gonna be hardware that's just gonna cause a bit of faster rendering so we have a better experience when we're testing the app okay so now click on finish and this is going to create this virtual device for you now if this is your first time doing this it probably will take a couple of minutes to install this I've done this before so everything's already installed on my computer but anyway now we have our virtual device installed alright then so the next thing I'd like to do is to install a couple of plugins and these plugins are gonna help us inside Android studio when we're creating flauta apps so head to configure again then go to plugins and make sure you're on the market place up here and search for flutter and press enter now it's probably going to be the first entry that you see right here this flutter package and what this does is basically install a lot of tools into Android studio which you're going to help us when creating from applications and it's also going to add another option over here on the Start screen of Android studio to create a new flutter project which is nice so I'm gonna install that it does have another dependency which is the darts plug-in so that's the other plugin we want so click on yes to install that as well it's just going to take a couple of minutes to do this once it's done just make sure you click on this restart IDE over here that's going to restart Android studio and hopefully we should see that new option now when it starts up again cool so now we see this start new flutter project so let's click on this to create a new flutter project and we get these different options right here we're just gonna stick with a flutter application that's what we want to create so click on next then we need to give this a project name I'm going to call this my up and then down here the project location we can choose a place to store this now atom in it mine's being stored in this long-winded directory right here I'm gonna change that because I'd like to store it inside a different Drive so let me just scoot these up and then go into my D Drive open that and then into apps that's where I'm going to store my applications but you can start wherever you want on your computer okay so you can give it a description if you want to and then press next and this company domain this is basically just so it can give your package a name using this it's like an identifier for your package if you don't have one you can make one up you know you do your name something-or-other comm or something like that and then click on finish so once it's loaded that you should see something like this I'm just gonna cross off that for now and cross this as well and I'm also going to zoom in here so we can see this code okay so this is basically a sample app that flutter has created for us now before we start to even look at this code in this project I just wanted to highlight a couple of settings for Android studio because yours might not look like this when you first open it so I've gone for a dark theme and to get that you need to go to file and then go to settings and then if you go to appearance and behavior at the top open this up and go to appear the theme right here I've got selected dark color so if you want to choose that you can do by default I think it's one of these maybe IntelliJ at the bottom you can also set your custom fonts and font size now I'm just gonna crank this up to 18 and this is the UI font size so that all these things over here you can see a little more clearly so I'm going to apply that just to make it a bit bigger for you and then down here as well you can go to the editor and choose the font for that and I'm actually gonna crank this up to 24 as well just so that when I'm writing code later on you can see that more clearly okay so let's apply those changes and there's a lot of other changes and settings in here that you can make as well I'm not going to bore you with all of those but if you want to search with something you can just do that at the top all right so let's close down this guy and have a little look at the folder structure now at first glance especially when you open this it can be a little off-putting because there's so many different files and folders but it's really quite simple first of all we have our app folder I call it my up and that's where all of our source code eventually is going to go and we also have this external libraries which is for any kind of external library that we installed that our app depends on okay so inside my app we can see we have an Android folder and also we have an iOS folder now these are platform-specific folders so anything to do with Android like icons for Android devices were going there and anything to do with iOS would go in there we're going to leave those for now this Lib folder this is where 99% of our coding will take place all of our source code for our application is going to go in here and in fact this main dart file which is here that is the code for the dummy app that we get when we first start a floater project so again 99% of the stuff we do is going to be inside this live folder and you can pretty much ignore the rest for now then we also have this test folder this is for any kind of test files for testing the application that is kind of beyond the scope of this series because this is a beginner series so I'm actually going to delete this for now so if you right-click you can then go to delete down here and delete it and then we have some configuration files down here for our project as well so really it's not that complicated we're going to be doing most of the work in here occasionally we're going to be going into these files down here and possibly in the future into these but not much okay so that is the folder structure and like I said everything goes in here that we're going to be doing including this main dot dart file now when you first look at this you're gonna think hmm this doesn't look simple but really you know eighty percent of this is comments look and it's telling you what it does but if we just take a little look at this we can see that basically all we're doing is creating a class down here and inside that class we're building a widget tree so we can see this right here that's a widget and this is a widget this is a widget this is a widget this is and so forth and that's all it's doing its building a widget tree now don't worry if you don't understand all this we're gonna learn all these bits and pieces as we go forward but I do want to show you what this looks like in our Android device so remember we created that virtual device we can now open that by clicking on this no devices at the top and selecting the device that we installed so now we have this device over here what we could do is perhaps preview this dummy app inside this device so I'm just gonna make some room for this over here close that that was just my videos and then move this over here and now to preview this application over in this device we just need to click this play button right here so click on that and the first time you do this it's going to take a little while to do especially this bit when it says initializing Gradle so just be patient give it two minutes and then eventually we're gonna see a preview of the app on this device all right then so now we can see this little preview of this application now inside this device and it's very simple we just have an app bar at the top then this little bit of text and if we click on this button increases this number so not really much of a fun app pretty to show you in the code the basics I suppose of flutter all right there so let's take now a little closer look at this code and see if we can make any sense of it whatsoever so I'm gonna minimize this console and also click on this project tab and that's going to hide this file structure right here so we get a bit more room for the actual code so what we have over here let me just zoom in a little more is an import statement at the top we're just importing darts and then we have this main function remember I said that the main function was the first function that fires when the dart file starts so that is firing and then it's returning in an arrow function this run app function over here so this run app function is starting our app it's running the app and inside we pass this thing right here my up now the thing we pass in that is going to be a widget and it will be the routes widget of our application so we're saying here the route widget should be my up and we define that widget down here remember before we said that widgets are just classes so we're creating a class called my app which extends stateless widget now don't worry too much if you don't understand all of this for now just know that we're basically creating a new widget called my up okay and that is the route widget so inside here we have a load of Kodomo Clio 3 all now we'll talk about it later as we build our own app but we have this build function which is building our application and we're returning a widget in here called material app so the material app widget is a widget which is kind of like a wrapper and it allows us to do a lot of material design widgets inside it like this and this so inside that material app widget we have these different properties a title a theme and we also have this home property now this home property said okay well what widget should load on the home screen and right here we're saying well we'll load this widget and we're passing a bit of data into that widget as well so this widget down here is my home page extends stateful widget we have some code here again don't worry too much about that and down here we have again the build function and that is building our widget tree inside it a scaffold and up bar which is this thing over here we have a text widget inside that we also have the body property which is the actual content of the screen we have a center widget to centralize everything a column which column eyes these things and then down here we have some text for this we have text for the counter itself and at the bottom we have a floating action button as well so this is basically just building a widget tree of contents for the screen so again don't worry too much about this I'm just giving you a quick overview now but I know it's coming out you're pretty hard for pretty quick so what we're gonna do is actually delete all of this so let me grab all of that delete it because we're gonna start from scratch and in fact I'm gonna delete this thing over here as well now at the minute if we try to run this it's not going to work because we're not passing run out a root widget so let's do that now I could make up my own class my own widget like we saw in the dummy code but instead what I'm going to do is just place in the material app widget right here instead and we can do this we can use this as our routes widget and what this is basically going to do is allow us to create a blank app and use Google materials design features inside this application it's like a wrapper for the rest of our widgets in the app okay so let's open up this material app so inside our widgets we can specify different properties like I said before so what I'm gonna do for now is just specify the home property and this home property is going to have inside it a text widget so we say text like so and this creates a text widget for us and inside this text widget we can pass a string and I'm just gonna say hey ninjas like so and after this I'm going to place a comma because commonly we have different properties inside our widgets and their comma separated so if I wanted to do another property I could do it after this they have to be comma separated so it's always good practice to put a comma after your property value over here so right now we're saying okay run the app use this material app as our root widget and this material app is going to act as a wrapper for the rest of our widgets inside it now the home of our material app is gonna be just a text widget so we're saying the home screen at the minute in its entirety is just gonna be a text widget and that is gonna say hey ninjas okay so let me now preview this over here in fact if you go to run over here you can just do a hot reload and that's going to do the same trick so if we press that now we can see hey ninjas looking very ugly in the top-left corner over here okay then so now we have android studio up and running and we have a pretty blank slate for our app let's take this one step further and start adding more widgets inside our app

Channel: The Net Ninja

Views: 599,088

Keywords: flutter, flutter tutorial, dart, dart tutorial, flutter dart, flutter tutorial for beginners, beginners, tutorial, flutter android, flutter android studio, virtual device, dart android studio, dart android, create a flutter app, flutter run

Id: TSIhiZ5jRB0

Length: 13min 47sec (827 seconds)

Published: Fri Aug 23 2019