Data Display¶

Data display widgets provide visual building blocks such as text, images, and icons.

Use them to render content and represent brand identity.

Widget	Description	Usage Tip
`Text`	Displays a single-style string	Best for labels and short copy
`Image`	Displays raster images (JPG, PNG)	Supports both asset and URL sources
`SVG`	Displays vector graphics without quality loss	Recommended for logos and monochrome icons
`Icon`	Displays system or custom font icons	Useful for lightweight symbolic UI

Text¶

The basic widget for rendering plain text.

Property	Description and Tip
`text`	Rendered string. If no binding is set, default text can render as `Hello World`.
`style.color`	Supports Lucy palette tokens and HEX values. Use full opacity (`FF`) by default.
`fontSize`	Uses logical pixel units. For responsive behavior, prefer Lucy responsive tools over ad-hoc logic.
`fontWeight`	Dropdown values map directly to Flutter `FontWeight` names.

Displays bitmap images from multiple sources.

Property	Description and Tip
`imageProvider`	Supports modes such as `assetImage`, `networkImage`, and `fileImage`.
`assetName / URL`	Enter source path or URL for the selected mode. Use `https://` for network images.
`placeholder`	Local asset shown while a network image is loading.
`fit`	Controls rendering mode: `cover`, `fill`, `contain`, and more.
`isAntiAlias`	Reduces jagged edges during transforms and clipping. Keep `false` unless needed.

Displays vector graphics and supports full-widget tinting.

Property	Description and Tip
`pictureProvider`	Supports source types such as `asset`, `network`, and `file`.
`assetName / URL / filePath`	Enter the source path or URL for the selected provider mode.
`placeholder`	Local SVG/PNG used while network content is loading.
`color / colorBlendMode`	Applies a single tint to the full SVG. Avoid if the asset is multicolor.
`fit`	Controls layout mode such as `contain`, `cover`, or `fill`.

Displays built-in or custom font icons.

Property	Description and Tip
`iconData`	Open settings to pick from Material icon sets.
`size`	Controls icon width and height in pixels.
`color`	Applies a solid tint color.
`onTap`	Defines action when icon is used as a button.
`semanticLabel`	Accessibility label for screen readers.

Tip

If you need image-based icons (SVG/PNG), prefer the Image or SVG widget.