Understanding Main Axis and Cross Axis in Flutter

When working with layout widgets in Flutter such as Row, Column, or Flex, understanding the concepts of main axis and cross axis is essential. These two axes determine how children are arranged and aligned within their parent widget.

In this tutorial, we’ll explore what the main and cross axes are, how they differ in Row and Column, and how properties like MainAxisAlignment and CrossAxisAlignment affect layout behavior.

1. What Is the Main Axis?

The main axis is the primary direction in which a layout widget arranges its children.

• For a Row, the main axis runs horizontally (left to right).

• For a Column, the main axis runs vertically (top to bottom).

2. What Is the Cross Axis?

The cross axis is perpendicular to the main axis.

• For a Row, the cross axis is vertical (top to bottom).

• For a Column, the cross axis is horizontal (left to right).

Understanding this distinction is key to aligning widgets correctly.

3. MainAxisAlignment

MainAxisAlignment controls how children are aligned along the main axis.

Here’s an example using Row:

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Left'),
Text('Right'),
],
)

Common options:

• start: Aligns children to the start of the main axis.

• end: Aligns children to the end.

• center: Centers all children along the main axis.

• spaceBetween: Puts space between children.

• spaceAround: Adds space before, between, and after children.

• spaceEvenly: Equal spacing around each child.

Try changing MainAxisAlignment values to see how layout behavior changes.

4. CrossAxisAlignment

CrossAxisAlignment controls how children are aligned along the cross axis.

Example with a Column:

Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Aligned left'),
Text('Also aligned left'),
],
)

Common options:

• start: Aligns children to the start of the cross axis.

• end: Aligns them to the end.

• center: Centers children across the cross axis.

• stretch: Expands children to fill the cross axis.

• baseline: Aligns based on text baselines (used only with text).

 

. Visualizing Main vs Cross Axis

Let’s clarify with a simple comparison:

So when you’re using mainAxisAlignment in a Row, you’re affecting horizontal placement. When using crossAxisAlignment in the same Row, you’re adjusting vertical alignment.

6. Example: Nested Layout

Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Hello'),
Text('World'),
],
),
)

In this example:

• The Column vertically centers its children (mainAxisAlignment).

• The text widgets are left-aligned horizontally (crossAxisAlignment).

 

Conclusion

The concepts of main axis and cross axis are fundamental to creating responsive and flexible UIs in Flutter. By mastering these, you gain precise control over alignment and spacing within Row, Column, and Flex widgets.

Remember:

• Main axis is the direction of the widget’s layout.

• Cross axis is perpendicular to that direction.

Experiment with different alignments to get a solid grasp of how your UI will behave.

---

If you’d like to see a visual explanation or code snippets in action, try running the examples in DartPad or your favorite Flutter development environment.

Let your layout be precise and predictable — one axis at a time.