Flutter UI Basics: Padding, Margin, and Alignment

Designing beautiful UIs in Flutter starts with understanding spacing and positioning. Three important layout concepts in Flutter are:

---

✅ 1. Padding

• Padding is the space inside a widget — between the widget’s content and its boundary.

• Use the Padding widget to add padding.

🧪 Example:

Padding(
  padding: EdgeInsets.all(16.0), // uniform padding on all sides
  child: Text("Hello, Flutter!"),
)

🔁 Variations:

EdgeInsets.only(left: 10, right: 20)
EdgeInsets.symmetric(vertical: 10, horizontal: 20)

---

✅ 2. Margin

• Flutter doesn't have a direct Margin widget.

• Instead, use the Container widget's margin property.

• Margin is the space outside a widget — between the widget and others.

🧪 Example:

Container(
  margin: EdgeInsets.all(12.0),
  child: Text("This has margin"),
)

---

✅ 3. Alignment

• Alignment positions the child within its parent.

• Use Align or alignment properties in layout widgets like Container, Column, or Row.

🧪 Example using Align:

Align(
  alignment: Alignment.centerRight,
  child: Text("Aligned Right"),
)

Example using Container:

Container(
  alignment: Alignment.topLeft,
  child: Text("Top Left"),
)

---

🧠 Summary Table

Concept	Widget Used	Affects Position Of	Common Property
Padding	Padding / Container	Inside the widget	padding
Margin	Container	Outside the widget	margin
Alignment	Align / Container	Child within parent	alignment

---

🎯 Final Tips

• Combine these with Row, Column, Center, and Expanded for better layout control.

• Use Flutter DevTools to visualize padding and alignment live.

• Consistent spacing = clean, professional UI.

Learn  Medical Coding Training Course

Read More 

Medical Coders in Hospitals vs Private Clinics

How Medical Coding Supports Patient Care

Myths and Facts About Medical Coding

Medical Billing vs Medical Coding: Key Differences