MainAxisAlignment and CrossAxisAlignment in Flutter - UI Render Trace

Component - MainAxisAlignment and CrossAxisAlignment

This Flutter UI component demonstrates how MainAxisAlignment and CrossAxisAlignment control the positioning of child widgets inside a Column.
MainAxisAlignment arranges children vertically along the main axis, while CrossAxisAlignment arranges them horizontally along the cross axis.

Widget Tree

Scaffold
├─ AppBar
└─ Column
   ├─ Text ("Top")
   ├─ Text ("Middle")
   └─ Text ("Bottom")

The Scaffold provides the basic app structure with an AppBar at the top. The body is a Column widget that stacks three Text widgets vertically. The Column uses MainAxisAlignment and CrossAxisAlignment properties to position these Text widgets inside the vertical space.

Render Trace - 3 Steps

Step 1: Scaffold

Step 2: Column

Step 3: Text widgets

State Change - Re-render

Trigger:User changes mainAxisAlignment from spaceBetween to center

Before

Texts spaced evenly with space between, horizontally centered

→

After

Texts stacked tightly in the vertical center, horizontally centered

Re-renders:Entire Column and its children re-render to update layout

UI Quiz - 3 Questions

What does MainAxisAlignment.spaceBetween do in a Column?

A Aligns children to the start horizontally

B Places equal space between children vertically

C Centers children horizontally

D Stacks children without any space

Key Insight

In Flutter, the main axis of a Column is vertical, so MainAxisAlignment controls vertical spacing. The cross axis is horizontal, so CrossAxisAlignment controls horizontal placement. Understanding these helps you arrange widgets clearly and predictably, just like arranging items on a shelf either spaced out or grouped in the center.