Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Column(
      children: [
        Icon(Icons.home, size: 30),
        Text('Home'),
      ],
    ),
    Column(
      children: [
        Icon(Icons.search, size: 30),
        Text('Search'),
      ],
    ),
    Column(
      children: [
        Icon(Icons.person, size: 30),
        Text('Profile'),
      ],
    ),
  ],
)

// Define the reusable widget once
class NavItem extends StatelessWidget {
  final IconData icon;
  final String label;
 
  const NavItem({required this.icon, required this.label});
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Icon(icon, size: 30),
        Text(label),
      ],
    );
  }
}
 
// Use it three times with different data — no code duplication
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    NavItem(icon: Icons.home,   label: 'Home'),
    NavItem(icon: Icons.search, label: 'Search'),
    NavItem(icon: Icons.person, label: 'Profile'),
  ],
)

graph TD
    A[عنصر Row] --> B[عنصر مخصص 1]
    A --> C[عنصر مخصص 2]
    A --> D[عنصر مخصص 3]
    B --> E[Column]
    E --> F[Icon]
    E --> G[Text]
    style A fill:#e1f5fe,stroke:#01579b
    style B fill:#fff3e0,stroke:#e65100

Row(
  children: [
    Icon(Icons.label),          // Fixed size — takes only what it needs
    Expanded(
      child: Text(
        'This text stretches to fill the rest of the row',
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Icon(Icons.arrow_forward),  // Fixed size — appears at the far right
  ],
)

Column(
  children: [
    Flexible(
      flex: 7,
      child: Container(
        color: Colors.blue[100],
        child: Center(child: Text('Header — 70%')),
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.grey[300],
        child: Center(child: Text('Divider — 10%')),
      ),
    ),
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.green[100],
        child: Center(child: Text('Footer — 20%')),
      ),
    ),
  ],
)

pie title توزيع مساحة الشاشة (قيم Flex)
    "قسم الرأس (Flex: 7)" : 70
    "قسم الفاصل (Flex: 1)" : 10
    "قسم التذييل (Flex: 2)" : 20

Flexible(
  flex: 7,
  child: Image.asset(
    'assets/header.jpg',
    fit: BoxFit.cover,   // Covers the container without distortion
    width: double.infinity,
  ),
)

// Hard to read, hard to maintain
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Image.asset('assets/photo.jpg', height: 250, fit: BoxFit.cover),
        Padding(
          padding: const EdgeInsets.all(16),
          child: Align(
            alignment: Alignment.centerLeft,
            child: Text('Product Title', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Text('A long description of the product goes here...'),
        ),
      ],
    ),
  );
}

// Clean main page — reads like an outline
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        ImageSection(),
        TitleSection(),
        DescriptionSection(),
      ],
    ),
  );
}
 
// ── Separate widget files ──────────────────────────────
 
class ImageSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.asset(
      'assets/photo.jpg',
      height: 250,
      width: double.infinity,
      fit: BoxFit.cover,
    );
  }
}
 
class TitleSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          'Product Title',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}
 
class DescriptionSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Text('A long description of the product goes here...'),
    );
  }
}

graph TD
    Page[واجهة الصفحة الرئيسية] --> S1[عنصر قسم الصورة]
    Page --> S2[عنصر قسم العنوان]
    Page --> S3[عنصر قسم الوصف]
    S3 --> P[Padding]
    P --> T[عنصر Text]
    style Page fill:#e8f5e9,stroke:#1b5e20
    style S1 fill:#fce4ec,stroke:#880e4f
    style S2 fill:#fce4ec,stroke:#880e4f
    style S3 fill:#fce4ec,stroke:#880e4f

// product.dart — pure data, no UI code
class Product {
  final String name;
  final String description;
  final String imageUrl;
  final double price;
 
  const Product({
    required this.name,
    required this.description,
    required this.imageUrl,
    required this.price,
  });
}

// data.dart — sample data kept separate from the UI
const List<Product> products = [
  Product(
    name: 'Wireless Headphones',
    description: 'Noise-cancelling over-ear headphones with 30 h battery.',
    imageUrl: 'assets/headphones.jpg',
    price: 79.99,
  ),
  Product(
    name: 'Mechanical Keyboard',
    description: 'Compact tenkeyless keyboard with blue switches.',
    imageUrl: 'assets/keyboard.jpg',
    price: 54.99,
  ),
];

// product_card.dart — UI that works with ANY Product instance
class ProductCard extends StatelessWidget {
  final Product product;   // accepts a model, not separate strings
 
  const ProductCard({required this.product});
 
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.asset(product.imageUrl, fit: BoxFit.cover),
          Padding(
            padding: const EdgeInsets.all(12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(product.name,
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                const SizedBox(height: 4),
                Text(product.description),
                const SizedBox(height: 8),
                Text('\$${product.price.toStringAsFixed(2)}',
                    style: TextStyle(color: Colors.green, fontSize: 16)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
 
// Render all products with a single list — no hardcoding
ListView(
  children: products.map((p) => ProductCard(product: p)).toList(),
)