How to Use MainAxisAlignment in Flutter for Layout Control

In Flutter, MainAxisAlignment is used inside Row or Column widgets to arrange child widgets along the main axis (horizontal for Row, vertical for Column). You set it by assigning a value like MainAxisAlignment.center to the mainAxisAlignment property to control spacing and alignment.

Syntax

The mainAxisAlignment property is used inside Row or Column widgets to align children along the main axis. It accepts values from the MainAxisAlignment enum.

• start: Align children at the beginning.
• end: Align children at the end.
• center: Center children.
• spaceBetween: Even space between children.
• spaceAround: Even space around children.
• spaceEvenly: Equal space before, between, and after children.

dart

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Widget1(),
    Widget2(),
  ],
)

Output

A horizontal row with two widgets centered horizontally.

Example

This example shows a Row with three colored boxes spaced evenly using MainAxisAlignment.spaceEvenly. It demonstrates how children are arranged horizontally with equal space around them.

dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('MainAxisAlignment Example')),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(width: 50, height: 50, color: Colors.red),
              Container(width: 50, height: 50, color: Colors.green),
              Container(width: 50, height: 50, color: Colors.blue),
            ],
          ),
        ),
      ),
    );
  }
}

Output

A horizontal row with three colored squares spaced evenly across the screen.

Common Pitfalls

One common mistake is confusing mainAxisAlignment with crossAxisAlignment. mainAxisAlignment controls alignment along the main axis (horizontal in Row, vertical in Column), while crossAxisAlignment controls the other axis.

Another pitfall is using mainAxisAlignment in widgets that do not support it, which causes errors.

dart

Column(
  mainAxisAlignment: MainAxisAlignment.center, // Correct: aligns vertically
  crossAxisAlignment: CrossAxisAlignment.start, // Aligns horizontally
  children: [
    Text('Hello'),
    Text('World'),
  ],
)

// Wrong usage example:
// Container(
//   // mainAxisAlignment: MainAxisAlignment.center, // Error: Container has no such property
// )

Quick Reference

Here is a quick summary of MainAxisAlignment options:

MainAxisAlignment Value	Description
start	Place children at the start of the main axis
end	Place children at the end of the main axis
center	Place children at the center of the main axis
spaceBetween	Place children with space only between them
spaceAround	Place children with space before, between, and after, but half-sized at edges
spaceEvenly	Place children with equal space before, between, and after

Key Takeaways

Use mainAxisAlignment inside Row or Column to control child alignment along the main axis.

Choose the right MainAxisAlignment value to get desired spacing and positioning.

Do not confuse mainAxisAlignment with crossAxisAlignment; they control different axes.

Only use mainAxisAlignment in widgets that support it, like Row and Column.

Common values include start, center, end, spaceBetween, spaceAround, and spaceEvenly.