Expanded and Flexible in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Understanding Expanded widget behavior

Given a Row with two children: a fixed-width Container and an Expanded Container, what will be the width of the Expanded Container if the Row's total width is 300 pixels and the fixed Container is 100 pixels wide?

Flutter

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(child: Container(color: Colors.blue))
  ]
)

A 200 pixels

B 100 pixels

C 300 pixels

D 0 pixels

💡 Hint

Expanded takes all remaining space after fixed widgets.

The fixed Container takes 100 pixels, so Expanded fills the rest: 300 - 100 = 200 pixels.

❓ ui_behavior

intermediate

Flexible with fit property effect

What is the difference in behavior between Flexible with fit: FlexFit.tight and Flexible with fit: FlexFit.loose inside a Row?

Flutter

Row(
  children: [
    Flexible(fit: FlexFit.tight, child: Container(color: Colors.green)),
    Flexible(fit: FlexFit.loose, child: Container(color: Colors.yellow))
  ]
)

A Both let children be any size they want without constraints.

B FlexFit.tight forces child to fill available space; FlexFit.loose lets child be smaller if it wants.

C Both force children to fill all available space equally.

D FlexFit.loose forces child to fill available space; FlexFit.tight lets child be smaller if it wants.

💡 Hint

Think about how much space the child is forced to occupy.

FlexFit.tight makes the child fill all the space allocated; FlexFit.loose allows the child to be smaller if it chooses.

❓ lifecycle

advanced

Effect of multiple Expanded widgets with flex values

In a Row with three Expanded children having flex values 1, 2, and 3 respectively, how is the available horizontal space divided among them?

Flutter

Row(
  children: [
    Expanded(flex: 1, child: Container(color: Colors.red)),
    Expanded(flex: 2, child: Container(color: Colors.green)),
    Expanded(flex: 3, child: Container(color: Colors.blue))
  ]
)

A Only the child with flex 3 gets all the space; others get none.

B All children get equal space regardless of flex values.

C The space is divided in ratio 1:2:3 among the three children.

D The first child gets all space; others get zero.

💡 Hint

Flex values act like weights for space distribution.

The total flex is 6 (1+2+3). Space is split proportionally: 1/6, 2/6, and 3/6.

🔧 Debug

advanced

Why does this layout overflow error occur?

Consider a Row with two children: a Container with fixed width 200 and an Expanded child. The Row is inside a parent with width 250. Why does a horizontal overflow error occur?

Flutter

Container(
  width: 250,
  child: Row(
    children: [
      Container(width: 200, color: Colors.red),
      Expanded(child: Container(color: Colors.blue))
    ]
  )
)

A Because the fixed Container uses 200 pixels, Expanded tries to fill remaining 50 pixels, but the child inside Expanded has no width constraints and overflows.

B Because Expanded ignores the available space and tries to be 250 pixels wide.

C Because the Row automatically expands beyond parent width causing overflow.

D Because Container with width 250 is too small to hold any children.

💡 Hint

Think about how Expanded passes constraints to its child.

Expanded gives its child max width of remaining space (50 pixels), but if the child tries to be bigger, overflow happens.

🧠 Conceptual

expert

Choosing between Expanded and Flexible

Which statement best describes when to use Expanded versus Flexible in Flutter layouts?

A Use Flexible when you want the child to ignore parent constraints; Expanded forces the child to shrink.

B Use Flexible only inside Columns; Expanded only inside Rows.

C Expanded and Flexible are interchangeable with no difference in behavior.

D Use Expanded when you want the child to fill all remaining space; use Flexible when you want the child to be able to be smaller than the available space.

💡 Hint

Think about how strictly the child fills space.

Expanded forces the child to fill remaining space; Flexible allows the child to be smaller if it wants.

Practice

1. What does the Expanded widget do inside a Row or Column in Flutter?

easy

A. It makes the child widget scrollable.

B. It makes the child widget ignore available space and keep its size.

C. It makes the child widget fill all the available space tightly.

D. It adds padding around the child widget.

Solution

1. Step 1: Understand Expanded behavior

   The Expanded widget forces its child to fill the available space tightly inside a Row or Column.

2. Step 2: Compare with other options

   Other options describe unrelated behaviors like padding or scrolling, which Expanded does not do.

3. Final Answer:

   It makes the child widget fill all the available space tightly. -> Option C

