Flutter & Firebase App Tutorial #27 - Finishing Touches

Key Takeaways

or rather than gang so we're about 95% of the way there now but there's just a couple of things I would like to do and they involve images to make this look a bit better so first of all I want to apply a coffee image that surrounds this color to make it look like a coffee cup and then also a background image to the body itself to the home screen itself with some coffee being the spread out to make it look nice and coffee so I've already prepped those images and they're over here in an assets folder you can find these on the github repo for this course the link is down below you have to select the lesson 27 branch and go into the assets folder now then I'm gonna grab these two in a minute and drag them into my project but let me just scoot it on to my other screen it is still the hair but now I can open this up again and I'm gonna create a new folder inside perucrew so let me right click down here and go to a new folder and call this assets so let me now drag those into that folder and now we have to register those inside the post bet ya mol file now I've already done that scroll down to where it says assets and then just add this line underneath assets so now that registers anything inside this folder okay so now we can use those inside this project and we're going to do it in two different places first of all we're going to do on the home screen because that's where we want the Coffee Bean background image and secondly we're going to do it on the brew tile because that's where we output each one of these tiles and this circle avatar right here so we're gonna apply a an image to this as well so let me do this one first of all currently the body of the home screen is just this brew list but what I'd like to do is surround this with a container because we can apply some kind of background decoration to this container then so oops I don't want that up there I want to select brew list and go to the Action menu and then go to rap with container now let's just organize this a bit better so it's on a new line and then inside this container we have the child which is Brewer list but we can now also say decoration and that is going to be a box decoration like so now inside this box decoration widget we can specify now an image property and this image property is going to be a decoration image so decoration image like so and then again inside the decoration image we need to say the image is going to be an asset image sometimes it feels in flutter like your nesting widget within widget within widget and I guess that's not an amazing experience but once you get the hang of how to do these things it isn't really complex at all so anyway the asset image is going to be assets forward-slash coffee underscore BG PNG so that's one of the files we just added inside this assets file this coffee underscore BG file and what we're saying here is that the decoration of this container is a box decoration that takes an image property and that image property is a decoration image where the image itself is an asset image that we grabbed from our files now if you don't understand this I do cover this in more detail in my floater for beginners series feel free to check that out whatever you want the link is always in the description below anyway we've done this but we also need one more property here and that is the fit and this is where we tell it that we want this image to take up the size of the screen so it's going to be box fit cover so it covers the screen okay so if I save this now and hopefully we should see those coffee beans what we do okay step one done now the next step is to add on the image to these circle avatars right here so let's do that and this is pretty simple all we need to do is add a background image property to this circle avatar so let me do that I'm going to say background image oops image and this is going to be an asset image again like so and this time it's going to be assets forward slash coffee underscore icon dot PNG I think that was the name let me double check this coffee icon PNG awesome so then if I save it now hopefully we should see the coffee icon right here not great I know I'm not going to win any disaster Awards I just wanted to make it look a little bit like a coffee cup from a bird's eye perspective so the coffee's in the middle with this a sheen on it a plate underneath and you can see the handle hopefully that makes sense to you but the reason we can still see the color underneath this by the way is because the middle of this image is transparent okay it's just kind of like the coffee cup and the plate underneath that has color in it the rest is transparent so the color right here is still shining through and that's why we can see it and if I change it if I go to settings and make it for example a black coffee that should still update over here yes it does we can see it's a black coffee okay so let me try making this light to make sure it still works update this and yep it's light it looks like a cup of milk awesome so there we go my friends that is our app completely done so in the next video I just want to take a few minutes to kind of stat again delete all the users and try this out from scratch just test it out with a few different users at about three or four and see if there's any problems but hopefully there won't be