Skip to main content
The Image widget allows you to display an image in your Flutter app using JSON. It supports images from multiple sources, including assets, files, and network URLs, and provides customization options such as alignment, color, width, height, and fit. To learn more about the equivalent Flutter widgets and their properties, refer to the official Flutter documentation for Image.

​
Properties

PropertyTypeDescription
srcStringThe source path or URL of the image to display.
alignmentStacAlignmentHow to align the image within its bounds.
imageTypeStacImageTypeThe type of image source: asset, network, or file.
colorStacColorA color filter to apply to the image.
widthdoubleThe width of the image in logical pixels.
heightdoubleThe height of the image in logical pixels.
fitStacBoxFitHow the image should be inscribed into the space allocated during layout.
repeatStacImageRepeatHow the image should be repeated if it doesn’t fill its layout bounds.
filterQualityStacFilterQualityThe quality level for image filtering operations.
semanticLabelStringA semantic description of the image for accessibility.
excludeFromSemanticsboolWhether to exclude this image from semantics.

​
Constructors

​
StacImage.asset

Creates an image widget that loads from Flutter’s asset bundle. 
const StacImage.asset(
  'assets/logo.png',
  width: 200,
  height: 100,
  fit: StacBoxFit.cover,
)

​
StacImage.network

Creates an image widget that loads from a network URL. 
const StacImage.network(
  'https://example.com/image.png',
  width: 200,
  height: 100,
  fit: StacBoxFit.contain,
)

​
StacImage.file

Creates an image widget that loads from a local file path. 
const StacImage.file(
  '/path/to/image.png',
  width: 200,
  height: 100,
)

​
StacImage (Default)

The default constructor allows you to specify any image source with the imageType property. 
const StacImage(
  src: 'assets/logo.png',
  width: 200,
  height: 100,
  fit: StacBoxFit.cover,
)