
In this article, we’re going to learn, how to display images locally in your flutter app.
Getting Started
First, create a new project & change your working directory
flutter create testproj
<span class="hljs-built_in">cd</span> testproj
Display Image from /assets folder
In case, If you want to display any image locally, (eg. from the project folder), we need to use the following methods
- Create a new folder called /assets in your project folder. (File path will be
testproj/assets/
) - Copy images to your /assets folder
- Open your
pubspec.yaml
and add these lines<span class="hljs-symbol"> flutter:</span> assets: - <span class="hljs-meta-keyword">/assets/</span>image.png
so final
pubspec.yaml
looks like this (Your flutter SDK version might be different)<span class="hljs-attribute">name</span>: testproj <span class="hljs-attribute">description</span>: A new Flutter project. <span class="hljs-attribute">version</span>: <span class="hljs-number">1.0</span>.<span class="hljs-number">0</span>+<span class="hljs-number">1</span> <span class="hljs-attribute">environment</span>: <span class="hljs-attribute">sdk</span>: <span class="hljs-string">">=2.1.0 <3.0.0"</span> <span class="hljs-attribute">dependencies</span>: <span class="hljs-attribute">flutter</span>: <span class="hljs-attribute">sdk</span>: flutter <span class="hljs-attribute">cupertino_icons</span>: ^<span class="hljs-number">0.1</span>.<span class="hljs-number">2</span> <span class="hljs-attribute">dev_dependencies</span>: <span class="hljs-attribute">flutter_test</span>: <span class="hljs-attribute">sdk</span>: flutter <span class="hljs-attribute">flutter</span>: <span class="hljs-attribute">uses-material-design</span>: true <span class="hljs-attribute">assets</span>: - /assets/image.png
Note: Spacing is very important
- Now using the following code, you can display an image
Image.asset(<span class="hljs-string">"/assets/image.png"</span>)<span class="hljs-comment">;</span>