Flutter - Display and Adjust Images from Assets

A mobile app usually needs some static images. The images are usually stored in asset folder. Not only displaying images, sometimes we need to adjust how the images should be displayed. This Flutter tutorial gives examples of how to display an image stored in asset folder and adjust the image width, height, color, etc.

The images that will be displayed must be stored in particular folders. While in Android the images must be stored in res/drawable folder by default, in Flutter you can define where the images are stored. What you need to do is adding a list of image paths or a list of directories that contain images in pubspec.yaml file. Each paths must be relative to the application's root directory. Please note that if you use path to a directory, it will only load assets on that diretory excluding its sub-directories. If the path refers to a directory, it must be ended with /.

pubspec.yaml

  flutter:
    assets:
      - assets/images/file-name.jpg
      - assets/images/file-name-2.jpg
     # - assets/images/

After that, you can start to copy images to the paths you've defined. Then, you can load the image using Image.asset by passing the path to the image as the first argument.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Image Tutorial'),
          ),
          body: Center(
            child: Container(child: Image.asset('assets/images/file-name.jpg'))
          ),
        ),
      );
    }
  }

Below are some examples of image adjustment

Adjust Image Size by Setting Width and Height

Image will be render in a 100 x 100 box.

  Image.asset(
    'assets/images/file-name.jpg',
    height: 100,
    width: 100,
 )

 

Adjust Image Size by Scale

The image will look bigger if the scale is less than 1.

  Image.asset(
    'assets/images/file-name.jpg',
    scale: 0.8
 )

 

Fit Image Size

In this example, the image size will be fitted to its width.

  Image.asset(
    'assets/images/file-name.jpg',
    height: 100,
    width: 200,
    fit: BoxFit.fitWidth,
 )

 

Blend Image with a Color

Define a color that will be blended to the image's pixels.

  Image.asset(
    'assets/images/file-name.jpg',
    height: 100,
    width: 100,
    color: Colors.red,
    colorBlendMode: BlendMode.darken,
    fit: BoxFit.fitWidth,
 )

 

For full options available, you can read the table below.

Name Type Description
semanticLabel string Semantic description of the image.
excludeFromSemantics bool Whether to exclude the image from semantics.
scale double How much image is scaled.
width. double Width of the image.
height double Height of the image.
color Color If not null, blend each image pixel with the color, depending on colorBlendMode.
colorBlendMode enum BlendMode How the color blended with the image.
fit enum BoxFit How to inscribe the image into the space allocated during layout.
alignment class AlignmentGeometry How to align the image within its bounds.
repeat enum ImageRepeat
  • repeat
  • repeatX
  • repeatY
  • noRepeat
 How to paint any portions of the layout bounds not covered by the image.
centerSlice enum Rect The center slice for a nine-patch image.
matchTextDirection bool Whether to paint the image in the direction of the TextDirection.
gaplessPlayback bool If true, it briefly shows the old image when the image provider changes. If false, it briefly shows nothing..
package String  
filterQuality enum FilterQuality:
  • none: lowest quality, fastest
  • low: Better than none, faster than medium
  • medium: Better than low, faster than high
  • high: best quality, slowest
 Image filter quality

For displaying image from a network URL, you can read here.