How to Display Flutter in your flutter app

Display Images in Flutter

Display Image in your flutter apps

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

    flutter:
        /assets:
        - /assets/flutterowl.png

    so final pubspec.yaml looks like this

    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/flutterowl.png

    Note: Spacing is very important

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

Display Image in your flutter apps from folder


Display Image from Network

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

Image.network("http://website.com/flutterowl.png");

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://website.com/flutterowl.png", height: 150.0, width: 150.0)
Image.asset("/assets/flutterow.png", height: 100.0, width: 100.0)

Display Image in your flutter apps from network


Download Source code