Flutter Card

Material Design cards for beautiful content display

🃏 What is Card?

Card is a Material Design widget that displays content in a rounded rectangle with elevation and shadow. It's perfect for grouping related information like product details, user profiles, or article previews in an elegant way. 


// Simple Card example
Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Card Content'),
  ),
)

Output:

Card Content

Key Card Properties

âŦ†ī¸

Elevation

Control shadow depth 

Card(
  elevation: 8,
  child: Text('High shadow'),
)
🎨

Color

Set card background color 

Card(
  color: Colors.blue[50],
  child: Text('Colored'),
)
🔘

Shape

Customize border radius 

Card(
  shape: RoundedRectangleBorder(
    borderRadius: 
      BorderRadius.circular(15),
  ),
)
đŸ“Ļ

Margin

Add spacing around card 

Card(
  margin: EdgeInsets.all(16),
  child: Text('Spaced'),
)

🔹 Basic Card Example

Create a simple card with text: 

Card(
  elevation: 4,
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Column(
      children: [
        Icon(Icons.info, size: 40, color: Colors.blue),
        SizedBox(height: 10),
        Text(
          'Information Card',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        Text('This is a simple card widget'),
      ],
    ),
  ),
)

Output:

ℹī¸
Information Card
This is a simple card widget

🔹 Card with Different Elevations

Compare cards with different shadow depths: 

// Low elevation
Card(
  elevation: 2,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Elevation 2'),
  ),
)

// Medium elevation
Card(
  elevation: 8,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Elevation 8'),
  ),
)

// High elevation
Card(
  elevation: 16,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Elevation 16'),
  ),
)

Output:

Elevation 2
Elevation 8
Elevation 16

🔹 Colored Card with Custom Shape

Create a card with background color and rounded corners: 

Card(
  color: Colors.amber[100],
  elevation: 6,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  child: Padding(
    padding: EdgeInsets.all(24),
    child: Row(
      children: [
        Icon(Icons.warning, color: Colors.orange, size: 40),
        SizedBox(width: 15),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Warning',
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text('Please check your settings'),
            ],
          ),
        ),
      ],
    ),
  ),
)

Output:

⚠ī¸
Warning
Please check your settings

🔹 Card with Image

Create a card with an image header: 

Card(
  clipBehavior: Clip.antiAlias,
  child: Column(
    children: [
      Image.network(
        'https://example.com/image.jpg',
        height: 150,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Beautiful Landscape',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text('A stunning view of nature'),
          ],
        ),
      ),
    ],
  ),
)

Output:

Beautiful Landscape
A stunning view of nature

🔹 Practical Card Example

Create a product card with action buttons: 

Card(
  elevation: 5,
  margin: EdgeInsets.all(16),
  child: Column(
    children: [
      ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.blue,
          child: Icon(Icons.shopping_bag, color: Colors.white),
        ),
        title: Text(
          'Wireless Headphones',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        subtitle: Text('\$99.99'),
      ),
      Padding(
        padding: EdgeInsets.all(16),
        child: Text(
          'High-quality wireless headphones with noise cancellation',
          style: TextStyle(color: Colors.grey[600]),
        ),
      ),
      ButtonBar(
        children: [
          TextButton(
            onPressed: () {},
            child: Text('DETAILS'),
          ),
          ElevatedButton(
            onPressed: () {},
            child: Text('BUY NOW'),
          ),
        ],
      ),
    ],
  ),
)

Output:

🛍ī¸
Wireless Headphones
$99.99
High-quality wireless headphones with noise cancellation

🧠 Test Your Knowledge

What property controls the shadow depth of a Card?