IMAGE ASSET • Flutter Widget of the Day #06

[Music] hey what up guys welcome back to another quick flutter tutorial the widget of the day is the image.asset widget and this one allows us to add images to our project so let me show you how to do this by jumping into the code so i've opened up a new flutter project and the first thing to do is to get a picture that you want to add so i've got here just a playstation picture it's in a jpeg format but you can use png and other files as well so if you open up the projects directory if you go into the library folder let's create a new folder inside here and call it images and drag your image into this folder cool so that's the first step we have to go back to our code and tell the project that we have added an image so go to the pubspec.yaml file and this is where we're going to specify the sort of overall settings for the application so if you scroll down you can see the assets section and it says to add assets to your application add an asset section like this so what we need to do is to just uncomment this hashtag and we have to specify where the image is so we placed it in the library folder and then in there we placed it in the images folder so this is going to grab all the images in that folder make sure to save it and then once that's done let's go to our scaffold here so in the body let's create just a center widget and now i can demonstrate how to use the image asset so type in image.asset and inside we're going to give it a string value that locates the image so we placed it in the library slash images slash the name of the image itself so you can see in the directory there so i called the playstation.jpg make sure you have the file name jpeg as well or dot png make sure to have that extension in there and save it and there it is there's our image so there's a couple of things that you can play around with in this widget and just to illustrate this clearly i'm going to wrap the image in a container and let's give it a height and a width of 200. and let's also give it a color so that we can see exactly what's going on so you can see with a height and a width of 200 that is a square right but our picture has a ratio that's more taller than it is wide so what you can do is if you look under the image widget there's a lot of options to play around with but the main one i want you to know is this fit property so you're going to be using this one a lot and so box fit there's a number of options to choose from so if i just show you the first one boxfit.contain if you hover over it it conveniently shows you what it does and it gives you also a visual depiction of what's going on right so as large as possible while still containing the source entirely within the target box so basically it's going to fit the whole picture inside and that's what it is by default now if i change this to cover and hover over it it says as small as possible while still covering the entire target box so this one's going to fill up the rest of the space meaning it's going to clip off some we're not going to see the entire picture right because we're filling up the space and you can go for some of these other basic ones like fit width so if i comment this out so normally this is what it's going to look like and if i just make sure it fits the width then it's going to zoom in a bit so that i can fill up the width and you can do the same thing for the fit height and the last thing i'll show you is the fill option so this one it says fill the target box by distorting the sources aspect ratio so all of the other options that i just showed you doesn't change the aspect ratio of the image but this fill option is going to fill the entire box but it's going to change the aspect ratio so that we can show the entire image now that means the image is either going to stretch in a particular direction so to illustrate this even further if i change the height to 500 you're going to have the full image in there but it's going to stretch out so that it can fill out the entire box now just as a bonus tip we can wrap this container in a clip erect which is the widget i showed in the last video and if i give it a border then you can clip this image so that it looks nice and round in the corners cool so that's how easy it is to add a image to your flutter project hopefully that was very clear and easy to understand let me know if you have any issues with this i can come around and help you guys but other than that that's it for today and i'll catch you guys in the next one laters [Music] you

Channel: Mitch Koko

Views: 16,665

Keywords:

Id: 6TmpjwKX9AU

Length: 4min 30sec (270 seconds)

Published: Fri Oct 08 2021