How do Flexible and Expanded differ in a Row or Column?

WHAT THIS TESTS: The interviewer wants to know if you understand Flutter's flex layout algorithm at the constraint level, not just the API surface. Specifically, they care whether you grasp the difference between tight and loose constraints in the main axis, and how that affects child sizing when space is distributed proportionally via flex factors.

A GOOD ANSWER COVERS: A good answer hits four things in order. First, state that both Flexible and Expanded participate in flex layout by dividing available main-axis space in a Row, Column, or Flex according to their flex values. Second, explain that Flexible uses FlexFit.loose by default, giving the child its proportional share as a maximum but not requiring it to fill that space. Third, explain that Expanded is an implementer of Flexible which forces the child to expand and fill its available proportional share. Fourth, give the practical rule: use Flexible when the child should size itself naturally within its budget, and Expanded when it must consume the full allocation.

COMMON WRONG ANSWERS: A red flag is claiming that Flexible does not expand or participate in space distribution; it does when a flex factor is given. Another red flag is saying Expanded and Flexible are unrelated, when Expanded is listed as an implementer of Flexible. Confusing main-axis behavior with cross-axis behavior is also a warning sign. Finally, describing the difference only visually without mentioning constraints or fit suggests shallow knowledge.

LIKELY FOLLOW-UPS: The interviewer may ask what happens if you wrap a TextField in Flexible versus Expanded inside a Row. They might also ask how Spacer relates to these widgets, or what occurs when a Flexible child has unbounded constraints in the main axis. Another follow-up is asking why you cannot use Flexible inside a Stack or a scrollable viewport without a bounded flex container.

ONE CONCRETE EXAMPLE: Imagine a Row with two children and 200 logical pixels of space after accounting for non-flexible children. If Child A is Flexible with flex 2 and Child B is Expanded with flex 3, the flex sum is 5. Child A gets 80 pixels as a loose constraint; if it is a Container with no child and no explicit size, it will collapse to zero width unless forced otherwise. Child B gets 120 pixels as a tight constraint; if it is a Container with no child, it will still occupy the full 120 pixels because Expanded forces it to fill the allocation.