AspectRatio class

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.

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).

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.

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.

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.
finalinherited
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited

Methods

createElement() → SingleChildRenderObjectElement: RenderObjectWidgets always inflate to a RenderObjectElement subclass.
inherited
createRenderObject(BuildContext context) → RenderAspectRatio: Creates an instance of the RenderObject class that this RenderObjectWidget represents, using the configuration described by this RenderObjectWidget.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
override
didUnmountRenderObject(covariant RenderObject renderObject) → void: A render object previously associated with this widget has been removed from the tree. The given RenderObject will be of the same type as returned by this object's createRenderObject.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited
updateRenderObject(BuildContext context, covariant RenderAspectRatio renderObject) → void: Copies the configuration described by this RenderObjectWidget to the given RenderObject, which will be of the same type as returned by this object's createRenderObject.
override

Operators

operator ==(Object other) → bool: The equality operator.
inherited