Flutter: Card Widget and Design Usage

Card is a Material Design widget that creates a card effect for use in design. It can be used in listings and fixed designs on pages. It highlights content with shadow effect and corner radius.

Live Demo

You can try this widget in the interactive example below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Basic Usage

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

Important Properties

Property	Description
elevation	Shadow height
shadowColor	Shadow color
shape	Card shape (corner radius)
color	Background color
margin	Outer margin
clipBehavior	Content clipping behavior

Customized Card

Card(
  elevation: 8,
  shadowColor: Colors.blue.withOpacity(0.5),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  color: Colors.white,
  margin: EdgeInsets.all(8),
  child: ...
)

Bordered Card (No Shadow)

Card(
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
    side: BorderSide(color: Colors.grey, width: 1),
  ),
  child: ...
)

Card with Image

Card(
  clipBehavior: Clip.antiAlias, // Clip image corners
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Column(
    children: [
      Image.network(
        'https://example.com/image.jpg',
        height: 150,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(16),
        child: Text('Card Title'),
      ),
    ],
  ),
)

Using with ListTile

Card(
  child: ListTile(
    leading: CircleAvatar(child: Icon(Icons.person)),
    title: Text('Username'),
    subtitle: Text('Subtitle'),
    trailing: Icon(Icons.chevron_right),
    onTap: () {},
  ),
)

Tappable Card with InkWell

Card(
  child: InkWell(
    onTap: () {
      print('Card tapped');
    },
    borderRadius: BorderRadius.circular(12),
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text('Tappable Card'),
    ),
  ),
)

Summary

• Card: Material Design card widget
• elevation: Shadow depth
• shape: Corner radius and border
• clipBehavior: Important for image clipping
• ListTile: List item inside card

Card is an excellent tool for visually grouping content.