Problem Statement
How do Expanded and Flexible work in Row and Column? Provide examples of when to use each.
Explanation
Expanded and Flexible only work as direct children of Row, Column, or Flex widgets. They control how child widgets fill available space along the main axis. Without Expanded or Flexible, children are sized to their natural size, potentially causing overflow if the total size exceeds available space.
Expanded forces its child to fill all allocated space based on flex value. For example, in a Row with two Expanded children (both flex: 1), each gets exactly 50% of available width even if their content is smaller. Use Expanded when you want widgets to always fill their allocated space, like equal-width buttons in a button bar or creating responsive layouts where sections should always consume their proportional space.
Flexible allows children to occupy up to their allocated space but permits them to be smaller if they want. For example, in a Row with two Flexible children, if one's content is smaller than its allocated space, it only takes what it needs, and the extra space remains unused. Use Flexible when you want to give widgets the option to expand but respect their natural size preferences, like text that might wrap to fewer lines than expected.
The flex parameter determines space distribution ratio. Default flex: 1 means equal sharing. If widgets have flex values 2, 1, 1, the first gets half the space and the others quarter each. Combine Expanded and Flexible in the same Row/Column for sophisticated layouts where some children must fill space while others can be flexible.
