Flutter Align Widget - Fine Alignment

The Align widget can be thought of as a more advanced version of Center. You can precisely position its child to any location relative to its parent.

What is Align?

Align is used to align a widget to a specific position within its parent. While Center only centers, Align can align to any point.

Live Demo: Align Widget Examples

You can try different alignment values in the interactive example below:

Basic Usage

Container(
  width: 200,
  height: 200,
  color: Colors.blue.shade50,
  child: Align(
    alignment: Alignment.center,
    child: Text('In the center'),
  ),
)

Alignment Values

Pre-defined Alignment constants in Flutter:

Alignment.topLeft       // Top left
Alignment.topCenter     // Top center
Alignment.topRight      // Top right

Alignment.centerLeft    // Center left
Alignment.center        // Exact center
Alignment.centerRight   // Center right

Alignment.bottomLeft    // Bottom left
Alignment.bottomCenter  // Bottom center
Alignment.bottomRight   // Bottom right

Examples

Align to Bottom Left Corner

Container(
  width: 300,
  height: 200,
  color: Colors.grey.shade200,
  child: Align(
    alignment: Alignment.bottomLeft,
    child: Container(
      width: 50,
      height: 50,
      color: Colors.blue,
      child: Center(child: Text('Bottom Left')),
    ),
  ),
)

The Container is aligned to the bottom left corner of its parent.

Custom Alignment Values

Alignment uses x and y coordinates between -1.0 and 1.0:

Align(
  alignment: Alignment(0.0, 0.0), // Exact center (same as Alignment.center)
  child: Text('Center'),
)

Align(
  alignment: Alignment(-1.0, -1.0), // Top left (same as Alignment.topLeft)
  child: Text('Top Left'),
)

Align(
  alignment: Alignment(1.0, 1.0), // Bottom right (same as Alignment.bottomRight)
  child: Text('Bottom Right'),
)

Coordinate System

x axis: -1.0 (left) → 0.0 (center) → 1.0 (right)
y axis: -1.0 (top) → 0.0 (center) → 1.0 (bottom)

Custom Positions

// Close to right, in center
Align(
  alignment: Alignment(0.5, 0.0),
  child: Text('Shifted right'),
)

// Close to top left corner, not exactly at corner
Align(
  alignment: Alignment(-0.7, -0.7),
  child: Text('Near top left'),
)

// Close to bottom edge, horizontally centered
Align(
  alignment: Alignment(0.0, 0.8),
  child: Text('Near bottom'),
)

Align vs Center vs mainAxisAlignment

Center

Center(child: Text('Center'))
// Always centers exactly, no other option

Align

Align(
  alignment: Alignment.topRight,
  child: Text('Top right'),
)
// Can align to any point

mainAxisAlignment (Row/Column)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [Text('Center')],
)
// Only aligns along main axis
// Works with multiple children

When to Use?

Use Align:

When you need to align to a specific corner or edge
When you want to do custom positioning
When determining position inside Stack
When you need more control than Center

Use Center:

When you only need centering
When a simple and quick solution is sufficient

Use mainAxisAlignment/crossAxisAlignment:

When aligning multiple widgets
When working inside Row or Column

Summary

The Align widget:

Aligns child relative to the area it's in
Is an advanced version of Center
Uses a coordinate system between -1.0 and 1.0
Has 9 standard pre-defined positions
Uses Alignment(x, y) for custom positions
Is very useful with Stack

Align is an indispensable tool when precise positioning is needed.

Flutter: Fine Alignment Operations with Align Widget