Display Images in Flutter

This article, we’re going to learn, how to display images in your flutter app.

What you’ll learn?

  • Display Images from /assets folder
  • Display Image from Network

Getting Started

First, create a new project & change your working dirctory

flutter create testproj
cd testproj

Display Image from /assets folder

Incase, If you want to display any image locally, (eg. from Project folder), we need to use 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

         - /assets/flutterowl.png

    so final pubspec.yaml looks like this

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

    Note: Spacing is very important

  4. Now using following code you can display an image

Display Image from Network

To display image from network, we need to use following code


Change Height ant Width for Image

In case, IF you want to change and height, width of your image, you can do it with following code

Image.network("http://flutterowl.com/flutterowl.png", height: 150.0, width: 150.0)
Image.asset("/assets/flutterow.png", height: 100.0, width: 100.0)

Download Source code

Share on:

Download Source Code: