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! 🚀