Opacity

The Opacity widget makes its child widget partially transparent, allowing you to control the transparency level of any widget and its contents. This is essential for creating visual effects like fading, ghosting, layering, or dynamic transparency based on user interactions and application state.

The Opacity widget supports both static values and dynamic expressions, making it powerful for creating interactive transparency effects and conditional visibility.


Opacity Properties

Property
Description

Opacity

The degree of transparency applied to the child widget. Values range from 0.0 (completely transparent) to 1.0 (completely opaque). Supports expressions for dynamic transparency effects.

Always Include Semantics

Whether the child widget remains accessible to screen readers even when transparent. Supports expressions for conditional accessibility behavior.


Default Properties

The Opacity widget supports all Default Properties.


Child Widget Support

The Opacity widget accepts any single child widget and applies the transparency effect to the entire widget tree below it. This means:

  • Single Child: The Opacity widget can contain one direct child widget

  • Nested Effects: The child can contain multiple widgets, all affected by the opacity

  • Compound Transparency: Nested Opacity widgets multiply their transparency effects


Performance Considerations

While the Opacity widget is powerful, consider these performance implications:

  • Rendering Cost: Opacity effects can be expensive, especially with complex child widgets

  • Animation Performance: Frequent opacity changes during animations may impact performance

  • Alternative Solutions: For simple color transparency, consider using colors with alpha channels instead

Last updated