How to Use CrossAxisAlignment in Flutter: Simple Guide

In Flutter, CrossAxisAlignment controls how children are aligned along the cross axis in Row or Column widgets. You set it by passing a value like CrossAxisAlignment.start or CrossAxisAlignment.center to the crossAxisAlignment property of these layout widgets.

Syntax

The crossAxisAlignment property is used inside Row or Column widgets to align their children along the cross axis (vertical for Row, horizontal for Column).

Common values include:

• CrossAxisAlignment.start: Align children to the start of the cross axis.
• CrossAxisAlignment.center: Center children along the cross axis.
• CrossAxisAlignment.end: Align children to the end of the cross axis.
• CrossAxisAlignment.stretch: Stretch children to fill the cross axis.

dart

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
)

Output

A vertical column with two texts aligned to the left (start) horizontally.

Example

This example shows a Column with three text widgets aligned to the start of the horizontal axis using CrossAxisAlignment.start. Changing the value to center or end moves the texts accordingly.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('CrossAxisAlignment Example')),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(color: Colors.red, child: Text('First', style: TextStyle(fontSize: 20))),
            Container(color: Colors.green, child: Text('Second', style: TextStyle(fontSize: 20))),
            Container(color: Colors.blue, child: Text('Third', style: TextStyle(fontSize: 20))),
          ],
        ),
      ),
    );
  }
}

Output

A vertical list of three colored text widgets aligned to the left side of the screen.

Common Pitfalls

One common mistake is confusing crossAxisAlignment with mainAxisAlignment. Remember, crossAxisAlignment aligns children perpendicular to the main axis (vertical for Row, horizontal for Column).

Another pitfall is using CrossAxisAlignment.stretch without giving children constraints, which can cause layout errors.

dart

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch, // stretches children horizontally
  children: [
    Container(width: double.infinity, child: Text('Hello')),
    // Without constraints, this may cause errors if children can't stretch
  ],
)

// Correct usage:
Container(
  width: double.infinity,
  child: Text('Hello'),
)

Output

Text widgets stretched horizontally filling the available width without layout errors.

Quick Reference

CrossAxisAlignment Value	Description
start	Align children to the start of the cross axis
center	Center children along the cross axis
end	Align children to the end of the cross axis
stretch	Stretch children to fill the cross axis
baseline	Align children by their text baseline (only in Row)

Key Takeaways

Use crossAxisAlignment to control how children align perpendicular to the main axis in Row or Column.

Common values are start, center, end, and stretch for different alignment effects.

CrossAxisAlignment.stretch requires children to have constraints to avoid layout errors.

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

Baseline alignment works only in Row and aligns text baselines.