6 minutes
Share the link to this page
A widget that displays an image.


Hello, in this video, I am going to show you how to add a image widget. So it could be a direct child or a child among many other children as part of something like a row or a column, for example, the principal, the center of the same if you know how to do a technology in their shot, explain those videos, you should be good to go. single element, single child image and to assign an image to every image. And the three different ways that we can do it. The two main ones we're interested in his asset image, a network image, or a network image for so network image is the easiest to implement. And that just needs the URL of the image.

That's it. So if I was to go to Google, and literally search for this, go to images I want to display this image of so Get the image address which looks like that. And in here you'll see the image popovers After saving the hot reload, there you go. As you can see, the image has now popped up with exactly, nothing much more to it than that. Obviously, you can do different alignment, I'll cover in separate video position sizing, again, all of that coming combined. But in terms of just explaining, this is all you really need to know.

You can change the color, which is a color that gets blended with it, you can change the filter quality, the fit the height to the you know, the width properties. They're pretty simple stuff. So I'll provide links so you can check them out. And but to do so, we did the width. For example, zero, do hot reload. I think see some small very small Tourism demand is more to the word.

I think, again, upward link for all of that. The other method I want to show you is if you have a no clear image, what you do is asset image. And here you put the location of, you know, and for us, it's going to be in a folder called assets, which we're going to create shortly. And you'll be here and I'm going to let me just create the folder and get the image first. So to create the folder, go to here, click on the top directory and go to new directory, and in here token assets and put all your images all your assets, you know, sample potential form footprint here, you've go step further and organize this like so for another directory and just put images because you might have different types of assets video images, audio files, phone calls, etc. And what you need to do now is basically put an image there.

So if I put this one then it's going to save it instead save it to the assets folder and images. And so to get to Batman extension important right Batman dot JPG as you can see there is a file in there now and it's really literally just directly images for slash Batman dot JPG and hot reload it as you think nothing appears there's actually two problems. One hot reloading will not work. If you add a new image or do any modification or you need to redeploy the application to every time you add an asset, need to go to post bacc dot Why am So dot yamo. And in here we say flutter colon, you want to add an asset and use this system here, so you just put assets. This doesn't.

This is not in relation to what we've named the folder. So this always has to be called asset. Here are all your assets. So far I've added an asset but that's the location of the asset and you just put four slash four slash Batman dot jpg, save that, but get the hot reload it, the image still does not appear. But now if we were to actually go back to a main file, if we were to quit out of it and relaunch it, and what that is going to do redeploy the A became redeploy. All the assets are hot reloading, great.

Be doing just code, change it, as soon as you start messing with assets are localized and stored on the app itself and on the device, then you will want to redeploy the application. Not too much of an issue, chances are, you know, always hoping that asset is highly likely might be a little poorer period of time where you experiment in. But overall, you shouldn't have too much of an issue. So the image should appear now. You know, once the actual application loads up, and as you can see the application loaded up. Again, you can change the properties of the image view as well.

One last thing I want to show you is, we only had one dish could get tiresome. So what you can do is essentially do this. And if you do that, but that's actually phases, add all of the assets inside of this folder. This is some more elegant way of doing it, basically. And as you can see, it still works. That's it for images.

If you haven't questions, feel free to shoot me a message. And as usual, I look forward to seeing you in the next video.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.