Flutter Crash Course #14 - Expanded Widget

Key Takeaways

all right then so we have one more image left to use and we're going to add that to the home widget right here at the bottom of the column so again we can just use the name Constructor image. asset to add the image right here and we need to add in the path to that image which is the assets folder then into the image folder then the file name is coffee bg. jpeg okay so we should see that image then on the home screen at the bottom beneath those other two things but when we preview this we can't actually see that image and instead we see this yellow and black warning box at the bottom and it also says though you probably won't be able to read this on the video that we've overflowed by some amount of pixels so what's happened here is that the image we're using is quite tall right and it's overflowing the available space left to us on the screen now when we're making a layout in flutter if we go outside of the bounds of the screen it doesn't automatically let us scroll down to what's overflowed it's not the same as a web page right that's not the way it works when we're making mobile apps using flutter instead we have to stay within the bounds of the screen and only use up the space within those bounds available to us now you can add scrollable sections within the screen so users can scroll down within those scrollable sections but to fix this problem we're not going to do that instead we're going to use a widget to wrap this image called an exp expanded widget now the expanded widget behaves very much like a flex item in CSS it automatically expands or grows to take up the rest of the available space it has and no more than that it also restricts its child widget which is going to be the image in this case to that maximum size as well for example if we use the expanded widget in this column as the third item inside it then it's going to take up all of the available space after the the first two items right up to the bottom of the screen and then if we add the image as a child to the expanded widget then the image size will be constrained by that expanded widget and only take up the space inside the expanded widget up to the bottom of the screen okay so let's give that a shot now an easy way to wrap a widget with another one is to click on that widget in vs code click on the light bulb and then choosing wrap with Widget now you can wrap with these pre-built widget right here but if your widget isn't there like expanded isn't then you can just choose wrap with Widget and then this right here we can say is expanded now it automatically adds this child field right here and the child is the image itself okay now I'm just going to format this a little differently so it's like this okay now if I save this we should see that the image doesn't take up any more Heights than is available because the expanded widget Su up all the available height no more and then it passed on those constraints those height constraints to its child all right now at the minute we have a strip of white on the left and a strip of white on the right and that is just because of the dimensions of the image so the image is taking up 100% of the height and when that is the case it doesn't take up 100% of the width so we can change the fit of this by adding in a few properties so this image thing right here after the path we can add a comma and then go down to the next line then I'm going to add a fit property and to do this if you hover over this it's going to be a box fit so we can say box fit like so and then Dot and I'm going to say fit width because we want it to fit the width and if I save this now you can see it does take up the full width now but a lot of it is gone or rather is hidden after the bottom of the screen now I want all that to be visible because that is the actual coffee beans and the cup of coffee so after this I'm also going to say the alignment of this image is going to be alignment dot bottom center and basically what that does is start the image at the bottom and the center of the image so we should see that if I save it you can see now bottom center we have it and that looks a lot better all right so that is the expanded widget right there in a nutshell it behaves very much like a flex item in that it takes up the entire space available to it but it also constrains the size of the child to be that as well now there's actually one more example I want to show you using this expanded widget and to do that we're going to go to cofy prep over here and see here where we have this sized box and it takes up a width of 50 pixels they are just after the images right here the Coffee Bean and the sugar so we don't really see it because there's nothing after them but if we add some text here so if I say con text and then inside here we'll just do a plus sign this later is going to be a button that we can press to increase the strength but we'll do a similar one for the sugars down here as well if we oops spell that correctly if we preview this now we can see that between this plus icon and the images we have that sized box right now we can specify the width in here so that could be 100 if we wanted it to be larger or wider and we get more of a space but if you want it to take up the rest of the available space so that the plus icons are way over here well we can use expanded to wrap this now when we do that we no longer need a width because it's taking up all the available space so I can click on sized box wrap with Widget call it expanded and then I'm going to say const right here and because we've used const there we don't need it here then I'm going to copy this and I'm going to get rid of this one and paste the other one in so now we have two expanded sized boxes and now they take up all the available space right here between the image and the plus sign and the plus signs go all the way over to the right and that is where the buttons are going to be later on to increase the strength and also the sugars all right so it is really useful this expanded widget you'll probably find yourself using it quite a lot