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.