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.

Practice

1. What does MainAxisAlignment control in a Flutter Row widget?

easy

A. How children are aligned vertically along the row

B. How children are aligned vertically along the column

C. How children are aligned horizontally along the row

D. How children are aligned horizontally along the column

Solution

1. Step 1: Understand the main axis in a Row

   In a Row widget, the main axis runs horizontally from left to right.

2. Step 2: Role of MainAxisAlignment

   MainAxisAlignment controls how children are placed along this horizontal main axis.

3. Final Answer:

   How children are aligned horizontally along the row -> Option C

4. Quick Check:

   MainAxisAlignment = horizontal alignment in Row [OK]

Hint: MainAxisAlignment aligns along the main direction [OK]

Common Mistakes:

• Confusing main axis with cross axis
• Mixing Row and Column directions
• Thinking MainAxisAlignment controls vertical alignment in Row

2. Which of the following is the correct syntax to center children horizontally in a Row using MainAxisAlignment?

easy

A. crossAxisAlignment: CrossAxisAlignment.center,

B. mainAxisAlignment: CrossAxisAlignment.center,

C. crossAxisAlignment: MainAxisAlignment.center,

D. mainAxisAlignment: MainAxisAlignment.center,

Solution

1. Step 1: Identify the property for main axis alignment

   The property to align children along the main axis is mainAxisAlignment.

2. Step 2: Use the correct enum value

   To center children, use MainAxisAlignment.center.

3. Final Answer:

   mainAxisAlignment: MainAxisAlignment.center, -> Option D

4. Quick Check:

   Center horizontally in Row = mainAxisAlignment.center [OK]

Hint: Use mainAxisAlignment for main axis, CrossAxisAlignment for cross axis [OK]

Common Mistakes:

• Using crossAxisAlignment instead of mainAxisAlignment
• Mixing enum types for properties
• Forgetting the comma at the end

3. Given this Flutter code snippet, what will be the vertical alignment of the children inside the Row?

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(height: 50, width: 50, color: Colors.red),
    Container(height: 100, width: 50, color: Colors.blue),
  ],
)

medium

A. Children aligned at the bottom of the Row

B. Children aligned at the top of the Row

C. Children centered vertically in the Row

D. Children stretched to fill the Row height

Solution

1. Step 1: Understand crossAxisAlignment in Row

   In a Row, the cross axis is vertical. CrossAxisAlignment.end aligns children at the bottom.

2. Step 2: Apply to given containers

   The containers have different heights, so aligning at the bottom means their bottom edges line up.

3. Final Answer:

   Children aligned at the bottom of the Row -> Option A

4. Quick Check:

   CrossAxisAlignment.end = bottom alignment in Row [OK]

Hint: CrossAxisAlignment.end aligns children bottom in Row [OK]

Common Mistakes:

• Confusing CrossAxisAlignment.end with top alignment
• Mixing main and cross axis directions
• Assuming children stretch by default

4. Identify the error in this Flutter code snippet:

Column(
  mainAxisAlignment: MainAxisAlignment.left,
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

medium

A. Children list is empty

B. MainAxisAlignment.left is invalid; use start or end instead

C. Column cannot have Text widgets as children

D. Missing comma after children list

Solution

1. Step 1: Check MainAxisAlignment values

   MainAxisAlignment enum does not have a 'left' value; valid values include start, end, center, spaceBetween, etc.

2. Step 2: Confirm correct usage

   To align children to the start horizontally in a Column, use MainAxisAlignment.start.

3. Final Answer:

   MainAxisAlignment.left is invalid; use start or end instead -> Option B

4. Quick Check:

   MainAxisAlignment.left is not a valid enum [OK]

Hint: Use start/end/center, not left/right in MainAxisAlignment [OK]

Common Mistakes:

• Using left or right instead of start or end
• Confusing MainAxisAlignment with CrossAxisAlignment
• Ignoring enum value errors

5. You want to create a Column where children are spaced evenly vertically, but each child is aligned to the start horizontally. Which combination of MainAxisAlignment and CrossAxisAlignment should you use?

hard

A. mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start

B. mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center

C. mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.end

D. mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.stretch

Solution

1. Step 1: Understand vertical spacing in Column

   MainAxisAlignment controls vertical spacing in Column. To space children evenly, use MainAxisAlignment.spaceEvenly.

2. Step 2: Understand horizontal alignment in Column

   CrossAxisAlignment controls horizontal alignment. To align children to the start (left), use CrossAxisAlignment.start.

3. Final Answer:

   mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start -> Option A

4. Quick Check:

   Vertical spacing evenly + horizontal start = mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start [OK]

Hint: MainAxisAlignment for vertical, CrossAxisAlignment for horizontal in Column [OK]

Common Mistakes:

• Mixing up main and cross axis in Column
• Using spaceBetween instead of spaceEvenly
• Choosing wrong crossAxisAlignment for start alignment