4. Quick Check:

   Expanded = fills space tightly [OK]

Hint: Expanded fills space tightly inside Row or Column [OK]

Common Mistakes:

• Confusing Expanded with Flexible
• Thinking Expanded adds padding
• Assuming Expanded makes widget scrollable

2. Which of the following is the correct syntax to use Flexible with a child widget in Flutter?

easy

A. Flexible(child: Text('Hello'))

B. Flexible(Text('Hello'))

C. Flexible = Text('Hello')

D. Flexible: Text('Hello')

Solution

1. Step 1: Recall Flexible widget syntax

   The correct syntax requires the child widget passed as a named parameter: Flexible(child: ...).

2. Step 2: Identify incorrect syntax

   Options B, C, and D miss the named parameter or use invalid assignment syntax.

3. Final Answer:

   Flexible(child: Text('Hello')) -> Option A

4. Quick Check:

   Flexible uses child: parameter [OK]

Hint: Flexible requires child: parameter for its widget [OK]

Common Mistakes:

• Omitting child: label
• Using assignment instead of constructor
• Passing child without parentheses

3. Consider this Flutter code inside a Row:

Row(
  children: [
    Expanded(child: Container(width: 50, color: Colors.red)),
    Expanded(flex: 2, child: Container(width: 50, color: Colors.blue)),
  ],
)

What will be the relative widths of the red and blue containers on screen?

medium

A. Red fills 1/3, blue fills 2/3 of the row width

B. Red fills half the row, blue fills the other half

C. Red and blue both have fixed width 50 pixels

D. Red fills all space, blue is ignored

Solution

1. Step 1: Understand Expanded and Expanded with flex

   Expanded takes available space tightly with default flex=1. Expanded(flex:2) takes twice the space tightly.

2. Step 2: Calculate relative widths

   Total flex = 1 (first Expanded) + 2 (second Expanded) = 3. Red gets 1/3, blue gets 2/3 of the row width. The width: 50 is overridden by the tight constraints.

3. Final Answer:

   Red fills 1/3, blue fills 2/3 of the row width -> Option A

4. Quick Check:

   Flex ratio 1:2 means widths 1/3 and 2/3 [OK]

Hint: Sum flex values, divide space proportionally [OK]

Common Mistakes:

• Ignoring flex values
• Thinking width property overrides flex
• Assuming equal widths without flex

4. This Flutter code throws an error. What is the problem?

Row(
  children: [
    Flexible(flex: 1),
    Container(color: Colors.green),
  ],
)

medium

A. flex property must be greater than 1.

B. Container cannot be inside a Row.

C. Row requires at least three children.

D. Flexible widget is missing a child widget.

Solution

1. Step 1: Check Flexible widget usage

   Flexible requires a child widget to display. Here, it is missing.

2. Step 2: Validate other options

   Container can be inside Row, flex can be 1, and Row can have any number of children.

3. Final Answer:

   Flexible widget is missing a child widget. -> Option D

4. Quick Check:

   Flexible must have child [OK]

Hint: Flexible always needs a child widget [OK]

Common Mistakes:

• Omitting child in Flexible
• Thinking flex must be >1
• Assuming Row needs 3 children

5. You want two buttons side by side in a Row. The first button should take 1/4 of the width, the second button 3/4. Which Flutter widget setup achieves this best?

hard

A. Row(children: [Expanded(child: Button1), Expanded(child: Button2)])

B. Row(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)])

C. Row(children: [Button1, Button2]) with fixed widths

D. Column(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)])

Solution

1. Step 1: Understand flex distribution in Row

   Using Flexible with flex values 1 and 3 divides the Row width into 4 parts, assigning 1/4 and 3/4 respectively.

2. Step 2: Evaluate other options

   Row(children: [Expanded(child: Button1), Expanded(child: Button2)]) gives equal widths (1/2 each). Row(children: [Button1, Button2]) with fixed widths is less flexible. Column(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)]) uses Column, which stacks vertically, not side by side.

3. Final Answer:

   Row(children: [Flexible(flex: 1, child: Button1), Flexible(flex: 3, child: Button2)]) -> Option B

4. Quick Check:

   Flexible flex ratio 1:3 divides width correctly [OK]

Hint: Use Flexible with flex ratio matching desired width parts [OK]

Common Mistakes:

• Using Expanded for unequal widths
• Using Column instead of Row
• Setting fixed widths instead of flex