How To Display Image Locally in Flutter

flutter-display-image-locally
flutter-display-image-locally

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
cd 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
     flutter:
        assets:
         - /assets/image.png
    

    so final pubspec.yaml looks like this (Your flutter SDK version might be different)

     name: testproj
     description: A new Flutter project.
     version: 1.0.0+1
     environment:
     sdk: ">=2.1.0 <3.0.0"
    
     dependencies:
     flutter:
         sdk: flutter
     cupertino_icons: ^0.1.2
    
     dev_dependencies:
     flutter_test:
         sdk: flutter
    
     flutter:
      uses-material-design: true
      assets:
         - /assets/image.png
    

    Note: Spacing is very important

  4. Now using the following code, you can display an image
Image.asset("/assets/image.png");