Flutter Tutorial for Beginners #5 - Scaffold & AppBar Widgets

Key Takeaways

okay then gang so we've seen now how to set up a very very basic hub using the material app as our root widget right here and it acts as a wrapper for the rest of our app now inside it we have this home property which remember specifies what is going to be on the home screen when we load this app and inside that at the minute we just declare a single text widget which says hey ninjas and we see over here looking at a rather ugly so this is all a bit boring at the minute and gradually what we want to do is add more content to this screen to make it look a bit better so to do that the first thing we're going to explore is a widget called the scaffold widget now the scaffold widget is going to allow us to implement a basic layout for our app it's going to allow us to set up an app bar at the top some floating action buttons every one and more so what we're going to do is actually delete this text widget for now and we're saying now the home property should be a scaffold widget and by the way all these widgets come built into the flutter SDK out-of-the-box we can build our own widgets later our own custom ones but these ones come out of the box that we can use so anyway this scaffold widget is going to take a multitude of different properties so we can specify different things about the base layout of our app the first thing I'm going to do inside this is an app bar property so up bar like that and this app bar property is going to specify how our app bar is going to look at the top now the value of this property is actually just going to be another inbuilt widget which is called up but like so and notice the convention our widgets are all starting with a capital letter and each new word starts with a capital letter as well that's the convention of these widgets so inside the scaffold we now have the app bar property and the value of that property is an out bar widget now remember I said put a comma after every value of every property so let's put a comment there and also a comma after scaffold as well just in case we had more properties down here later on okay then so inside the app bar we can also specify a couple of properties and this is the general pattern here we have a property with a value which is sometimes a widget and inside that widget we can have more properties and sometimes the values of those properties and widgets and it's had those widgets we can have more properties and so forth because we're nesting widgets within widgets remember that widget tree structure I showed you in one of the first slides that's basically what we're doing here programmatically creating a widget tree and each widget has different properties so the first property of this app bar is going to be the title property and this is going to say what is actually shown what text is shown on the title of the app bar now you might think we can just say something like this hello and pass a string but that's not the way flutter works if we want to output some text we need to use a text widget so we can say text like so and then put the string and what we want to show as the title inside this text widget so I'm just going to say my first app okay so let's try previewing this I'm going to save it now and go to run and I'm gonna go to hot reload right here or rather hot restart this one's hot reload we'll talk more about that later for now just click on hot restart it's a bit like a refresh button for you to see the new screen so let me press that and now we can see this app bar at the top it's all done for us we didn't have to do any kind of styling or anything like that it just comes out of the box we can change the colors and I'm going to show you how to do that later on but now we can see a pretty decent looking title bar or app bar at the top with a title on it now at the minute this is left-aligned and this is how it looks on Android devices most of the time so what I'm gonna do is use a property called sensor title to essentially align this and this we can just set to a boolean which is going to be true so this doesn't have to be a widget this is just an option if you like we're centralizing this so we set it to true so if we save that now and then we go to hot refresh or hot restart then we can see it's now in the sensor cool so that's our app bar done so inside the scaffold now I'm going to add a second property after the app bar so let's now UPS and do that for a start and let's now go on to the next line after the up bar and this time we'll do a body property now this property is going to specify what content is going to go inside the body of the screen so anything under the app bar over here now all I'm gonna do is add in a text widget and I'll say hello ninjas okay so if I now save this and go down to run and press hot restart we should see this over here hello ninjas okay so it's quite small but we'll talk about textiles later on and it's also in the top left now when we viewed that dummy project it had the text in the center and it looked a bit better so now I want to do the same thing and the way we do that is we wrap this widget inside a center widget so I'm going to actually cut this for him instead of directly putting the text inside the body property I'm going to do a center widget like so so a center widget centralizes whatever is nested inside of it so inside the center widget we're gonna have a child property we don't just place in the text like this we always have to have properties inside widgets and when we nest something directly inside another widget it's normally the child property that we use so we're saying okay well the child of this Center widget the thing we're nesting inside it is now going to be this text widget so that means that it's going to centralize this text widget on the page so if I save it and go to hot restart then we should see now that is in the center cool okay so let's do a one more property inside this scaffold widget so after the body we'll come down and we'll do another property called floating action button and this is basically get a place as a little floating action button in the bottom or right corner so the value for this property again is going to be a widget because like I said we have widgets as values to properties a lot of the time so this widget is called the floating action button now just delete that on pressed we're going to cover that later don't worry about that now that's how we react we use a pressing this button but for now I just want to show you how to get one on the screen so comment after that then inside the floating action button again we have a child property because we're going to nest another widget inside this widget the floating action button just gets us the button with nothing inside it but we want to show text inside it so we'll say that the text widget is going to be a child of this and inside the text widget we'll just say click that's what the text is going to say so let me save it and then hop restart come over here and we should see now this floating action button with this click message inside it now nothing happens when we click on this because we deleted that on pressed property but we'll talk about that later on for now I just wanted to show you how to get a pond ring with a basic layout like this and how quick that was using this scaffold widget right here so remember the scaffold widget is basically like a wrapper to a few different layout widgets things like the app bar the body and also a floating action button ok so generally speaking when we're creating apps we're going to be using the scaffold a lot to flesh out the general layout of our apps but if you want to read more about it now then you can go to the scaffold class on the floor to Docs I'll leave this link down below so you can go and check it out and if we scroll down here it gives you some different examples it looks very similar to what we've done over there and if we scroll down even more then we're going to see all of the different properties we can add to the scaffold widget so app bar we've seen that because I've done that background color body we've got that we've also got these others down here there's loads of different properties so you can have a play around with those if you want to but we are going to explore them more as we go forward as well this is just an introduction to it