Image class Null safety

A widget that displays an image.

Several constructors are provided for the various ways that an image can be specified:

Image.new, for obtaining an image from an ImageProvider.
Image.asset, for obtaining an image from an AssetBundle using a key.
Image.network, for obtaining an image from a URL.
Image.file, for obtaining an image from a File.
Image.memory, for obtaining an image from a Uint8List.

The following image formats are supported: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP. Additional formats may be supported by the underlying platform. Flutter will attempt to call platform API to decode unrecognized formats, and if the platform API supports decoding the image Flutter will be able to render it.

To automatically perform pixel-density-aware asset resolution, specify the image using an AssetImage and make sure that a MaterialApp, WidgetsApp, or MediaQuery widget exists above the Image widget in the widget tree.

The image is painted using paintImage, which describes the meanings of the various fields on this class in more detail.

The default constructor can be used with any ImageProvider, such as a NetworkImage, to display an image from the internet.

An image of an owl displayed by the image widget

const Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

The Image Widget also provides several constructors to display different types of images for convenience. In this example, use the Image.network constructor to display an image from the internet.

An image of an owl displayed by the image widget using the shortcut constructor

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

The Image.asset, Image.network, Image.file, and Image.memory constructors allow a custom decode size to be specified through cacheWidth and cacheHeight parameters. The engine will decode the image to the specified size, which is primarily intended to reduce the memory usage of ImageCache.

In the case where a network image is used on the Web platform, the cacheWidth and cacheHeight parameters are ignored as the Web engine delegates image decoding of network images to the Web, which does not support custom decode sizes.

Constructors

Image({Key? key, required ImageProvider<Object> image, ImageFrameBuilder? frameBuilder, ImageLoadingBuilder? loadingBuilder, ImageErrorWidgetBuilder? errorBuilder, String? semanticLabel, bool excludeFromSemantics = false, double? width, double? height, Color? color, Animation<double>? opacity, BlendMode? colorBlendMode, BoxFit? fit, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, Rect? centerSlice, bool matchTextDirection = false, bool gaplessPlayback = false, bool isAntiAlias = false, FilterQuality filterQuality = FilterQuality.low}): Creates a widget that displays an image.
const
Image.asset(String name, {Key? key, AssetBundle? bundle, ImageFrameBuilder? frameBuilder, ImageErrorWidgetBuilder? errorBuilder, String? semanticLabel, bool excludeFromSemantics = false, double? scale, double? width, double? height, Color? color, Animation<double>? opacity, BlendMode? colorBlendMode, BoxFit? fit, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, Rect? centerSlice, bool matchTextDirection = false, bool gaplessPlayback = false, bool isAntiAlias = false, String? package, FilterQuality filterQuality = FilterQuality.low, int? cacheWidth, int? cacheHeight}): Creates a widget that displays an ImageStream obtained from an asset bundle. The key for the image is given by the name argument.
Image.file(File file, {Key? key, double scale = 1.0, ImageFrameBuilder? frameBuilder, ImageErrorWidgetBuilder? errorBuilder, String? semanticLabel, bool excludeFromSemantics = false, double? width, double? height, Color? color, Animation<double>? opacity, BlendMode? colorBlendMode, BoxFit? fit, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, Rect? centerSlice, bool matchTextDirection = false, bool gaplessPlayback = false, bool isAntiAlias = false, FilterQuality filterQuality = FilterQuality.low, int? cacheWidth, int? cacheHeight}): Creates a widget that displays an ImageStream obtained from a File.
Image.memory(Uint8List bytes, {Key? key, double scale = 1.0, ImageFrameBuilder? frameBuilder, ImageErrorWidgetBuilder? errorBuilder, String? semanticLabel, bool excludeFromSemantics = false, double? width, double? height, Color? color, Animation<double>? opacity, BlendMode? colorBlendMode, BoxFit? fit, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, Rect? centerSlice, bool matchTextDirection = false, bool gaplessPlayback = false, bool isAntiAlias = false, FilterQuality filterQuality = FilterQuality.low, int? cacheWidth, int? cacheHeight}): Creates a widget that displays an ImageStream obtained from a Uint8List.
Image.network(String src, {Key? key, double scale = 1.0, ImageFrameBuilder? frameBuilder, ImageLoadingBuilder? loadingBuilder, ImageErrorWidgetBuilder? errorBuilder, String? semanticLabel, bool excludeFromSemantics = false, double? width, double? height, Color? color, Animation<double>? opacity, BlendMode? colorBlendMode, BoxFit? fit, AlignmentGeometry alignment = Alignment.center, ImageRepeat repeat = ImageRepeat.noRepeat, Rect? centerSlice, bool matchTextDirection = false, bool gaplessPlayback = false, FilterQuality filterQuality = FilterQuality.low, bool isAntiAlias = false, Map<String, String>? headers, int? cacheWidth, int? cacheHeight}): Creates a widget that displays an ImageStream obtained from the network.

Properties

alignment → AlignmentGeometry: How to align the image within its bounds.
final
centerSlice → Rect?: The center slice for a nine-patch image.
final
color → Color?: If non-null, this color is blended with each image pixel using colorBlendMode.
final
colorBlendMode → BlendMode?: Used to combine color with this image.
final
errorBuilder → ImageErrorWidgetBuilder?: A builder function that is called if an error occurs during image loading.
final
excludeFromSemantics → bool: Whether to exclude this image from semantics.
final
filterQuality → FilterQuality: The rendering quality of the image.
final
fit → BoxFit?: How to inscribe the image into the space allocated during layout.
final
frameBuilder → ImageFrameBuilder?: A builder function responsible for creating the widget that represents this image.
final
gaplessPlayback → bool: Whether to continue showing the old image (true), or briefly show nothing (false), when the image provider changes. The default value is false.
final
hashCode → int: The hash code for this object.
nonVirtual">@nonVirtualread-onlyinherited
height → double?: If non-null, require the image to have this height.
final
image → ImageProvider<Object>: The image to display.
final
isAntiAlias → bool: Whether to paint the image with anti-aliasing.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
loadingBuilder → ImageLoadingBuilder?: A builder that specifies the widget to display to the user while an image is still loading.
final
matchTextDirection → bool: Whether to paint the image in the direction of the TextDirection.
final
opacity → Animation<double>?: If non-null, the value from the Animation is multiplied with the opacity of each image pixel before painting onto the canvas.
final
repeat → ImageRepeat: How to paint any portions of the layout bounds not covered by the image.
final
runtimeType → Type: A representation of the runtime type of the object.
read-onlyinherited
semanticLabel → String?: A Semantic description of the image.
final
width → double?: If non-null, require the image to have this width.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<Image>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
protected">@protectedinherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic: Invoked when a non-existent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
nonVirtual">@nonVirtualinherited

Image class Null safety

Constructors

Properties

Methods

Operators

widgets library