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.

NameTypeDescription
semanticLabelstringSemantic description of the image.
excludeFromSemanticsboolWhether to exclude the image from semantics.
scaledoubleHow much image is scaled.
width.doubleWidth of the image.
heightdoubleHeight of the image.
colorColorIf not null, blend each image pixel with the color, depending on colorBlendMode.
colorBlendModeenum BlendModeHow the color blended with the image.
fitenum BoxFitHow to inscribe the image into the space allocated during layout.
alignmentclass AlignmentGeometryHow to align the image within its bounds.
repeatenum ImageRepeat
  • repeat
  • repeatX
  • repeatY
  • noRepeat
How to paint any portions of the layout bounds not covered by the image.
centerSliceenum RectThe center slice for a nine-patch image.
matchTextDirectionboolWhether to paint the image in the direction of the TextDirection.
gaplessPlaybackboolIf true, it briefly shows the old image when the image provider changes. If false, it briefly shows nothing..
packageString 
filterQualityenum 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.