A widget that attempts to size the child to a specific aspect ratio.
The aspect ratio is expressed as a ratio of width to height. For example, a
16:9 width:height aspect ratio would have a value of 16.0/9.0.
The
AspectRatio
widget uses a finite iterative process to compute the
appropriate constraints for the child, and then lays the child out a single
time with those constraints. This iterative process is efficient and does
not require multiple layout passes.
The widget first tries the largest width permitted by the layout
constraints, and determines the height of the widget by applying the given
aspect ratio to the width, expressed as a ratio of width to height.
If the maximum width is infinite, the initial width is determined
by applying the aspect ratio to the maximum height instead.
The widget then examines if the computed dimensions are compatible with the
parent's constraints; if not, the dimensions are recomputed a second time,
taking those constraints into account.
If the widget does not find a feasible size after consulting each
constraint, the widget will eventually select a size for the child that
meets the layout constraints but fails to meet the aspect ratio constraints.
This examples shows how
AspectRatio
sets the width when its parent's width
constraint is infinite. Since the parent's allowed height is a fixed value,
the actual width is determined via the given
aspectRatio
.
In this example, the height is fixed at 100.0 and the aspect ratio is set to
16 / 9, making the width 100.0 / 9 * 16.
link
To create a local project with this code sample, run:
flutter create --sample=widgets.AspectRatio.1 mysample
This second example uses an aspect ratio of 2.0, and layout constraints that
require the width to be between 0.0 and 100.0, and the height to be between
0.0 and 100.0. The widget selects a width of 100.0 (the biggest allowed) and
a height of 50.0 (to match the aspect ratio).
link
To create a local project with this code sample, run:
flutter create --sample=widgets.AspectRatio.2 mysample
This third example is similar to the second, but with the aspect ratio set
to 0.5. The widget still selects a width of 100.0 (the biggest allowed), and
attempts to use a height of 200.0. Unfortunately, that violates the
constraints because the child can be at most 100.0 pixels tall. The widget
will then take that value and apply the aspect ratio again to obtain a width
of 50.0. That width is permitted by the constraints and the child receives a
width of 50.0 and a height of 100.0. If the width were not permitted, the
widget would continue iterating through the constraints.
link
To create a local project with this code sample, run:
flutter create --sample=widgets.AspectRatio.3 mysample
Setting the aspect ratio in unconstrained situations
When using a widget such as
FittedBox
, the constraints are unbounded. This
results in
AspectRatio
being unable to find a suitable set of constraints
to apply. In that situation, consider explicitly setting a size using
SizedBox
instead of setting the aspect ratio using
AspectRatio
. The size
is then scaled appropriately by the
FittedBox
.
See also:
- Align
, a widget that aligns its child within itself and optionally
sizes itself based on the child's size.
- ConstrainedBox
, a widget that imposes additional constraints on its
child.
- UnconstrainedBox
, a container that tries to let its child draw without
constraints.
- The
catalog of layout widgets
.
Constructors
-
AspectRatio
(
{
Key
?
key
,
required
double
aspectRatio
,
Widget
?
child
}
)
-
Creates a widget with a specific aspect ratio.
const
Properties
-
aspectRatio
→
double
-
The aspect ratio to attempt to use.
final
-
child
→
Widget
?
-
The widget below this widget in the tree.
final
inherited
-
hashCode
→
int
-
The hash code for this object.
no setter
inherited
-
key
→
Key
?
-
Controls how one widget replaces another widget in the tree.
final
inherited
-
runtimeType
→
Type
-
A representation of the runtime type of the object.
no setter
inherited