What is Align in Flutter?

Align is a widget that aligns its child within itself. It can optionally size itself based on the child's size. It's useful when you want to position a widget somewhere within a parent without using Stack and Positioned.

Basic Usage

Wrap any widget with Align and provide an alignment property. The default alignment is Alignment.center.

DARTRead-only

Container(
  width: 200,
  height: 200,
  color: Colors.grey,
  child: Align(
    alignment: Alignment.topRight,
    child: FlutterLogo(size: 50),
  ),
)

Container(
  width: 200,
  height: 200,
  color: Colors.grey,
  child: Align(
    alignment: Alignment.topRight,
    child: FlutterLogo(size: 50),
  ),
)

Alignment Options

You can use predefined constants from Alignment class:

Alignment.topLeft
Alignment.topCenter
Alignment.topRight
Alignment.centerLeft
Alignment.center
Alignment.centerRight
Alignment.bottomLeft
Alignment.bottomCenter
Alignment.bottomRight

You can also create custom alignments using Alignment(x, y) where x and y range from -1 to 1 (e.g., Alignment(0.5, -0.5)).

DARTRead-only

Align(
  alignment: Alignment(0.7, -0.3),
  child: Text('Custom'),
)

Align(
  alignment: Alignment(0.7, -0.3),
  child: Text('Custom'),
)

WidthFactor and HeightFactor

By default, Align sizes itself to match its parent. But you can use widthFactor and heightFactor to size Align to a multiple of the child's size. For example, setting widthFactor: 2.0 makes Align twice as wide as its child.

DARTRead-only

Align(
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: FlutterLogo(size: 50),
)

Align(
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: FlutterLogo(size: 50),
)

Common Use Cases

Positioning an icon in a corner of a container.
Creating a badge overlay without using Stack.
Centering a widget within a specific area.

Key Points to Remember

Align places its child according to alignment.
If no widthFactor/heightFactor are given, Align takes the size of its parent.
Alignment uses a coordinate system where (0,0) is center, (-1,-1) is top‑left, (1,1) is bottom‑right.

Try it yourself

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('Align Example')),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.yellow,
            child: Align(
              alignment: Alignment.bottomRight,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Center(child: Text('BR')),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 2

What is the default alignment of Align?

Alignment.topLeft

Alignment.center

Alignment.bottomCenter

No default, must be specified

of 2

How would you create an Align that is exactly twice the width of its child?

Align(widthFactor: 2.0)

Align(width: 2.0)

Align(expandWidth: 2.0)

Align(scale: 2.0)

Try it yourself

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('Align Example')),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.yellow,
            child: Align(
              alignment: Alignment.bottomRight,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Center(child: Text('BR')),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 2

What is the default alignment of Align?

Alignment.topLeft

Alignment.center

Alignment.bottomCenter

No default, must be specified

of 2

How would you create an Align that is exactly twice the width of its child?

Align(widthFactor: 2.0)

Align(width: 2.0)

Align(expandWidth: 2.0)

Align(scale: 2.0)

Flutter Align Widget Tutorial for Beginners

Flutter Align Widget Tutorial for Beginners

What is Align in Flutter?

Basic Usage

Alignment Options

WidthFactor and HeightFactor

Common Use Cases

Key Points to Remember

Try it yourself

Test Your Knowledge

Need help?

Flutter Align Widget Tutorial for Beginners

Flutter Align Widget Tutorial for Beginners

What is Align in Flutter?

Basic Usage

Alignment Options

WidthFactor and HeightFactor

Common Use Cases

Key Points to Remember

Try it yourself

Test Your Knowledge

Need help?