Flutter Row & Column Guide: Master Alignment & Spacing (2025)

Row vs. Column: What's the Difference?

In Flutter, everything is a widget. To arrange widgets horizontally (side-by-side), use a Row. To arrange them vertically (top-to-bottom), use a Column.

They both share the same powerful properties for alignment, but the "Main Axis" changes depending on which one you use.

💡 Basic Usage Code

Here is a Column that centers its children:

Column(
  mainAxisAlignment: MainAxisAlignment.center, // Vertical Alignment
  crossAxisAlignment: CrossAxisAlignment.center, // Horizontal Alignment
  children: [
    Icon(Icons.star, size: 50),
    Text('I am below the star'),
    ElevatedButton(onPressed: () {}, child: Text('Click Me')),
  ],
)
        

📐 The Alignment Cheat Sheet

This is the #1 thing beginners get wrong. Save this table:

Property	In a ROW	In a COLUMN
MainAxisAlignment	Controls Horizontal (Left/Right)	Controls Vertical (Up/Down)
CrossAxisAlignment	Controls Vertical (Up/Down)	Controls Horizontal (Left/Right)

Common Alignment Options:

• start: Place items at the beginning (Top or Left).
• center: Place items in the middle.
• end: Place items at the end (Bottom or Right).
• spaceBetween: Push items to the edges, leaving space in the middle.

⚠️ Common Error: Yellow & Black Tape (Overflow)
If your content is too big for the screen, you will see a yellow/black error line.

The Fix: Wrap the overflowing widget in an Expanded() or Flexible() widget. This tells Flutter to shrink the item to fit.

Conclusion

Mastering Row and Column is 80% of Flutter UI development. Remember: MainAxis runs with the flow, CrossAxis runs against it.

Want to build complex layouts? Check out our Full Flutter Layout Course.