How to display asset images in Flutter

A Flutter app can include asset (sometimes called resources) files which is bundled and deployed with your app, and is accessible at runtime.

The Image class provides a constructor to display asset image easily.

Steps to include and display images in assets folder

Copy image files to assets folder

In the root folder of your app, create a new folder called assets. If it already existed, skip the creation part.

Copy required images to the folder like following.

Add definition of image files

In pubspec.yaml, we need to declare a list of images which will be used in the app.

flutter:
  uses-material-design: true

  assets:
    - assets/nature1.jpg
    - assets/nature2.jpg

Show image with Image.asset

Image.asset contructor creates a widget that displays an ImageStream obtained from an asset bundle.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Image.asset('assets/nature1.jpg'),
    SizedBox(height: 16,),
    Image.asset('assets/nature2.jpg', width: 240),
  ]
)

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close