Card and Box Widgets

What are Card, BoxDecoration, and DecoratedBox?

1. Card:
   A Material Design widget with built-in elevation, rounded corners, and a shadow effect.

2. BoxDecoration:
   A property of a Container widget used for styling the background with color, border, shadow, and radius.

3. DecoratedBox:
   A low-level widget that allows you to decorate its child with BoxDecoration.

---

Differences Between Card, BoxDecoration, and decorated box

---

Best Use Cases

1. Card:

   • Use when you want a Material Design card with elevation and default styling.

   • Best for user profile cards, product cards, or any content that needs elevation.

2. BoxDecoration:

   • Use for custom container styling like backgrounds, borders, gradients, and shadows.

   • Best for flexible designs and fully customized UI components.

3. DecoratedBox:

   • Use when you want to apply decoration without using a Container.

   • Best for lightweight use cases where only decoration is needed.

---

File Structure

Below is the clean file structure to organize Card & Box components.

Copylib/
└── features/
    └── flutter_components/
        └── layout/
            └── card_box/
                ├── components/
                │   ├── card_component.dart        
                │   ├── box_decoration_component.dart 
                │   └── decorated_box_component.dart
                └── screen/
                    └── card_box_page.dart

---

Step-by-Step Implementation

1. Card Component

File: card_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8, // Adds shadow
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: const Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(
          "This is a Card Widget",
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

---

2. BoxDecoration Component

File: box_decoration_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            spreadRadius: 1,
            blurRadius: 5,
            offset: const Offset(0, 3), // Shadow position
          ),
        ],
      ),
      child: const Center(
        child: Text(
          "BoxDecoration",
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

---

3. DecoratedBox Component

File: decorated_box_component.dart

Copyimport 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const DecoratedBox(
      decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(
          "This is a DecoratedBox",
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

---

Step 2: Combine Components on the Screen

File: card_box_page.dart

Copyimport 'package:flutter/material.dart';
import '../components/card_component.dart';
import '../components/box_decoration_component.dart';
import '../components/decorated_box_component.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Card & Box Widgets")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text("1. Card", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            CardComponent(),
            SizedBox(height: 20),

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

            Text("3. DecoratedBox", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            DecoratedBoxComponent(),
          ],
        ),
      ),
    );
  }
}

---

Step 3: Main Entry Point

File: main.dart

Copyimport 'package:flutter/material.dart';
import 'features/flutter_components/layout/card_box/screen/card_box_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: 'Card & Box Widgets',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CardBoxPage(),
    );
  }
}

---

Summary Table

---

• Card: Use when following Material Design and needing elevation.

• BoxDecoration: Use inside Container for custom UI designs.

• DecoratedBox: Use for lightweight decoration when Container isn’t necessary.