The AspectRatio Widget

Learn about a widget that forces the child to keep a given ratio between the height and the width.

We'll cover the following

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.

Get hands-on with 1200+ tech skills courses.