Opacity

The Opacity widget in Flutter is used to control the transparency level of its child widget. It is a fundamental layout widget that allows you to visually fade or hide elements, crucial for creating subtle visual hierarchy, smooth transitions, and dynamic user interfaces.

Core Concepts

The Opacity widget works by inserting a transparent layer between its parent and child, effectively painting the child's content with the specified level of transparency.

1. Rendering vs. Interaction: The Opacity widget renders its child transparently, but it still occupies the same space in the layout. More importantly, the widget does not prevent its child from receiving hit-testing events (like taps or gestures) unless the opacity is set to .

2. Performance Note: While simple, changing the opacity requires a save-layer operation during rendering, which can be computationally expensive if applied to very complex widgets or if it changes frequently (e.g., in an animation). For frequent, animated changes, use AnimatedOpacity or FadeTransition.

Properties

The Opacity widget has a minimal set of properties focused solely on transparency control and semantics.

Property	Type	Description	Required	Default
opacity	double	The level of transparency to apply to the child. A value of is fully opaque (visible), and is fully transparent (invisible). Values must be between and .	Yes	N/A
child	Widget?	The single widget that will have the specified opacity applied to it.	Yes	N/A
alwaysIncludeSemantics	bool	Determines whether the semantics of the child should be included in the semantics tree even if the opacity is .	No	false

Layout & Behaviour

The Opacity widget always takes the full size required by its child. It does not affect the layout geometry of the surrounding widgets, only the rendering of its content.

alwaysIncludeSemantics

This property is critical for accessibility.

• If alwaysIncludeSemantics is set to false (default), when opacity is , the child is invisible and is removed from the accessibility tree. This means screen readers will ignore the content.

• If set to true, even when opacity is , the child's information remains in the accessibility tree, allowing screen readers to announce the content (e.g., a hidden label or image description).

Default Properties

The Opacity widget supports all Default Properties.