MainAxisAlignment and CrossAxisAlignment in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Effect of MainAxisAlignment.spaceBetween in a Row

Consider a Row widget with three Text widgets as children. The Row uses MainAxisAlignment.spaceBetween. What will be the visual arrangement of the Text widgets inside the Row?

Flutter

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

A The three Text widgets are evenly spaced with equal gaps between them.

B The three Text widgets are grouped together at the start of the Row with no space between them.

C The three Text widgets are centered in the Row with equal space on both sides.

D The three Text widgets are aligned at the end of the Row with no space between them.

💡 Hint

Think about how spaceBetween distributes space only between children, not at the edges.

MainAxisAlignment.spaceBetween places the first child at the start and the last child at the end of the main axis. The remaining children are spaced evenly between them, so the gaps between children are equal but no extra space is added at the start or end.

❓ ui_behavior

intermediate

CrossAxisAlignment.stretch effect in Column

What happens when you set CrossAxisAlignment.stretch in a Column containing Text widgets with no width constraints?

Flutter

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

A Each Text widget keeps its natural width and is centered horizontally.

B Each Text widget is aligned to the start horizontally with no stretching.

C Each Text widget expands horizontally to fill the full width of the Column.

D The Column throws a layout error because Text widgets cannot stretch.

💡 Hint

CrossAxisAlignment.stretch provides tight cross-axis constraints, but inflexible widgets like Text size to their intrinsic dimensions.

In a Column, the cross axis is horizontal. Setting CrossAxisAlignment.stretch passes tight horizontal constraints (Column's full width) to children. Text widgets size to their intrinsic width (content-based) rather than expanding to fill, and are positioned at the start (left-aligned).

❓ lifecycle

advanced

Impact of Changing MainAxisAlignment on Widget Rebuild

If you change the mainAxisAlignment property of a Row dynamically in a StatefulWidget, what happens to the widget tree and UI?

Flutter

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  MainAxisAlignment alignment = MainAxisAlignment.start;

  void toggleAlignment() {
    setState(() {
      alignment = alignment == MainAxisAlignment.start
          ? MainAxisAlignment.center
          : MainAxisAlignment.start;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: alignment,
          children: [Text('A'), Text('B'), Text('C')],
        ),
        ElevatedButton(
          onPressed: toggleAlignment,
          child: Text('Toggle Alignment'),
        ),
      ],
    );
  }
}

A The Row rebuilds with the new mainAxisAlignment, updating the UI to reflect the new alignment immediately.

B The Row does not rebuild; the UI remains unchanged until the app restarts.

C The app crashes because mainAxisAlignment cannot be changed dynamically.

D The Row rebuilds but the alignment property is ignored, so the UI does not change.

💡 Hint

setState triggers a rebuild of the widget subtree with updated properties.

Calling setState causes Flutter to rebuild the widget tree under the StatefulWidget. The Row receives the new mainAxisAlignment value and updates its layout accordingly, so the UI changes immediately.

📝 Syntax

advanced

Correct Syntax for Using CrossAxisAlignment.baseline

Which option shows the correct way to use CrossAxisAlignment.baseline in a Row with Text widgets?

Flutter

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text('Hello', style: TextStyle(fontSize: 20)),
    Text('World', style: TextStyle(fontSize: 14)),
  ],
)

A Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: null, children: [Text('A'), Text('B')])

B Row(crossAxisAlignment: CrossAxisAlignment.baseline, children: [Text('A'), Text('B')])

C Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: [Text('A'), Text('B')])

D Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.ideographic, children: [Text('A'), Text('B')])

💡 Hint

CrossAxisAlignment.baseline requires a non-null textBaseline property.

When using CrossAxisAlignment.baseline, you must provide a textBaseline property with a valid value like TextBaseline.alphabetic. Omitting it or setting it to null causes a runtime error.

🧠 Conceptual

expert

Why does CrossAxisAlignment.stretch not work in Row with unbounded height?

In a Row widget, setting CrossAxisAlignment.stretch on children that have no height constraints often does not stretch them as expected. Why does this happen?

A Because Row gives infinite horizontal space to its children, so they cannot determine a finite width to stretch to.

B Because CrossAxisAlignment.stretch only works in Columns, not Rows.

C Because Text widgets ignore CrossAxisAlignment.stretch by design.

D Because CrossAxisAlignment.stretch requires the Row to have a fixed height.

💡 Hint

Think about how Row constraints its children in the cross axis (height).

In a Row, the cross axis is vertical (height). CrossAxisAlignment.stretch requires the Row to have bounded height to pass finite height constraints to children. Without bounded height (e.g., Row in a Column), children get unbounded height and cannot stretch effectively.

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