Wrap widget in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Wrap widget that arranges children horizontally.

Flutter

Wrap(
  direction: Axis.[1],
  children: [
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

Drag options to blanks, or click blank then click option'

Avertical

Bhorizontal

Cdiagonal

Dstacked

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'vertical' will arrange children in a column instead of a row.

Using invalid directions like 'diagonal' or 'stacked' causes errors.

The direction property controls the main axis of the Wrap widget. Axis.horizontal arranges children in a row and wraps to the next line.

2fill in blank

medium

Complete the code to add spacing between the children in the Wrap widget.

Flutter

Wrap(
  spacing: [1],
  children: [
    Chip(label: Text('A')),
    Chip(label: Text('B')),
    Chip(label: Text('C')),
  ],
)

Drag options to blanks, or click blank then click option'

A10.0

B'10'

CEdgeInsets.all(10)

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string like '10' instead of a double causes errors.

Using EdgeInsets is for padding, not spacing.

The spacing property expects a double value to set horizontal space between children.

3fill in blank

hard

Fix the error in the Wrap widget code by completing the blank.

Flutter

Wrap(
  runSpacing: [1],
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

Drag options to blanks, or click blank then click option'

A'8'

BEdgeInsets.all(8)

C8.0

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using EdgeInsets instead of a double causes errors.

Passing a string like '8' is invalid.

The runSpacing property expects a double value to set vertical space between runs.

4fill in blank

hard

Fill both blanks to create a Wrap widget that arranges children vertically with spacing.

Flutter

Wrap(
  direction: Axis.[1],
  spacing: [2],
  children: [
    Icon(Icons.star),
    Icon(Icons.star_border),
  ],
)

Drag options to blanks, or click blank then click option'

Avertical

Bhorizontal

C12.0

D8.0

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing horizontal and vertical directions.

Using integer 8 instead of double 8.0 for spacing.

Setting direction to Axis.vertical arranges children in a column. The spacing of 8.0 adds space between them vertically.

5fill in blank

hard

Fill all three blanks to create a Wrap widget with horizontal direction, spacing, and runSpacing.

Flutter

Wrap(
  direction: Axis.[1],
  spacing: [2],
  runSpacing: [3],
  children: [
    Text('Flutter'),
    Text('Wrap'),
    Text('Widget'),
  ],
)

Drag options to blanks, or click blank then click option'

Avertical

B10.0

C5.0

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up spacing and runSpacing values.

Using strings instead of double values.

Use Axis.horizontal for horizontal layout. spacing sets horizontal space between children, and runSpacing sets vertical space between lines.

Practice

1. What is the main purpose of the Wrap widget in Flutter?

easy

A. To arrange child widgets in lines and wrap them when space runs out

B. To create a scrollable list of items vertically

C. To stack widgets on top of each other

D. To display a single widget centered on the screen

Solution

1. Step 1: Understand Wrap widget behavior

   The Wrap widget arranges children in horizontal or vertical lines and wraps them to the next line when there is no more space.

2. Step 2: Compare options with Wrap's purpose

   Only To arrange child widgets in lines and wrap them when space runs out describes this behavior correctly. Options A, B, and C describe other widgets or layouts.

3. Final Answer:

   To arrange child widgets in lines and wrap them when space runs out -> Option A

4. Quick Check:

   Wrap = arrange and wrap children [OK]

Hint: Wrap arranges children and moves to next line when needed [OK]

Common Mistakes:

• Confusing Wrap with ListView (scrollable list)
• Thinking Wrap stacks widgets like Stack widget
• Assuming Wrap centers a single widget

2. Which of the following is the correct syntax to create a Wrap widget with spacing of 10 pixels between children?

easy

A. Wrap(childSpacing: 10, children: [Text('A'), Text('B')])

B. Wrap(space: 10, children: [Text('A'), Text('B')])

C. Wrap(padding: 10, children: [Text('A'), Text('B')])

D. Wrap(spacing: 10, children: [Text('A'), Text('B')])

Solution

1. Step 1: Identify the correct property for spacing

   The Wrap widget uses the property spacing to set horizontal gaps between children.

2. Step 2: Check the options for correct property name

   Only Wrap(spacing: 10, children: [Text('A'), Text('B')]) uses spacing correctly. Options A, B, and D use incorrect property names.

3. Final Answer:

   Wrap(spacing: 10, children: [Text('A'), Text('B')]) -> Option D

4. Quick Check:

   Spacing property = spacing [OK]

Hint: Use 'spacing' property for gaps between children in Wrap [OK]

Common Mistakes:

• Using 'space' or 'childSpacing' instead of 'spacing'
• Confusing padding with spacing
• Omitting the children list

3. What will be the visual output of this Flutter code snippet?

Wrap(
  spacing: 8,
  runSpacing: 12,
  children: [
    Container(width: 100, height: 50, color: Colors.red),
    Container(width: 100, height: 50, color: Colors.green),
    Container(width: 100, height: 50, color: Colors.blue),
    Container(width: 100, height: 50, color: Colors.yellow),
  ],
)

Assuming the screen width is 220 pixels.

medium

A. Two rows: first row with 2 containers, second row with 2 containers, with 8px horizontal and 12px vertical spacing

B. One row with all 4 containers side by side with 8px spacing

C. Four rows with one container each stacked vertically

D. Two rows: first row with 3 containers, second row with 1 container, no spacing

Solution

1. Step 1: Calculate how many containers fit per row

   Each container is 100px wide, spacing between is 8px. Two containers plus spacing: 100 + 8 + 100 = 208px, which fits in 220px width. Three containers would be 100 + 8 + 100 + 8 + 100 = 316px, too wide.

2. Step 2: Determine rows and spacing

   So, Wrap places 2 containers in first row, then wraps to second row for next 2 containers. Horizontal spacing is 8px, vertical runSpacing is 12px.

3. Final Answer:

   Two rows: first row with 2 containers, second row with 2 containers, with 8px horizontal and 12px vertical spacing -> Option A

4. Quick Check:

   Wrap fits 2 per row with spacing [OK]

Hint: Add widths plus spacing to check fit per row [OK]

Common Mistakes:

• Assuming all containers fit in one row
• Ignoring spacing when calculating width
• Confusing runSpacing with spacing

4. Identify the error in this Flutter code using Wrap:

Wrap(
  spacing: 10,
  children: [
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
  runSpacing: 15
)

medium

A. The spacing property must be inside children

B. The children list is missing a closing bracket

C. There is no error; the code is correct

D. The runSpacing property is placed after children, causing a syntax error

Solution

1. Step 1: Check property order in Wrap widget

   In Flutter, the order of named parameters does not matter. runSpacing can be placed after children without error.

2. Step 2: Verify brackets and property usage

   The children list is properly closed, and spacing is correctly used as a property, not inside children.

3. Final Answer:

   There is no error; the code is correct -> Option C

4. Quick Check:

   Named parameters order doesn't cause errors [OK]

Hint: Named parameters order doesn't matter in Flutter [OK]

Common Mistakes:

• Thinking property order causes syntax errors
• Misreading brackets in children list
• Confusing property placement inside children

5. You want to create a responsive tag list using Wrap that automatically moves tags to the next line when they don't fit horizontally. Which combination of properties should you set to control the horizontal space between tags and vertical space between lines?

hard

A. Use padding for horizontal gaps and margin for vertical gaps

B. Use spacing for horizontal gaps and runSpacing for vertical gaps

C. Use mainAxisSpacing for horizontal gaps and crossAxisSpacing for vertical gaps

D. Use horizontalSpacing for horizontal gaps and verticalSpacing for vertical gaps

Solution

1. Step 1: Identify correct properties for Wrap spacing

   The Wrap widget uses spacing to set horizontal gaps between children and runSpacing to set vertical gaps between lines.

2. Step 2: Eliminate incorrect property names

   Properties like padding, margin, mainAxisSpacing, crossAxisSpacing, horizontalSpacing, and verticalSpacing are not valid for Wrap.

3. Final Answer:

   Use spacing for horizontal gaps and runSpacing for vertical gaps -> Option B

4. Quick Check:

   Wrap spacing = spacing and runSpacing [OK]

Hint: Remember: spacing = horizontal, runSpacing = vertical [OK]

Common Mistakes:

• Using padding or margin instead of spacing properties
• Confusing Wrap with GridView spacing properties
• Using incorrect property names like mainAxisSpacing