AspectRatio

Overview

Locks the width-to-height ratio. Use it to reserve a 16:9 thumbnail or video area, for example.

Properties

Property	Description	Values	Default
aspectRatio	Locks the widget's width:height ratio to this value (width ÷ height). The size is decided from the space the parent provides, not from the child content — see "How the size is determined" below.	Number greater than 0	1.0

How the size is determined

AspectRatio does not size itself to the child content. It first decides its own size from the layout space — the constraints — that the parent provides, then fits the child into that size.

• Takes the maximum width the parent offers → height = width ÷ ratio
• If the width is unbounded → takes the maximum height instead, so width = height × ratio
• If the result falls outside the parent's constraints, it is clamped back into range.

warning

So inside a parent that offers wide space in one direction, such as a Row or Column, the width expands to whatever the parent allows — not to the child (text, for instance). Apply AspectRatio to text inside a Row and the width stretches to the width the Row allows rather than the width of the letters, and the height follows from that width and the ratio. To size to the child instead, constrain the width on the parent side: wrap it in a SizedBox or a fixed width, or place it with Align or Center.