Flutter Multi-Child Layout Widgets #

Goal: Learn how to arrange multiple widgets together to create structured, flexible, and adaptive layouts.

---

1. Row & Column #

• The most common layout widgets for arranging children horizontally or vertically.
• Use mainAxisAlignment and crossAxisAlignment to control alignment.

Example (Row):

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text("Left"),
    Text("Right"),
  ],
);

Example (Column):

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("Title"),
    Text("Subtitle"),
  ],
);

---

2. Stack #

• Places widgets on top of each other (z-axis alignment).
• Often used for overlapping elements, like badges, floating buttons, or background images.

Example:

Stack(
  children: [
    Container(color: Colors.blue, width: 200, height: 200),
    Positioned(
      bottom: 10,
      right: 10,
      child: Icon(Icons.star, color: Colors.white),
    ),
  ],
);

---

3. Wrap #

• Automatically moves overflowing widgets to the next line or column.
• Ideal for dynamic content like chips or tags that don’t fit in a single row.

Example:

Wrap(
  spacing: 8,
  runSpacing: 4,
  children: [
    Chip(label: Text("Flutter")),
    Chip(label: Text("Dart")),
    Chip(label: Text("UI")),
  ],
);

---

4. Flow #

• Provides advanced control over the positioning of children.
• Requires a FlowDelegate for custom layout logic (used rarely).
  Example (conceptual):

Flow(
  delegate: MyFlowDelegate(),
  children: [...],
);

---

5. Flex #

• A low-level widget behind Row and Column.
• Offers full control over axis direction, alignment, and flex factors.
  Example:

Flex(
  direction: Axis.horizontal,
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.green)),
  ],
);

---

6. GridView #

• Displays widgets in a scrollable grid layout.
• Supports multiple constructors for flexible design (builder, count, extent).

Example:

GridView.count(
  crossAxisCount: 2,
  crossAxisSpacing: 8,
  mainAxisSpacing: 8,
  children: List.generate(4, (index) {
    return Container(color: Colors.teal, child: Center(child: Text('Item $index')));
  }),
);