How To Display Image Locally in Flutter

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

1. Create a new folder called /assets in your project folder. (File path will be testproj/assets/)
2. Copy images to your /assets folder
3. 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

4. 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>