Image

A widget that displays an image. The following image formats are supported: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP.

The Image class provides various constructor that provide us various way to display images:

• Image.asset()
• Image.network()
• Image.file()
• Image.memory()

Properties

image

The image to display.

height

Specifies the height of the Image widget.

width

Specifies the width of the Image widget.

fit

Specifies how to inscribe the image into the space allocated during layout. Use BoxFit to provide the values. See BoxFit section to learn about BoxFit.

alignment

Specifies the alignment of the Image. For example, if the alignment is Alignment.topLeft, the image will start from top left corner of the Image widget. If the alignment is Alignment.bottomRight, the image will start from the bottom right corner of the Image widget.

repeat

It specifies if the image should repeat. If the image is smaller than the Image widget, you can use this property to control the behaviour of filling the uncovered area of the widget. The ImageRepeat enum is used for providing the values. It defines the following constants:

• noRepeat: Leave uncovered portions of the box transparent.
• repeat: Repeat the image in both the x and y directions until the box is filled.
• repeatX: Repeat the image in the x direction until the box is filled horizontally.
• repeatY: Repeat the image in the y direction until the box is filled vertically.

Image.network

The named constructor network() can be used to display an image that is fetched from the internet.

Image.network(
  'https://github.com/flutter/plugins/raw/master/packages/video_player/demo_ipod.gif',
);

You can use loadingBuilder to show some progress while the image is loading.

Image.network(
	imgURL,
	fit: BoxFit.fill,
	loadingBuilder:(BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
		if (loadingProgress == null) 
			return child;
		return Center(
			child: CircularProgressIndicator(
				value: loadingProgress.expectedTotalBytes != null ? 
					loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes : null,
			),
		);
	},
),

The second parameter of the loadingBuilder callback is child. It is the Image widget itself. Typically, this builder will wrap the child widget in some way and return the wrapped widget. If this builder returns child directly, it will yield the same result as if Image.loadingBuilder was null.

The loadingProgress argument contains the current progress towards loading the image. This argument will be non-null while the image is loading, but it will be null in the following cases:

• When the widget is first rendered before any bytes have been loaded.
• When an image has been fully loaded and is available to be painted.

This builder must not return null.

You will see the following output: