okay then gangs so now we've looked at a few different layout widgets that we can use to get our content onto the screen but at the moment the only actual content we've looked at is the text widgets so now I want to introduce the image widget as well so we can show a few images on the screen now to do this we're going to need some image files first of all and we're going to need to place those images somewhere in the project folder so the way we do that is by making an assets folder in the root of the project directory and then any static assets like images can go inside here and inside that fold fer I'm actually going to create a subdirectory called IMG to put all of the images inside of but you don't need to do that if you don't want to you can just place them directly inside the assets folder so now I can just drag and drop some image files inside this folder and you can get all of those images from the course files on GitHub just select this lesson Branch from the branch dropdown and download a zip folder of the lessons code inside that you're going to find this assets folder with the images inside it okay so next up when we use static assets like this we need to tell flutter where to find them inside our project and we do that inside the pspec doyo file so if you scroll down this file a little bit you're going to come to a commented out section that says assets and underneath that there's a couple of examples of how to add assets so a hyphen first then a path to whatever asset we want to use in the project relative to the project route directory so let's uncomment this first of all and then remove the current image paths and then we can add our own in so then in our case we need to go into the assets folder first of all so we say assets and then forward slash inside that we have an IMG folder so IMG and then for Slash the name of the files so we have coffee BG and that's a JPEG file and then under that we'll do another one so assets SL IMG SL coffee Bean PNG and then finally assets and then SL IMG and then SL sugarcore cube. png and now if we save that flutter is going to know now where to grab those images from when we use them in our code all right so let's try using them I'm going to go to the coffee prefs file over here and I'm just going to add an image before the sized box so after both of the text widgets so the easiest way to do this when we're using an asset ourself that's inside the assets folder over here is to use the image widget but then use a named construct on that called asset so we say image. asset and then as an argument we pass in the path to the file we want to use so that's going to be assets and then SL IMG and then for this one we'll say coffee uncore bean.
PNG all right then so we can also apply a width to this and by the way we're getting an error right here because this now can't be a const up here so we can get rid of that con if we want to you're going to see loads more blue lines but we'll sort those out later but as a second argument right here we can pass in or rather a second and third argument pass in different options so we can say the width of this for example is going to be 25 pixels and we'll leave it there for now but what I'm going to do is copy this image and then paste it also down here so this time we're going to have sugar cube like so and then again the width is 25 now let me just get rid of these by Alt clicking all of them at the start not that one this one and then these three down here and we can say const in front of each one all right sweet so now if we save that we can see those two images over here on the right we have the Coffee Bean and then the sugar cube awesome all right so that's okay then we've got the images working and showing on the page but at the moment they have this white background which makes them look pretty crappy to be honest so I'm going to show you a couple of properties now that we can use to change the color and the blend mode of images which when used together will get rid of this white background for us now I don't want this to be a big lesson about how blend modes work because there's a ton of different ones which do different things and it's kind of beyond the scope of what this is all about I want to stay focused so we're just going to be looking at a single blend mode multi multiply which allows us to get rid of this white background so then the first thing we need to do is apply a color property to the image itself which is going to be colors. brown and then in square brackets we can provide a strength so I will say 100 right so this is the same color as the background of this section of the application and if you have a quick look at this so far you're going to notice that it's colored the whole image that brown color so it just Blends completely in with the background and we can't see anything now if we use a certain blend mode in combination with this then we should get the coffee bean image back but the white background should still be blended into that same background color so to do this we can say color blend mode and then we set that field equal to blend mode. multiply and this applies the multiply blend mode then to this image and if we preview this we should see the image but without that white background awesome all right then so I'm just going to do exactly the same thing for the second image by copying those two properties and coming down here and after the width pasting those in Saving it and now we can see the sugar cube has the same effect cool so my friends that's pretty much it as far as images go at the moment so first of all we create the assets folder and we put our images inside here the Second Step was to go to the hbpec file down here uncomment assets and add the paths to those assets and save the file the third step was to use this named Constructor so image.
