Column and Row in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical layout using Flutter's widget.

Flutter

Column(
  children: [
    Text('Hello'),
    Text('World'),
  ],
  mainAxisAlignment: [1],
)

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

AMainAxisSize.min

BCrossAxisAlignment.end

CCrossAxisAlignment.start

DMainAxisAlignment.center

Attempts:

3 left

💡 Hint

Common Mistakes

Using CrossAxisAlignment instead of MainAxisAlignment for vertical alignment.

Using MainAxisSize instead of MainAxisAlignment.

The mainAxisAlignment property controls vertical alignment in a Column. Using MainAxisAlignment.center centers the children vertically.

2fill in blank

medium

Complete the code to create a horizontal layout with evenly spaced children.

Flutter

Row(
  mainAxisAlignment: [1],
  children: [
    Icon(Icons.star),
    Icon(Icons.star),
    Icon(Icons.star),
  ],
)

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

AMainAxisAlignment.start

BMainAxisAlignment.spaceEvenly

CCrossAxisAlignment.center

DMainAxisAlignment.end

Attempts:

3 left

💡 Hint

Common Mistakes

Using CrossAxisAlignment for horizontal spacing.

Using MainAxisAlignment.start which aligns children to the start only.

MainAxisAlignment.spaceEvenly places equal space between all children and edges in a Row, creating an even horizontal layout.

3fill in blank

hard

Fix the error in the code to align children to the start of the cross axis in a Column.

Flutter

Column(
  crossAxisAlignment: [1],
  children: [
    Text('One'),
    Text('Two'),
  ],
)

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

AMainAxisAlignment.center

BCrossAxisAlignment.center

CCrossAxisAlignment.start

DMainAxisAlignment.start

Attempts:

3 left

💡 Hint

Common Mistakes

Using MainAxisAlignment instead of CrossAxisAlignment for horizontal alignment.

Using CrossAxisAlignment.center which centers children horizontally.

The crossAxisAlignment property controls horizontal alignment in a Column. Use CrossAxisAlignment.start to align children to the start horizontally.

4fill in blank

hard

Fill both blanks to create a Row that centers children vertically and spaces them evenly horizontally.

Flutter

Row(
  mainAxisAlignment: [1],
  crossAxisAlignment: [2],
  children: [
    Icon(Icons.home),
    Icon(Icons.settings),
  ],
)

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

AMainAxisAlignment.spaceEvenly

BCrossAxisAlignment.center

CMainAxisAlignment.start

DCrossAxisAlignment.end

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up mainAxisAlignment and crossAxisAlignment properties.

Using CrossAxisAlignment.start which aligns children to top vertically.

MainAxisAlignment.spaceEvenly spaces children evenly horizontally in a Row. CrossAxisAlignment.center centers children vertically.

5fill in blank

hard

Fill all three blanks to create a Column with children aligned to the end horizontally, spaced at the start vertically, and with minimal main axis size.

Flutter

Column(
  crossAxisAlignment: [1],
  mainAxisAlignment: [2],
  mainAxisSize: [3],
  children: [
    Text('A'),
    Text('B'),
  ],
)

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

ACrossAxisAlignment.end

BMainAxisAlignment.start

CMainAxisSize.min

DCrossAxisAlignment.center

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing CrossAxisAlignment and MainAxisAlignment values.

Using MainAxisSize.max instead of MainAxisSize.min.

CrossAxisAlignment.end aligns children to the right horizontally in a Column. MainAxisAlignment.start aligns children to the top vertically. MainAxisSize.min makes the Column take minimal vertical space.