Opacity

The Opacity widget makes its child partially transparent. This is useful for creating visual effects like fading, ghosting, or layering. The widget controls the transparency of its child, allowing you to create more dynamic and visually interesting UIs.

Properties

Property	Description
opacity	The degree to which the child is transparent. A value of 0.0 is completely transparent, and 1.0 is completely opaque.
alwaysIncludeSemantics	Whether the child is included in the semantics tree even when it is transparent.

Default Properties

The Opacity widget supports all three sections of default-properties

Layout

• width

• height

• padding

• margin

• align

Appearance

• bgColor

• borderRadius

• border

  • borderWidth

  • borderColor

  • borderType (e.g., solid, dashed)

  • strokeAlign

Interactions

• onClick — Used to add actions to the Opacity widget.

---

Best Practices

• Use the opacity property to create fade-in and fade-out animations.

• Be mindful of performance when using the Opacity widget, as it can be expensive to render.

• If you only need to change the opacity of a color, it is more efficient to use a color with an alpha channel.