Image

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

Property	Type	Description
`src`	`String`	The source path or URL of the image to display.
`alignment`	`StacAlignment`	How to align the image within its bounds.
`imageType`	`StacImageType`	The type of image source: `asset`, `network`, or `file`.
`color`	`StacColor`	A color filter to apply to the image.
`width`	`double`	The width of the image in logical pixels.
`height`	`double`	The height of the image in logical pixels.
`fit`	`StacBoxFit`	How the image should be inscribed into the space allocated during layout.
`repeat`	`StacImageRepeat`	How the image should be repeated if it doesn’t fill its layout bounds.
`filterQuality`	`StacFilterQuality`	The quality level for image filtering operations.
`semanticLabel`	`String`	A semantic description of the image for accessibility.
`excludeFromSemantics`	`bool`	Whether to exclude this image from semantics.

Constructors

StacImage.asset

Creates an image widget that loads from Flutter’s asset bundle.

Dart
JSON
Preview

const StacImage.asset(
  'assets/logo.png',
  width: 200,
  height: 100,
  fit: StacBoxFit.cover,
)

{
  "type": "image",
  "src": "assets/logo.png",
  "imageType": "asset",
  "width": 200,
  "height": 100,
  "fit": "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,
)

{
  "type": "image",
  "src": "https://example.com/image.png",
  "imageType": "network",
  "width": 200,
  "height": 100,
  "fit": "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,
)

{
  "type": "image",
  "src": "/path/to/image.png",
  "imageType": "file",
  "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,
)

{
  "type": "image",
  "src": "assets/logo.png",
  "width": 200,
  "height": 100,
  "fit": "cover"
}

Icon Opacity

Layout Widgets

Display Widgets

Interactive Widgets

Data Widgets

Properties

Constructors

StacImage.asset

StacImage.network

StacImage.file

StacImage (Default)

​Properties

​Constructors

​StacImage.asset

​StacImage.network

​StacImage.file

​StacImage (Default)

Properties

Constructors

StacImage.asset

StacImage.network

StacImage.file

StacImage (Default)