Untitled Page

We will follow a clean and organized structure:

Copylib/
└── features/
    └── layout/
        └── single_child_layout/
            ├── components/
            │   ├── container_component.dart     
            │   ├── padding_component.dart       
            │   ├── center_component.dart         
            │   ├── align_component.dart          
            │   ├── sizedbox_component.dart       
            └── screen/
                └── single_child_layout_page.dart 

---

Step 1: Create Component Files

1. Container Component

File: container_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 100,
      padding: const EdgeInsets.all(8),
      margin: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Center(
        child: Text(
          "Container Widget",
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

---

2. Padding Component

File: padding_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: const Text(
        "This text has padding around it!",
        style: TextStyle(fontSize: 16, color: Colors.black),
      ),
    );
  }
}

---

3. Center Component

File: center_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text(
        "This text is centered!",
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
    );
  }
}

---

4. Align Component

File: align_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.bottomRight,
      child: Container(
        color: Colors.green,
        width: 150,
        height: 50,
        child: const Center(
          child: Text(
            "Align Bottom Right",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

---

5. SizedBox Component

File: sizedbox_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const SizedBox(height: 20), // Empty space
        Container(
          color: Colors.red,
          child: const SizedBox(
            width: 150,
            height: 50,
            child: Center(
              child: Text(
                "SizedBox Example",
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

---

Step 2: Combine Components in the Main Screen

In the single_child_layout_page.dart, import all components and display them.

File: single_child_layout_page.dart

Copyimport 'package:flutter/material.dart';
import '../components/container_component.dart';
import '../components/padding_component.dart';
import '../components/center_component.dart';
import '../components/align_component.dart';
import '../components/sizedbox_component.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Single Child Layout Widgets")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text("1. Container", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            ContainerComponent(),
            SizedBox(height: 20),

            Text("2. Padding", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            PaddingComponent(),
            SizedBox(height: 20),

            Text("3. Center", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            CenterComponent(),
            SizedBox(height: 20),

            Text("4. Align", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            AlignComponent(),
            SizedBox(height: 20),

            Text("5. SizedBox", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            SizedBoxComponent(),
          ],
        ),
      ),
    );
  }
}

---

Step 3: Update Main File

Update main.dart to load the SingleChildLayoutPage.

File: main.dart

Copyimport 'package:flutter/material.dart';
import 'features/single_child_layout/screen/single_child_layout_page.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Single Child Layout',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SingleChildLayoutPage(),
    );
  }
}

---