Image
Display images from multiple sources
Builds image nodes from a symbol, a URL or a file, and operates on pixels: download, resize, crop, tint, blur, QR and barcodes. Everything takes and returns the same image value, so results go straight into an Image node or into Canvas.draw.image. Http returns text or JSON, so Image.download is the only way to get image bytes into a script. The pixel operations need bytes, and a network image has none until it is fetched.
Methods
Image.network(url, options?)WidgetNodeCreate an image from a URL.
- url String required
The image URL. Fetched by the widget before it renders; the pixel operations need Image.download instead.
- options Any
- width Any
A number of points, or a Size.
- height Any
A number of points, or a Size.
- fit BoxFit
A BoxFit, for how the image fills its box.
- cornerRadius Number
Rounds the corners.
- color Color
Tints an SF Symbol. No effect on a photo.
- fontSize Number
Sizes an SF Symbol, which scales with type rather than with a frame.
- weight FontWeight
A FontWeight for an SF Symbol.
- renderingMode String
"monochrome", "hierarchical", "palette" or "multicolor", for an SF Symbol.
- paletteColors [Color]
Colours for renderingMode "palette".
- width Any
Image.symbol(name, options?)WidgetNodeCreate an SF Symbol image. weight: 'ultraLight'|'thin'|'light'|'regular'|'medium'|'semibold'|'bold'|'heavy'|'black'. renderingMode: 'monochrome'|'hierarchical'|'palette'|'multicolor'. For palette mode, pass color as an array: [Color.blue(), Color.yellow()].
- name String required
An SF Symbol name.
- options Any
- width Any
A number of points, or a Size.
- height Any
A number of points, or a Size.
- fit BoxFit
A BoxFit, for how the image fills its box.
- cornerRadius Number
Rounds the corners.
- color Color
Tints an SF Symbol. No effect on a photo.
- fontSize Number
Sizes an SF Symbol, which scales with type rather than with a frame.
- weight FontWeight
A FontWeight for an SF Symbol.
- renderingMode String
"monochrome", "hierarchical", "palette" or "multicolor", for an SF Symbol.
- paletteColors [Color]
Colours for renderingMode "palette".
- width Any
Image.file(path, options?)WidgetNodeCreate an image from a file path.
- path String required
A path on disk.
- options Any
- width Any
A number of points, or a Size.
- height Any
A number of points, or a Size.
- fit BoxFit
A BoxFit, for how the image fills its box.
- cornerRadius Number
Rounds the corners.
- color Color
Tints an SF Symbol. No effect on a photo.
- fontSize Number
Sizes an SF Symbol, which scales with type rather than with a frame.
- weight FontWeight
A FontWeight for an SF Symbol.
- renderingMode String
"monochrome", "hierarchical", "palette" or "multicolor", for an SF Symbol.
- paletteColors [Color]
Colours for renderingMode "palette".
- width Any
Image.download(url, options?)WidgetNodeFetches an image and returns it with its bytes attached.
- url String required
The image URL.
- options Any
- timeout Duration
How long to wait. Default 10 seconds.
- timeout Duration
Image.fromBase64(encoded)WidgetNodeAn image from base64 data.
- encoded String required
Image.toBase64(image)StringPNG data as base64 - what Http multipart wants for an upload.
- image WidgetNode required
Image.size(image)AnyThe image's dimensions.
- image WidgetNode required
returns { width, height } in points.
Image.resize(image, options)WidgetNodeGiving one keeps the aspect ratio.
- image Any required
The image to resize.
- options Any required
One of width or height keeps the aspect ratio; both stretch.
- width Number
Target width in pixels.
- height Number
Target height in pixels.
- width Number
Image.crop(image, options)WidgetNodeCuts a rectangle out of an image.
- image Any required
The image to crop.
- options Any required
- x Number
Left edge in pixels. Default 0.
- y Number
Top edge in pixels. Default 0.
- width Number
Width in pixels. Defaults to the rest of the image.
- height Number
Height in pixels. Defaults to the rest of the image.
- x Number
returns A new image. The original is untouched.
Image.tint(image, color)WidgetNodeRecolours while keeping transparency - for glyphs and logos.
- image WidgetNode required
- color Color required
Image.blur(image, radius?)WidgetNodeGaussian blur, cropped back to the original size. Radius defaults to 8.
- image WidgetNode required
- radius Number
Image.qr(text, options?)WidgetNodeA QR code. where correction is L, M, Q or H.
- text String required
What the code encodes.
- options Any
- size Number
Side in pixels. Default 200.
- correction String
Error correction: "L", "M" (default), "Q" or "H". Higher survives more damage and holds less data.
- size Number
Image.barcode(text, options?)WidgetNodeType is code128, pdf417 or aztec.
- text String required
What the code encodes.
- options Any
- type String
"code128" (default), "pdf417" or "aztec".
- size Number
Height in pixels. Default 200.
- type String
Examples
SF Symbol icon
Image.symbol("star.fill", {
fontSize: 48,
color: Color.yellow()
})Network image
Image.network("https://example.com/photo.jpg", {
width: Size.infinity,
height: Size.fixed(200),
cornerRadius: 12,
fit: "cover"
})A downloaded avatar
var photo = Image.download(user.avatarUrl);
var avatar = Image.resize(photo, { width: 44 });
Row({ children: [avatar, SizedBox({ width: 8 }), Text(user.name)] })A QR code
Script.setWidget(new Widget({
child: Image.qr(Widget.parameter || "hello", { size: 140 }),
}));