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),
  ]
)

Related posts:

7 Best Flutter Text Libraries Flutter PageView Examples – Custom Animation in PageView.builder Flutter DecoratedBoxTransition Example