The AspectRatio Widget

When implementing a Flutter application with a responsive UI in mind, we need to be careful how much space it takes in proportion with what’s available.

The AspectRatio widget deals with proportions and not with exact dimensions. It takes a ratio between the width and height and attempts to set the size of its child. It accomplishes this by giving the child all the available width and calculating the height by applying the ratio to that width. If the available width is infinite, the calculation is done in the other direction. This means the ratio is applied to the available height to calculate the width.

The AspectRatio widget attempts to size its child, but it might fail. For instance, if both the width and height are infinite, the AspectRatio doesn’t affect the child’s size because it cannot calculate the correct values for height and width.