Multiple Child Layout

Project Folder Structure

Copylib/
└── features/
    └── flutter_components/
        └── layout/
            └── multiple_child_layout/
                ├── components/
                │   ├── row_component.dart
                │   ├── column_component.dart
                │   ├── flex_component.dart
                │   ├── stack_component.dart
                │   ├── wrap_component.dart
                │   └── flow_component.dart
                └── screen/
                    └── multiple_child_layout_page.dart

---

Step 1: Components for Each Widget

1. Row Component

The Row widget arranges its children horizontally in a single line.

File: row_component.dart

Copyimport 'package:flutter/material.dart';

class RowComponent extends StatelessWidget {
  const RowComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Row Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: const [
            Icon(Icons.star, color: Colors.red, size: 40),
            Icon(Icons.favorite, color: Colors.blue, size: 40),
            Icon(Icons.thumb_up, color: Colors.green, size: 40),
          ],
        ),
      ],
    );
  }
}

---

2. Column Component

The Column widget arranges its children vertically.

File: column_component.dart

Copyimport 'package:flutter/material.dart';

class ColumnComponent extends StatelessWidget {
  const ColumnComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Column Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        Column(
          children: const [
            Text("Item 1", style: TextStyle(fontSize: 18)),
            SizedBox(height: 10),
            Text("Item 2", style: TextStyle(fontSize: 18)),
            SizedBox(height: 10),
            Text("Item 3", style: TextStyle(fontSize: 18)),
          ],
        ),
      ],
    );
  }
}

---

3. Flex Component

The Flex widget allows you to control the direction (horizontal or vertical) and assign flex factors.

File: flex_component.dart

Copyimport 'package:flutter/material.dart';

class FlexComponent extends StatelessWidget {
  const FlexComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Flex Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        Flex(
          direction: Axis.horizontal,
          children: [
            Expanded(
              flex: 2,
              child: Container(color: Colors.red, height: 50),
            ),
            Expanded(
              flex: 1,
              child: Container(color: Colors.blue, height: 50),
            ),
            Expanded(
              flex: 3,
              child: Container(color: Colors.green, height: 50),
            ),
          ],
        ),
      ],
    );
  }
}

---

4. Stack Component

The Stack widget overlays its children on top of each other.

File: stack_component.dart

Copyimport 'package:flutter/material.dart';

class StackComponent extends StatelessWidget {
  const StackComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Stack Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        SizedBox(
          width: 200,
          height: 200,
          child: Stack(
            children: [
              Container(color: Colors.yellow),
              Positioned(
                top: 50,
                left: 50,
                child: Container(color: Colors.red, width: 100, height: 100),
              ),
              Positioned(
                bottom: 10,
                right: 10,
                child: const Text(
                  "Overlayed",
                  style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

---

5. Wrap Component

The Wrap widget arranges its children horizontally and wraps to the next line if there’s not enough space.

File: wrap_component.dart

Copyimport 'package:flutter/material.dart';

class WrapComponent extends StatelessWidget {
  const WrapComponent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text("Wrap Example", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        Wrap(
          spacing: 8,
          runSpacing: 8,
          children: List.generate(
            10,
            (index) => Chip(label: Text("Item $index")),
          ),
        ),
      ],
    );
  }
}

---

Step 2: Combine Components on a Single Page

File: multiple_child_layout_page.dart

Copyimport 'package:flutter/material.dart';
import '../components/row_component.dart';
import '../components/column_component.dart';
import '../components/flex_component.dart';
import '../components/stack_component.dart';
import '../components/wrap_component.dart';
import '../components/flow_component.dart';

class MultipleChildLayoutPage extends StatelessWidget {
  const MultipleChildLayoutPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Multiple Child Layout Widgets")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            RowComponent(),
            SizedBox(height: 20),
            ColumnComponent(),
            SizedBox(height: 20),
            FlexComponent(),
            SizedBox(height: 20),
            StackComponent(),
            SizedBox(height: 20),
            WrapComponent(),
            SizedBox(height: 20),
            FlowComponent(),
          ],
        ),
      ),
    );
  }
}

---

---