Flutter Tutorial - Display image in Flutter

this is flutter Basics from the flutter Guys YouTube channel in this section we are going to see how we can display images in flutter to display an image in flutter first we need to create a new folder inside the root of the flutter project and named it assets we can also give it any other name if you want next inside this folder add one image manually now we need to Define assets folder in pubspick like this so that we can use images there are several ways to display the image the first method we can use image.assets now here we need past the image path like this we can also change the size of the image by setting the width and height we can use image.network and pass the URL to display the image through URL and internet if you pay attention the height and width of the image are the same and now it should be displayed as a square to solve this problem we should use the fit property and set its value to fill or cover when we display an image it simply pops onto the screen as they are loaded it does not assume useful between the users to overcome this issue the image uses a fade and image widget that shows a placeholder image while the target image is loading then fades in the new image when it loads for example I use the image in assets for the placeholder then we can see that the placeholder image is displayed before the image is loaded from the internet we can use container to custom display in container decoration we have a property called image and its value is equal to decoration image now we can use asset image or network image and image decoration now we can set height and width Again by using the Border property in the container we can set the Border as red or we can set the radius using the Border radius property and we can also display it as a circle by setting the value of the shape property equal to Circle and make the sure hit the Subscribe button to get next video foreign

Channel: Flutter Guys

Views: 3,955

Keywords: flutter tutorial, flutter for beginners, flutter tutorial for beginners, display image in flutter, flutter display image, flutter display image from url, flutter show image, flutter show image from url, flutter network image, flutter local image, flutter local image display, flutter image, flutter image picker, flutter image display, flutter tutorial 2023, flutter course, flutter course full tutorial for beginners, flutter course for beginners, flutter roadmap, flutter bloc

Id: T481iv4G7Wc

Length: 1min 40sec (100 seconds)

Published: Thu Apr 06 2023