Skip to content

[Primitives] - Create an Image widget #3

@matthew-carroll

Description

@matthew-carroll

Swift UI has an Image view, which is similar to Flutter's Image widget. Create a new Image widget that behaves like the Swift UI version.

Specification analysis is available here: https://github.com/Flutter-Bounty-Hunters/swift_ui/wiki/Case-Study:-Cloning-Swift-UI's-Image-view

The desired API is:

From an asset by name, labeled:

Image(
  this.assetName,     // name of image file, also "label" value if no label is provided
  this.bundle,        // (optional) bundle to find the image asset
  this.label,         // (optional) accessibility label
  // -- following apply to most/all other configurations --
  this.orientation,   // (optional) image orientation (rotated, mirrored, flipped, etc)
  this.resizable,     // (optional) Sets the mode by which SwiftUI resizes an image to fit its space.
  this.antialiased,   // (optional) Specifies whether SwiftUI applies antialiasing when rendering the image.
  this.renderingMode, // (optional) Whether to replace transparent pixels with foreground color
  this.interpolation, // (optional) Specifies the current level of quality for rendering an image that requires interpolation.
  this.allowedDynamicRange, // (optional) The allowed dynamic range for the view
);

From an asset by name, decorative (unlabeled):

Image.decorative(
  this.assetName,     // name of image file, also "label" value if no label is provided
  this.bundle,        // (optional) bundle to find the image asset
  // -- add other common properties --
);

From a system image:

Image.system(
  this.systemImageName, // name of the system image, i.e., SF Symbol, e.g., "trash.square.fill"
  this.label,           // (optional) accessibility label
  this.variableValue,   // (optional) system symbol customization value
  // -- add other common properties --
);

From a dart:ui Image:

Image.fromImage(
  this.memoryImage,
);

From a custom painter:

Image.fromRenderer(
  this.renderer,  // The custom painter that renders the image
  this.size,      // The size of the rendered image
  this.label,     // (optional) accessibility label
  this.opaque,    // A Boolean value that indicates whether the image is fully opaque. 
                  // This may improve performance when true. Don’t render non-opaque 
                  // pixels to an image declared as opaque. Defaults to false.
  this.colorMode, // The working color space and storage format of the image. Defaults 
                  // to ColorRenderingMode.nonLinear.
);

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions