MainAxisAlignment and CrossAxisAlignment in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to align children widgets horizontally in the center using MainAxisAlignment.

Flutter

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

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

Astart

BspaceBetween

Cend

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'start' or 'end' which aligns children to edges instead of center.

Using MainAxisAlignment.center centers the children horizontally in a Row.

2fill in blank

medium

Complete the code to align children widgets vertically at the start using CrossAxisAlignment.

Flutter

Column(
  crossAxisAlignment: CrossAxisAlignment.[1],
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

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

Astart

Bcenter

Cend

Dstretch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'center' which centers children horizontally instead of aligning to start.

CrossAxisAlignment.start aligns children to the top in a Column.

3fill in blank

hard

Fix the error in the code by choosing the correct MainAxisAlignment value to space children evenly.

Flutter

Row(
  mainAxisAlignment: MainAxisAlignment.[1],
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.settings),
  ],
)

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

AspaceAround

BspaceBetween

Ccenter

DspaceEvenly

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'spaceEvenly' which adds equal space around all children including edges.

MainAxisAlignment.spaceBetween places equal space between children but no space at ends.

4fill in blank

hard

Fill both blanks to align children in a Column stretched horizontally and centered vertically.

Flutter

Column(
  crossAxisAlignment: CrossAxisAlignment.[1],
  mainAxisAlignment: MainAxisAlignment.[2],
  children: [
    Container(height: 50, color: Colors.red),
    Container(height: 50, color: Colors.blue),
  ],
)

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

Astretch

Bcenter

Cstart

Dend

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing mainAxisAlignment and crossAxisAlignment roles in Column.

crossAxisAlignment.stretch makes children fill horizontally.
mainAxisAlignment.center centers children vertically.

5fill in blank

hard

Fill all three blanks to create a Row with children spaced evenly, aligned at the end vertically, and stretched horizontally.

Flutter

Row(
  mainAxisAlignment: MainAxisAlignment.[1],
  crossAxisAlignment: CrossAxisAlignment.[2],
  children: [
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.yellow),
  ],
  mainAxisSize: MainAxisSize.[3],
)

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

AspaceEvenly

Bend

Cmax

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'center' instead of 'end' for vertical alignment.

Using 'min' instead of 'max' for mainAxisSize.

mainAxisAlignment.spaceEvenly spaces children evenly horizontally.
crossAxisAlignment.end aligns children at bottom vertically.
mainAxisSize.max makes Row take max horizontal space.