Wrap widget in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does the Wrap widget arrange children?

Given a Wrap widget with several children that exceed the screen width, how does it arrange these children?

A It arranges children horizontally and wraps them to the next line when space runs out.

B It places children in a single horizontal line and clips the overflow.

C It stacks all children vertically without wrapping.

D It arranges children randomly on the screen.

💡 Hint

Think about how text wraps in a paragraph when it reaches the edge.

The Wrap widget arranges children horizontally and moves to the next line when there is no more horizontal space, similar to how words wrap in a paragraph.

📝 Syntax

intermediate

Identify the correct Wrap widget syntax

Which of the following Flutter code snippets correctly creates a Wrap widget with three Text children?

A Wrap(children: {Text('One'), Text('Two'), Text('Three')})

B Wrap(children: [Text('One'), Text('Two'), Text('Three')])

C Wrap(children: Text('One'), Text('Two'), Text('Three'))

D Wrap(child: [Text('One'), Text('Two'), Text('Three')])

💡 Hint

Remember the children property expects a list of widgets.

The children property must be a list of widgets enclosed in square brackets []. Option B correctly uses children: [ ... ].

❓ ui_behavior

advanced

What is the effect of changing the spacing property in Wrap?

If you set spacing: 20.0 in a Wrap widget, what will happen?

A Children will have 20 pixels of horizontal space between them.

B Children will overlap by 20 pixels horizontally.

C Children will have 20 pixels of padding inside each child.

D Children will have 20 pixels of vertical space between them.

💡 Hint

Spacing controls the gap between items in the main axis direction.

The spacing property adds horizontal space between children in the Wrap's main axis (usually horizontal).

❓ lifecycle

advanced

How does Wrap widget behave on screen rotation?

When the device rotates from portrait to landscape, how does the Wrap widget adjust its children layout?

A It hides children that don't fit in the new width.

B It keeps the same layout ignoring the new width.

C It throws a runtime error due to layout constraints.

D It recalculates and wraps children according to the new width.

💡 Hint

Think about how responsive layouts adapt to screen size changes.

Wrap widget dynamically adapts to available width and reflows children when screen size changes, such as on rotation.

🔧 Debug

expert

Why does this Wrap widget cause overflow error?

Consider this code snippet: Wrap( direction: Axis.vertical, children: [ Container(width: 100, height: 100, color: Colors.red), Container(width: 100, height: 100, color: Colors.blue), Container(width: 100, height: 100, color: Colors.green), ], ) Why might this cause an overflow error on a small screen?

A Because Container widgets must have flexible width and height inside Wrap.

B Because Wrap only supports horizontal direction and vertical direction causes errors.

C Because Wrap with vertical direction tries to arrange children in columns and may overflow vertically if height is limited.

D Because colors in Container cause layout overflow.

💡 Hint

Think about how vertical Wrap arranges children and screen height limits.

When Wrap direction is vertical, children are arranged in columns and wrap horizontally. If vertical space is limited, children may overflow vertically causing errors.