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