Basic Structure Flutter Layout and Composition Widgets #

Goal: Learn the core widgets that form the foundation of Flutter UI layout.
These widgets help you control alignment, spacing, size, and position of child elements.

---

1. Container #

• A versatile widget used for styling, layout, and positioning.
• Supports padding, margin, decoration, alignment, and size.
• Commonly used as a building block for layouts.
  Example:

Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.symmetric(vertical: 8),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text("Hello Flutter"),
);

---

2. Padding #

• Adds space inside a widget (between its content and border).
• Often used to create breathing room between UI elements.
  Example:

Padding(
  padding: EdgeInsets.all(12),
  child: Text("Padded Text"),
);

---

3. Center #

• Centers its child widget both horizontally and vertically within its parent.
  Example:

Center(
  child: Text("Centered Text"),
);

---

4. Align #

• Positions its child within itself using alignment coordinates.
• More flexible than Center, as you can align to any corner or edge.
  Example:

Align(
  alignment: Alignment.bottomRight,
  child: Text("Bottom Right"),
);

---

5. SizedBox #

• Creates a fixed-size box or an empty space (spacer).
• Commonly used for spacing between widgets.
  Example:

SizedBox(height: 20); // Vertical space

---

6. Expanded #

• Used inside a Row or Column to make a child fill available space.
• Distributes space proportionally with the flex property.
  Example:

Row(
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(flex: 2, child: Container(color: Colors.blue)),
  ],
);

---

7. Flexible #

• Similar to Expanded but gives the child freedom to shrink or grow within the space.
• Offers finer control in dynamic layouts.
  Example:

Flexible(
  child: Container(color: Colors.green),
);

---

8. Spacer #

• A simple widget that creates flexible empty space inside a Row or Column.
• Often used with Expanded/Flexible for proper spacing.
  Example:

Row(
  children: [
    Text("Left"),
    Spacer(),
    Text("Right"),
  ],
);