Skip to main content

Opacity

The Opacity Wrapper is essential for creating a transparency effect. By adjusting opacity levels, you can create UI elements that blend seamlessly into the background or bring focus to more pronounced components.

What does the Opacity Wrapper do?​

The Opacity Wrapper modifies the transparency of a widget, allowing you to create a fade-in or fade-out effect. By changing the opacity of a widget, you can make it completely transparent, completely opaque, or anything in between.

How to add Opacity​

  1. Select the widget you want to modify the Opacity of.
  2. Click on Add Wrapper button in the details panel.
  3. Select Opacity.
  4. In the details panel enter a value between 0 and 1 (like 0.3, 0.5, etc...).
  • When the value is set to "0" it means the widget will be completely transparent.
  • When the value is set to "1" it means the widget will be visible without any transparency.

Other properties:​

The Always Include Semantics property is a boolean that determines whether the semantics of the child widget should always be included, regardless of the opacity value.

Why is it important?​

  1. Accessibility: Screen readers and other assistive technologies rely on semantics to describe and interact with UI elements. If an element is not completely opaque (for instance, it's semi-transparent or fully transparent), its semantics might be excluded by default. This would mean that a screen reader might not "see" the widget even though it's present, albeit faintly, on the screen.
  2. Intentional Design: There could be scenarios where a widget is made transparent for visual users (like indicating a disabled state), but you still want a screen reader to recognize and possibly interact with it. Always Include Semantics allows you to force the inclusion of semantics even if the widget is transparent.