Flutter Image Widget | Display Image From Asset and Network | Visual Studio Code | Tutorial

next we will study how to display images in flutter we will create a new flutter project for that select command pallet from The View menu select the command new project then select the application template next choose a folder for creating the new project finally give a name for the project the new project is created next select a simulator to run the project run the app to ensure the project is running correctly remove all unwanted code from the default template e run the app again now it's a fresh project then we create a folder named assets all assets like images and sounds are kept inside that folder next create another folder named images inside the assets folder add images to the images folder by dragging and dropping them open the pubs spec. yaml file locate the asset section remove the comments in that section ensure proper indentation is followed assets start from this level image paths should also start after two spaces here we give the complete path of the image assets SL images SL your image file name save the file pubget is automatically run in vs code then open the main do. file inside the center widget we add a child widget image first we add an image from the assets then we give the image path here stop the application before running the app then run the app there is an error because we need the full path here provide the full path assets SL imagesimage name. extension then run the app the image is displayed if we set the folder location in the pubp doyl file we can access any images from that location save the pubp yaml file the image is displaying now next we access another image by changing the image and name with its extension the new image is displayed it's also possible to set the width and height of the image then we display an image from the network to do this we wrap the image widget in a column change the size of the first image add another image below it which will be the image from the network here we provide the network location of an image first I opened an image from the internet and copied its URL then I pick pasted the URL here set the height and width for the image run the app now both images are displayed one from the assets and the other from the network subscribe for more videos like this thank you for watching

Channel: True Coders

Views: 404

Keywords: flutter image displaying, photo display flutter, shown photo flutter, photo from internet flutter, flutter photo from asset

Id: pBZ5ITyDUNQ

Length: 11min 4sec (664 seconds)

Published: Mon May 27 2024