AspectRatio: Forcing a Widget's Proportions
AspectRatio forces a child widget to maintain a specific width-to-height ratio, like a 16:9 video player. Use it for image placeholders or video frames. The footgun: it fails in unconstrained parents like FittedBox; use SizedBox there instead.
Why it exists
UI elements often need to maintain their proportions regardless of screen size or parent container. Without a dedicated widget, you'd have to manually calculate dimensions based on available space, which is complex and error-prone, especially in responsive layouts. AspectRatio automates this proportional sizing.
The mental model
Think of AspectRatio as a frame that tells its content, "No matter how big or small I get, you must keep a 4:3 ratio." It tries to be as big as possible within its parent's limits, but its primary goal is to enforce the child's proportions, even if it means the child doesn't fill all available space.
How it works
AspectRatio uses an efficient iterative process to find the best size. First, it checks its parent's constraints. It typically tries to use the maximum available width, then calculates the required height using the formula: height = width / aspectRatio. If this calculated size fits within the parent's constraints, it's used. If not (e.g., the calculated height is too tall), it will re-evaluate, perhaps starting with the maximum allowed height and calculating the width. If it still can't find a size that satisfies both the aspect ratio and the parent constraints, it will ultimately prioritize the parent's constraints, potentially breaking the aspect ratio.
When to use it
Use AspectRatio for any element that needs fixed proportions. Common cases include creating placeholders for images or videos before they load (e.g., a 16:9 gray box), ensuring a user profile picture is always square (aspectRatio: 1.0), or building responsive card layouts where the content's shape must be consistent.
When not to use it
Avoid AspectRatio when the child is inside a parent with unconstrained dimensions, like a Row, Column, or FittedBox. In these scenarios, AspectRatio has no initial size to base its calculations on and cannot resolve the constraints. The layout will likely fail or behave unpredictably. Use a SizedBox to give the child an explicit size in these cases.
One canonical example
Imagine a container that is 300px wide and 300px tall. You place an AspectRatio widget inside it with an aspectRatio of 2.0 (twice as wide as it is tall). The widget first tries to use the max width of 300px. It calculates the required height as 300 / 2.0 = 150px. Since a size of 300x150 fits perfectly inside the 300x300 container, the child will be rendered at 300px wide and 150px tall.
Interview question
Which scenario is explicitly identified as a situation where AspectRatio should be avoided due to potential layout failure or unpredictable behavior?
- a.When the aspectRatio value is set to make the widget taller than it is wide (e.g., 0.5).
- b.When the child widget already has intrinsic dimensions that conflict with the specified aspect ratio.
- c.When its direct parent widget provides unconstrained dimensions for its children.Correct
- d.When the desired aspect ratio results in a child size that exceeds the parent's maximum allowed dimensions.
Why? this is the answer
The card explicitly states to "Avoid AspectRatio when the child is inside a parent with unconstrained dimensions" because it "cannot resolve the constraints" and the "layout will likely fail or behave unpredictably." In other scenarios, AspectRatio either adapts to constraints or successfully enforces the ratio.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles