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.