Flutter · One codebase, native feel
How do Row, Column, Expanded and Flexible distribute space?
Short answer
Row and Column lay out children along a main axis. Expanded forces a child to fill a share of the free space, while Flexible allows a child to be smaller than its share.
A Flex lays out non-flex children first, then divides the remaining main-axis space among flexible children according to their flex factor. Expanded uses FlexFit.tight, so the child gets exactly its share. Flexible uses FlexFit.loose by default, so the child may take less.
Row(
children: [
const Expanded(
flex: 1,
child: ColoredBox(color: Colors.teal, child: SizedBox(height: 80)),
),
Expanded(
flex: 2,
child: Container(height: 80, color: Colors.amber),
),
],
)- mainAxisAlignment distributes free main-axis space between or around children
- crossAxisAlignment aligns children on the cross axis
- MainAxisSize.min shrinks the flex to its children instead of filling
- Flexible with FlexFit.loose lets text size naturally within the share
- Nested unbounded flex constraints usually come from scroll views
Common production issues
A Row containing a long Text without Expanded overflows, because Text takes its intrinsic width. Wrapping the Text in Expanded or Flexible lets it wrap within the available width. A Row inside a horizontally scrolling view needs a bounded width, for example a SizedBox or a constrained parent.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1What is the difference between Expanded and Flexible?
- 2How do you stop a long Text from overflowing in a Row?
- 3What does MainAxisSize.min change?
- 4Why does a Row inside a horizontal ListView fail without a width?
Say it in the interview
Row and Column are flex containers. They lay out inflexible children first and then divide the remaining space by flex factors. Expanded takes a tight share, while Flexible can take less. In production I mostly use that to let text shrink and wrap instead of overflowing, and I make sure the flex has bounded constraints when it sits inside a scrollable.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Flutter mock interview and get scored feedback on depth, clarity and confidence.