🎯 Center Widget vs Align Widget in Flutter

🎯 Center vs Align in Flutter – What's the Difference?

When you're building layouts in Flutter, two of the most common widgets for positioning are Center and Align.

But which one should you use — and when?

Let’s break it down with simple examples 👇

---

🟡 1. Center Widget

The Center widget does exactly what it sounds like:

✅ It centers its child both horizontally and vertically inside the available space.

🔹 Syntax:

Center(
  child: Text("Hello Flutter"),
)

🖼️ Visual Example:

✅ Use Center when you just want to center something in its parent.

🟢 2. Align Widget

The Align widget gives you full control over where the child should be placed inside its parent using alignment.

🔹 Syntax:

Align(
  alignment: Alignment.bottomRight,
  child: Text("Hello Flutter"),
)

🎯 Alignment Options:

• Alignment.topLeft
• Alignment.topCenter
• Alignment.topRight
• Alignment.centerRight
• Alignment.center
• Alignment.centerLeft
• Alignment.bottomCenter
• Alignment.bottomRight
• Alignment.bottomLeft
• Alignment(-1, 0) → custom (X, Y)

Alignment values range from -1.0 (start) to 1.0 (end)

🖼️ Visual Example (bottomRight):

🔍 So What’s the Difference?

Feature	Center	Align
Positioning	Fixed center	Fully customizable
Alignment	No parameters	alignment: required
Simplicity	Easiest for centering	Best for precise layout

🧠 When to Use What?

✅ Use Center if you want to place a widget in the middle
✅ Use Align if you need to place a widget anywhere else

✅ Example Code: Try Both

Column(
  children: [
    Center(
      child: Text("Centered"),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Text("Aligned Bottom Right"),
    ),
  ],
)

📦 Conclusion
Both Center and Align are layout tools — but Align gives you more control.

Use Center when you can.
Use Align when you must.