all right then so in this lesson I think what I'd like to do is just refactor the code a little bit and change the template down here as well just to make everything a bit more kind of neat logical and organized so to begin with I'm going to get rid of all of this stuff right here in fact keep the return statement but the container let's get rid of that now don't worry about the error because we're going to return something else shortly and then secondly what I'd like to do is take this scaffold widget
that's currently inside the run app function right here within material app and I want to place it inside the home widget down here now the reason I'd like to do this is because typically when I have applications I might have multiple different screens for example home there might be a contact page or screen where there's a form maybe about other things as well and for each of those screens I would have a different custom widget like this a different class and in each of those screens inside the build method the first thing I'd typically return
would be a scaffold widget so that each page or each screen has its own scaffold at the very top of each tree and therefore it can have its own app bar like so so what I'm going to do is grab this scaffold right here and you can see where it ends because vs code adds these comments at the end of each widget for us which is really helpful so I'm going to grab that I'm going to cut it and then I'm going to paste it down here after the return statement and then just add on
your semicolon all right so cool now we have the scaffold inside this whole home widget we also now need to update this home property over here to say that look we want that to be the home widget so let me do that home like so now we get this blue squiggly line saying we could add a const before this so let's do that and that's pretty much it so if I save this now and restart over here then we should see oops we can't have this thing here the body needs to be something else like
text so we'll just say hello inside this text for example and then add on a const before this save it and then I'm going to restart over here hopefully in a second I think I might have just ballsed a little bit of that up but let's cross our fingers and uh just see if this works all right so I just had to restart the app what I did was I kept the home widget right here like so and because basically we're saying here inside material app home should be home so all this stuff gets placed
up here but then right down here for the body of the scaffold we're saying it should also be home so this again and then also be home so this again so we're just basically stuck in some kind of infinite Loop of repeating this home widget over and over again so had to change that to be a text widget instead which is just hello and then just completely restart the application I stopped the process and then run it again but now we can see everything's working as it should so we have this app bar at the
top with the title still and we have this text in the body which is awesome Okay cool so now what I'd like to do is extract this class from this main. file and put it inside its own file just to keep things more organized and so we're not completely bloating this main doart file I like to keep this a little more lean so I'm going to come over here right click the lib folder new file call it home. Dart and then I'm going to grab all of this class the home class right here and cut
it and I'm going to paste it inside this file now two things first of all bunch of areas over here and that's because we're trying to use these different classes and widgets but in order to do that we always have to import this thing right at the top package then a colon then flutter slm material. Dart so grab that and then paste it up here like so so whenever we're using these different built-in widgets and whatnot always a good idea to import this thing and then if we go back to the home or rather the
main file we notice this error as well and that's because we've not imported this home class into this file and we're trying to use it now to do this quickly you can just click on that go to This Little Light Bulb to get a context menu and then this one right here this quick fix click on that to import that library and you can see now it says package then a colon and then coffee card now that is the name of the application the whole application right here is called coffee card and then slome dodart
so basically this is how we import our own files from inside the lib folder we say package then a colon then the name of the project and then forward slash and then the relative path from inside the lib folder so we don't have to manually say lib here and then forward slome we don't do that we just say the name of the file inside that lib folder now if it was in another folder inside here called home and we place that inside here like so we will get this saying it wants to update basically all
the Imports for us I'm going to click okay and when it does that you can see it's added the home folder in so any internal folders We need to add in there but the live folder we don't now I'm going to undo that by dragging that back out into the lib folder and I'm going to click okay again so it can refactor any Imports then I can get rid of this home folder awesome so I'm going to save that now I'm just going to go to the main file and I'm going to run without debugging
just to make sure that everything still works so I'm doing a complete new restart on this and yeah everything still works but now things are a little bit more organized and a little bit neater as well awesome so then my friends in the next lesson we're going to take a look at another layout widget called the column widget
