Flutter Tutorial For Beginners #2 - Your First Flutter Application

Key Takeaways

[Music] hello everybody and welcome back on their flutter tutorial so in today's video what we're gonna be doing is just learning about how flutter works getting a really good introduction building our own widgets and building a really basic layout this is not gonna be anything anything fancy by any means but this is really fundamental we need to understand this before we can move forward and build some cooler stuff so to give you guys kind of a tease and a sneak peek for what we're gonna be working on at the future of this tutorial series or as we go through this tutorial series what I'm planning on doing is actually integrating whatever we make with a firebase database so I want to show you how we can actually work with databases and what I want to do to illustrate that is actually make some kind of blog application so make something where people can leave comments or make some posts people can vote on those posts and then the post it up the most amount of votes will be shown to the most amount of users so we'll do something cool like that there's a lot of other stuff we can add if we decide to go down that route so if you guys have ideas that related to that please do leave a comment down below and I'll definitely consider them alright so with that being said let's actually just start walking through what we have kind of so far we're gonna actually start by just going to line 33 and deleting everything that's down there so literally everything and we're gonna go to line 29 and we're gonna delete where it says my home page like that so we're gonna leave up to line 32 modifying line 29 and I'm just gonna explain this to start and then we'll actually build our own widget and start messing around with that so first thing this pane on the left hand side of my screen is really useful and I'd recommend you guys pull it up when you're coding just hit this flutter tab right here it should be at the very bottom of your bar and vs code you're only gonna see that though if you have the flutter extension installed from the extensions paint so make sure you have that again you're gonna want that dart extension as well if you didn't install that in the last one so that you get all the nice autocompletes and everything that you're gonna see me using so to start we have an import statement this import statement just brings in all the necessary packages classes modules tools whatever it may be that we need to use in flutter now material is the most basic kind of package in flutter most of the stuff we're using is gonna be from here but you can of course import a ton of stuff and you can also import third-party libraries as well and maybe we'll show how to do that in like a much future video in this tutorial series now next we have what's known as the entry point of our application so this is specific to dart whenever you have a void main' this is pretty much saying hey this is what i want to run as soon as i run the program so let's say I just made a program that said boy made and inside of here I went print hello world or something like that then as soon as the program ran we just immediately print hello world so this is the entry point whatever you put inside a void main' which is the main function will run as soon as you run the program so in this case we're gonna call run app which is a function we get from here and this is going to run my app which is a class that is defined here now notice there's a lot of stuff that says widget that's because flutter uses widgets for doing all of its drawing and pretty much handling everything within the framework a widget is really just something that has some properties and may potentially have some State or it could be rendered to the screen so we have all different kinds of widgets the most basic ones I can think of is something like a text widget and then some ones that maybe you're a bit more complicated we'll deal with like formatting and layouts like maybe a row widget or a column widget and these widgets can store widgets within them so you're gonna see as we start building out applications we're gonna be kind of building a widget tree where we have this upper level widget that stores lower widgets below it so if you modify the upper level widget everything will get changed so from the top down to the very bottom all those changes will be kind of cascading and that widget will be redrawn onto the screen now there's more to talk about with that but let's just go into my app and explain the basics of how this works I'm gonna get rid of all these comments because I'm not gonna read them and they just take up a lot of space in here okay so let's get rid of that and now it immediately looks a little bit less intimidating so you can see this first comment won't all read this one says this widget is the root of your application so when we make a new program the first thing we do is we make our root widget so the root widget in this case is called my app we can name this ever you want or you can name this whatever you want but it's just a class and this extends a stateless widget now a stateless widget it's just saying this widget does not have state it's not going to be changing based on our interaction with it in the program so we're gonna call it stateless and what that means is all we need to do when we make a stateless widget is override a method called build so this is what's known as the parent class essentially you can think of my app kind of taking all of the functionality from this class and just altering it altering it very slightly so stateless widget is right from flutter when we extend stateless widget it has a bunch of functionality that's already defined and all we do is we tell it what we actually want this widget to look like where it should be if it's storing anything else so since this is the root widget of our application what we're returning is a material app now a material app just set up the actual app for us and defines the homepage for our application now if you ever hover over any of these widgets you can see all of the different parameters that they have so like title locale show performance overlay show semantics T bugger right navigation key home initial route routes all this stuff that we're going to talk about later but just know that you can hover over any of these classes and you'll be able to see all of the parameters and kind of how they're used so if you're stuck if you're lost hover over something and you might be able to see some meaningful information it looks like a big blob of mess but you can see home for example is right here and while I have home defined there so just telling us the different parameters that we can pass here so whenever we make an app the first thing we do is we pass a title in this case it's called fluttery demo I'm just gonna change this to Tim's app right now we pass a theme that has primary swatch so this is just going to be the primary color and then visual density now visual density is telling us essentially do we change the density of our application or how it looks based on what platform we're on so far on Android or iOS should we adapt to that when we go adaptive platform density that's what that does that that's what that's saying now this is kind of complicated I don't understand this entirely but it's just changing the feature of how the app works based on what or how the app looks sorry based on what operating system it's on so we'll just leave that like that that's what the people in the flutter tutorial have done gay primary swatch this is the theme of your app so what colors it's going to look like you can change this obviously so let's actually go ahead and change this to say orange we can go deep orange orange accent and it's kind of cool because you can actually have a look at what all of the stuff looks like if you just kind of scroll through here so let's make it colors orange and then what we're gonna do is leave the visual density and now talk about home so home is going to be the home page of your application so this is defining the actual app but we haven't defined what's actually going to show up on the app or what we're gonna see when we draw the application and in fact if I save this here you can see that nothing is showing up on my phone here because we have an error there's nothing that we've given for the home page and we need to give something for the home page if we want this to refresh and show up on our app so what I'm gonna do is I'm going to make a widget now we're gonna walk you through how we do that and we're gonna place that widget here as our home page so when we make a widget what we're gonna do is pretty much copy exactly what we've done here except change what we're returning from this build method that we have to override so we're just gonna define a class we're gonna say class my home page we'll just stick with the names that they were using and we'll say this extends the stateless widget so stateless widget like that now we'll add our brackets and notice we're getting this red squiggly line so I'm gonna hover over it and it says missing concrete implementation of stateless widget dot build what that means is we need to override this build method so I'm gonna copy this that override widget build I'm just gonna paste it in here like that now what this does is this says okay we're gonna override this methods you can see that red squiggly line is gone and inside of here what we need to do is return any widgets because this is telling us we have a return type of type widget that we want to show on the screen so that brings me to another thing here dart is a typed language so you need to actually define the types of all your parameters the return types of all your functions and your methods and we're going to be using classes and object-oriented stuff as well with genera if you know what that is so this is a not definitely not a beginner language it on easy language it's very similar to something like Java so just keep that in mind as we go through that the reason I'm writing all this stuff is because we're not working in a nice language like Python or JavaScript where we don't actually have to define the types we have to define the types or pretty much everything that we do so what I'm gonna do is I'm gonna return a widget from here so since this says widget that means I must return some widget and same thing for this one we must return a widget which in this case is material app now whenever we start making app at least for now we're gonna return the scaffold the scaffold widget now this just sets up a basic structure of a page so essentially it just setting up like a regular page that we're gonna be able to see when we run the application and scaffold can hold other widgets inside of it which we'll see in a second but we usually just start with scaffold so now we've made our first widget and all this widget is doing is returning another widget that we want to see on the screen when it's getting built it's returning that scaffold widget so inside of home right here I'm gonna put my home page as the widget that I want to render for my home page that's all I'm doing I could change I can make another class and I can swap this out and that would change the home page of my application so now we're gonna press that hot reload button although I don't think we actually have to press that and we can see we just have this white app right here there we go now what I want to do is I want to show you what happens if I get rid of scaffold and say just returned some text widget so let's say I just returned text and I go and I return like hi or something like that and we have a look now we can see that we're getting these yellow underlines this red weird text and everything just looks strange right it doesn't look proper it's a black background it looks like we're missing something that's because we need to add that scaffold widget which just sets up the page and makes it kind of ready to add more widgets to I gives us like a nice structure for the page so now if we look when I add scaffold we can see it's just white alright so that's it for scaffold now inside of here what we're gonna do is we're gonna have the child widgets of a scaffold so the first thing I want to do is I want to add a little menu bar to my app so I want to add something at the top maybe not a menu bar but a title that says hey you know this is this application so to do that this is called an app bar so what we're gonna do is we're gonna type app bar colon and we're gonna put an app bar instance here so half the bar now again all of these things are widgets so this is a widget and this scaffold is a widget and essentially on these widgets we have a build method that tells us what to display when this widget gets built now that could be another widget right and inside of this scaffold widget there would be a build method that says what we should build when this scaffold widget gets built right so just keep that in mind all of these different things are widgets and you can see that in the flutter outline here because it has the flutter logo beside them all right so now app bar inside of here we need to define what we want the title of our app to me so again we're having widgets nested inside of witches so title and the title is going to be a text widget that is going to say hello world like that so now we have a scaffold widget that has an app bar that app bar is equal to an app bar widget that has a title which is equal to a text widget so all these different things are widgets and now if we look in our kind of our tree on the outline here we have scaffold app bar text so it shows us kind of a hierarchy and it's really nice to be able to look at that and see how this tree is kind of formed so anywhere that I use my home page now it will actually return this scaffold which will return the app bar which will return the text right so we could technically reuse this on another page if we wanted to just keep that in mind okay so now that we have that will actually just have a look at our app and we can see we have a nice orange theme and we get hello world as our title bar okay awesome so that's looking pretty good the next thing I want to do is I want to add a body to my scaffold so I'm gonna say body colon and inside of here we're gonna keep it really basic and I'm gonna say text and I'm just going to go hello world once again so now we have a scaffold it has an app bar and it has a button now notice when I saved it automatically formatted this that's great we want that so it keeps things nice and clean and even adds these automatic kind of hidden Commons so slash slash scaffold to tell us where all of these widgets end just to keep things clean and easy to actually view because as you have a ton of different widgets things get pretty complicated pretty fast so it's nice to be able to see like oh that's the end of material app that's the end of theme data so on so forth so let's see it now and have a look and we get hello world text showing up at the bottom and there we go we have now officially built our very first widget so we have this widget my home page and well we have the home page right here that shows that widget this widget shows a scaffold the scaffold has an app bar and it has a body now inside of the body of course we can add another widget we can add a bunch of other stuff and to conclude this tutorial what I will do is build one last widget we'll go pretty fast actually and then we will display that widget multiple times so I can show you how we reuse it so I'm gonna say class I'm just gonna say test widget like that we're gonna say that extends again the stateless widget will talk about stateful widgets later so stateless widget and inside of here I'm gonna say at override nope I don't know why it automatically completes that let me say widget builds and we're gonna go build context like that will save context and inside of the brackets we are going to return in this case I'm just gonna do a very simple tax widget so I'm just gonna say hello oops hello world like that awesome so now we have this other widget it's a test widget and what I'm gonna do is I'm gonna replace my body with a bunch of different test widgets and I'm actually gonna put these test widgets in a column now I won't explain this a ton because I am planning on wrapping up this tutorial series shortly but I mean that a column widget like that and inside of the column what I'm gonna do is I'm gonna say children like that and this is going to be equal to a list of widgets and these are gonna be all the widgets that I want to display within a column so when you add the column widget this isn't gonna show anything itself but what its gonna do is align the children of it in a column so they're above and below each other now what it what what children takes is a list of widgets so what I need to do is I need to say well we want a list which you represent in darts by just using two brackets like this and they need to be of type widget so we put the angle brackets like that we put widget inside of it and we say okay this list is going to contain a bunch of widgets now since this test widget is a widget it extends stateless widget we can put that inside of here so I'm going to say test widget like that and I'm going to do comma test widget like that now let's see oops not text widget that's going to be test widget sorry so now we have to test widgets inside of here and actually what I'll do is I'll add another one and I'll show you how this works so now we have three children for the column that is our body so let's have a look at how this looks when we have a look at the screen and now we get three hello worlds in a column there we go now to finish this off I'm gonna just change this to a row and just show you what happens when this is a row rather than a column so row now we have a look and we get hello world and they're in a row beside each other so that is the basics of how we build a flutter application we have all these different widgets we start from right here we draw the home page the home page will draw a bunch of different widgets from the body and you can see how we can get more complex using rows columns and all different kinds of different widgets in flow so with that being said that has been this tutorial if you guys enjoyed please do make sure leave a like subscribe to the channel and of course I will see you in another flutter tutorial