Understanding Align vs Positioned in Flutter Stack (With New Examples)

When working with layouts in Flutter, especially in overlapping scenarios, the Stack widget becomes your go-to choice. But within it, two powerful children stand out: Align and Positioned. Although they might seem to do similar things, their differences can significantly affect your layout behavior. Let’s walk through a new set of examples and explanations to better understand how these two work in different use cases.

---

The Stack Refresher

The Stack widget allows you to layer widgets on top of one another. You can think of it like a pile of cards where each widget stacks above the previous one. By default, children inside a Stack align in the top-left corner, but we can change this behavior using widgets like Align and Positioned.

---

Align Widget — Relative Positioning

The Align widget allows you to place a widget relative to the parent Stack’s dimensions. It uses Alignment values, like Alignment.center, Alignment.topRight, etc.

Example: Centering an Icon

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue[100],
    ),
    Align(
      alignment: Alignment.center,
      child: Icon(Icons.star, size: 40, color: Colors.orange),
    ),
  ],
)

 This centers the star icon inside the 200×200 container.

---

Positioned Widget — Absolute Positioning

The Positioned widget lets you place a child based on distance from the Stack’s sides — top, right, bottom, and left.

Example: Place a button 20px from the bottom-right corner

Stack(
  children: [
    Container(
      width: 250,
      height: 250,
      color: Colors.green[100],
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Click'),
      ),
    ),
  ],
)

 This button always stays 20 pixels from the bottom and right edges.

---

Key Differences Recap

Feature	Align	Positioned
Positioning	Relative (using Alignment)	Absolute (using pixel values)
Flexibility	Great for responsive design	Better for fixed layout
Nesting	Can wrap any widget	Must be a direct child of Stack

---

Common Mistakes and How to Avoid Them

Using Positioned without Stack

Positioned(
  top: 10,
  child: Text("Oops")
)

 Fix: Always wrap Positioned in a Stack.

Misaligning with Align

Using wrong alignment values can confuse layouts.

Align(
  alignment: Alignment(3, 3),
  child: Text('Misplaced'),
)

 Fix: Stick to standard values like Alignment.center, or use Alignment(x, y) within the range of -1.0 to 1.0.

Overlapping multiple children with no clarity

Stack(
  children: [
    Text('One'),
    Text('Two'),
  ],
)

 Fix: Use Align or Positioned to place them clearly.

---

Bonus Example — Combining Both

Stack(
  children: [
    Align(
      alignment: Alignment.topCenter,
      child: Text('Header'),
    ),
    Positioned(
      bottom: 10,
      right: 10,
      child: Text('Footer'),
    ),
  ],
)

 This gives a clean top and bottom layout inside a Stack.

---

When to Use What?

• Use Align when your layout needs to be responsive and relative to parent.
• Use Positioned when you need precise pixel control over placement.

---

Thanks for Reading!

If you found this article helpful, consider sharing it or leaving a comment! Your support helps keep the Flutter love flowing.

Happy Fluttering!