How to Align Widget in Flutter: Simple Guide with Examples

In Flutter, you align widgets using the Align widget with its alignment property or use layout widgets like Center, Row, and Column with their alignment properties. These widgets let you position child widgets inside their parent containers easily.

Syntax

The Align widget positions its child according to the alignment property, which takes values like Alignment.center, Alignment.topLeft, etc. The Center widget is a shortcut to center a child. Row and Column use mainAxisAlignment and crossAxisAlignment to align children horizontally and vertically.

dart

Align(
  alignment: Alignment.topRight,
  child: Text('Aligned Text'),
)

Center(
  child: Text('Centered Text'),
)

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Icon(Icons.star),
    Text('Star'),
  ],
)

Example

This example shows how to use Align to place a text widget at the bottom right of the screen and how Center centers a widget.

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(
        body: Stack(
          children: [
            Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Text('Bottom Right'),
              ),
            ),
            Center(
              child: Text('Centered'),
            ),
          ],
        ),
      ),
    );
  }
}

Output

A screen with the word 'Centered' in the middle and 'Bottom Right' text placed at the bottom right corner with some padding.

Common Pitfalls

• Using Align without a sized parent can cause the child to take minimal space, not the full screen.
• Confusing mainAxisAlignment and crossAxisAlignment in Row and Column leads to unexpected layouts.
• Not wrapping widgets in Expanded or Flexible inside Row/Column can cause overflow errors.

dart

/* Wrong: Align inside a Column without expanded space */
Column(
  children: [
    Align(
      alignment: Alignment.topRight,
      child: Text('Misaligned'),
    ),
  ],
)

/* Right: Wrap Align with Expanded to fill space */
Column(
  children: [
    Expanded(
      child: Align(
        alignment: Alignment.topRight,
        child: Text('Correctly Aligned'),
      ),
    ),
  ],
)

Quick Reference

Here is a quick guide to common alignment options in Flutter:

Widget/Property	Purpose	Example Values
Align.alignment	Positions child inside parent	Alignment.center, Alignment.topLeft, Alignment.bottomRight
Center	Centers child widget	No properties needed
Row.mainAxisAlignment	Aligns children horizontally	MainAxisAlignment.start, MainAxisAlignment.center, MainAxisAlignment.end, MainAxisAlignment.spaceBetween
Row.crossAxisAlignment	Aligns children vertically	CrossAxisAlignment.start, CrossAxisAlignment.center, CrossAxisAlignment.end
Column.mainAxisAlignment	Aligns children vertically	MainAxisAlignment.start, MainAxisAlignment.center, MainAxisAlignment.end
Column.crossAxisAlignment	Aligns children horizontally	CrossAxisAlignment.start, CrossAxisAlignment.center, CrossAxisAlignment.end

Key Takeaways

Use Align with the alignment property to position widgets precisely inside their parent.

Center widget is the easiest way to center a child widget.

Row and Column use mainAxisAlignment and crossAxisAlignment to align multiple children.

Always ensure parent widgets provide enough space for alignment to work as expected.

Wrap Align in Expanded or Flexible inside Column/Row to avoid layout issues.