Flutter Tutorial for Beginners #22 - Starting the World Time App

okay then gang so I think we know enough about flotter now I've had enough practice with a couple of mini apps to attack the big project over this course and that is the world time app that I showed you at the very beginning of this playlist so close down any other project you've got going in Android studio at the moment and then click on start new flutter project flutter application click next and let's call this world underscore time and then we'll click Next and then give this a company domain then click on finish and it's going to create that boilerplate project for us okay so first things first I'm just going to go into the world time folder and I'm going to delete this test folder in the future I might do a whole series on testing inside flutter widget testing unit testing that kind of thing but for now it's kind of beyond the scope of this tutorial and all of our apps are quite small so we don't need testing too much at the moment so I'm going to delete that so it's not null hey and then inside main dots darts I'm going to delete all of the bumps that we get here all of the boilerplate code except for this bit at the top and then right here we'll use a material app instead and inside this material app ultimately we need a home property which is going to be some kind of widget that's going to show on the home screen now before we fill this in what I'd like to do is create a couple of different boilerplate widgets that are going to represent different screens in actual fact three because we're going to have three screens on this application in the past we've only ever used one which is on the home screen but in this one we're going to have a home screen which is the place that actually shows the time we're also going to have a loading screen while we get the data initially and we're also going to have a screen where a user can update the location and choose different place to find out the time so we need those three different pages or screens and what I'm going to do is go into the Lib folder and I'm going to create a new folder over here now you might not see the new directory or new folder option but you can go to new package as well that's basically just like a folder and we're going to call this pages and press ok so inside this folder we now need to make our dark files for the different pages and the reason I'm doing this is just so we don't have everything sitting directly inside live we just started to organize things a little better now because the apps getting a little larger so let me right click over here create some new files I'm gonna go to new doubt file and first of all we need the whole dart file and then if we expand this we can see that home file then I'm going to right click and I'm gonna go to new and new doubt file again this time I'm going to call it choose underscore location so this will be the widget in here that we have for the choose location screen and then finally we need one more so new again and then dart file and this is going to be called loading dots darts and that will be the initial loading screen when we first fire up the app it's going to show like a little spinner or something what are the data first loads and then when it does load it redirects to the home screen so what we need to do is just build up a few of these different widgets just the bare bones of them so what I'm going to do is copy this thing over here because we need the material dart library and I'm going to paste it in each of these first of all now I'm going to create a widget for the home screen a widget for the choose location screen and a widget for the loading screen so what I'll do for the home screen first of all is create a stateful widget because ultimately in the home screen we are going to be using state so I'm gonna say st and then ful and I'm gonna call this home so that creates us the stateful widget and it links a state object with that widget right here so inside the state object we had to build function where we return the widget to tree now at the minute this is just a container but ultimately we're going to return a scaffold here and inside the scaffold I'm gonna do a body property and for now what I'll do is just a text property as well that says home screen ok so if I now go to main darts and then say ok I want this now to be the whole widget that we just created over here then it's not going to work because it doesn't know what home is we need to import this file over here into this file so we can use it now to do that we could use a relative path so we could go into the pages folder and then get this home file right here and I'll show you that I could say imports and then it would be pages and then forward slash whole oops not in capitals whole darts and this would work you can see we no longer get the error now and if I was to save this I'm going to choose a device and then I'm going to preview this once the device loads so let's move this way over here and then let's preview this project so far ok and you can see that this all works we can see this home widget right here however what I'm going to do is show you a different way to import things like this and that is following a similar convention to this where we actually import some kind of package so what I'm going to do is replace this import over here with something else and that is going to be a package and then I'm going to do a colon and then it's the world time folder over here we can see that that's what we're going into then /pages then /home so now we're using this package import we don't actually have to specify the lib folder over here it knows to go into that then we're saying inside the pages folder then home dot darts so now if I save this it's gonna work exactly the same way and now what I'd like to do is just move this a bit down because currently this bar at the top that shows the time and the battery and things like that that is hiding where it says home screen so it's not really safe to put text up here right so what we could do is use a widget it's called safe area to move this down a bit now in the past we've not used this because we've always had an app bar at the top and that app bar kind of pushes the content down so we've not needed to use this safe area widget but now we're not using an app bar on the home page what I'd like to do is use that safe area widget so what I'll do is come to this text widget and I'm going to go to the action down and then rap with new widgets and this is going to be a safe area widget like so okay so now if we save this we can see that it brings it down into the safe area and that's what this widget does it moves the child of that widget down into a safe area on the screen where we can't actually see it not behind this little bar at the top okay so now we have this basic home screen let's move our attention to viewlets so in here we need to create a widget for choose location and again this is going to be a stateful widget in here because we're going to use data in the future to show these different locations so let's use the stateful snippet and we'll call this choose location like so okay so inside here we're just returning a container at the minute but instead let us return a scaffold as well and then inside that we need a body and then I'm just going to make this a text widget for now we don't need the safe area widgets in this screen because we ultimately going to be using an app bar at the top so it's going to bring the content down automatically but for now let's just add this text to say what screen this actually is so I'll say choose location screen and then we'll go to the next one which is the loading widget and this is going to be a stateful widget as well because we will be using changing state and data inside this widget in the future as well so let's create one last one stateful widget and we'll call this loading and then inside over here we're just returning a container at the minute instead let's return the scaffold again and inside the scaffold we'll do a body property and again this is just going to be a text widget for now to say loading screen okay so now we have all of our different pages set up we can just quickly test them by go to main dart and adding those widgets here and importing them here if we want to I'm not going to do that because it means we have to start messing around with the imports I think just trust me for now that we've created these widgets you can see there's nothing complex about them and they're ready and set up so that we can now navigate to them in the future when we need to so now we've got these basic different widgets set up in the next video what I'm going to show you is the basics of routing or routing in flutter apps and to do that we're also going to have to understand what maps are in Dart so we'll tackle that in the next video