What is Card in Flutter?

Card is a Material Design widget that represents a piece of paper with slightly rounded corners and a shadow (elevation). It's used to group related information – like a product preview, a user profile summary, or an article teaser – in a visually distinct container. Cards are a fundamental building block of modern UIs.

Basic Usage

Using Card is straightforward: just wrap any widget (often a Column, ListTile, or Image) with a Card. By default, the Card has a slight elevation and rounded corners.

DARTRead-only

Card(
  child: Text('This is a card'),
)

Card(
  child: Text('This is a card'),
)

You can place multiple widgets inside by using a Column or a ListTile.

Key Properties

child: The widget inside the card (usually a Column, ListTile, Image, or Container).
elevation: Controls the size of the drop shadow. Higher values make the card appear higher above the surface.
shape: Defines the card's border shape. Common shapes are RoundedRectangleBorder and CircleBorder.
color: The background color of the card.
margin: Empty space around the card (outside the card's border).
shadowColor: The color of the drop shadow.
borderOnForeground: Whether to paint the border on top of the child.
clipBehavior: How to clip the card if its content overflows (default Clip.none).

Elevation and Shadow

The elevation property gives the card a 3D feel. The default elevation is 1.0, but you can increase it to make the card stand out more.

DARTRead-only

Card(
  elevation: 4.0,
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Higher elevation'),
  ),
)

Card(
  elevation: 4.0,
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Higher elevation'),
  ),
)

Shape Customization

Use the shape property to change the card's border radius, make it a circle, or add a custom border.

DARTRead-only

// Rounded rectangle with 20px radius
Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
  child: ...
)

// Circular card (useful for avatars)
Card(
  shape: CircleBorder(),
  child: Container(width: 100, height: 100, color: Colors.blue),
)

// Rounded rectangle with 20px radius
Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
  child: ...
)

// Circular card (useful for avatars)
Card(
  shape: CircleBorder(),
  child: Container(width: 100, height: 100, color: Colors.blue),
)

Adding Margins and Internal Padding

To separate a card from surrounding widgets, use margin. To add space between the card's border and its child, wrap the child with Padding.

DARTRead-only

Card(
  margin: EdgeInsets.all(8.0),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Padded content'),
  ),
)

Card(
  margin: EdgeInsets.all(8.0),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Padded content'),
  ),
)

Cards with ListTile

A very common pattern is to put a ListTile inside a Card to create a consistent, tappable list item with an icon, title, and subtitle.

DARTRead-only

Card(
  child: ListTile(
    leading: Icon(Icons.person, size: 40),
    title: Text('John Doe'),
    subtitle: Text('Flutter Developer'),
    trailing: Icon(Icons.more_vert),
  ),
)

Card(
  child: ListTile(
    leading: Icon(Icons.person, size: 40),
    title: Text('John Doe'),
    subtitle: Text('Flutter Developer'),
    trailing: Icon(Icons.more_vert),
  ),
)

Cards in a ListView

Cards are often used inside a ListView to create a scrollable list of items.

DARTRead-only

ListView(
  children: [
    Card(child: ListTile(title: Text('Item 1'))),
    Card(child: ListTile(title: Text('Item 2'))),
    Card(child: ListTile(title: Text('Item 3'))),
  ],
)

ListView(
  children: [
    Card(child: ListTile(title: Text('Item 1'))),
    Card(child: ListTile(title: Text('Item 2'))),
    Card(child: ListTile(title: Text('Item 3'))),
  ],
)

InkWell and Gestures

Card itself does not have an onTap property. To make a card tappable and show a ripple effect, wrap its child (or the whole card) with an InkWell.

DARTRead-only

Card(
  child: InkWell(
    onTap: () { print('Card tapped'); },
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Text('Tap me'),
    ),
  ),
)

Card(
  child: InkWell(
    onTap: () { print('Card tapped'); },
    child: Padding(
      padding: EdgeInsets.all(16.0),
      child: Text('Tap me'),
    ),
  ),
)

Common Use Cases

Profile cards: Show user avatar, name, and a short bio.
Product cards: Display an image, title, price, and a buy button.
Article previews: Include a headline, a summary, and an image.
Dashboard tiles: Represent different sections of an app with icons and numbers.
Media galleries: Combine an image with a caption.

Common Mistakes Beginners Make

Forgetting to give the card a child: A Card with no child will be invisible (zero size).
Over‑elevation: Using very high elevations (e.g., 24) can look unnatural; stick to 1–6 for typical cards.
Not handling overflow: If the child is too large, the card might overflow. Use clipBehavior: Clip.antiAlias to clip the content.
Putting too much content inside a single card: Cards should group related information, but avoid making them too tall.
Ignoring margin and padding: Without margin, cards stick together; without padding, content touches the edges.
Misusing shape: Using CircleBorder with a rectangular child can cause unexpected clipping.

Key Points to Remember

Card is a Material Design container with rounded corners and a shadow.
Use elevation to control the shadow depth.
Customize the border with shape.
Add external spacing with margin, internal spacing with Padding inside the child.
Cards work great with ListTile and inside ListView.
To add tap handling, wrap the child with InkWell.

Common Interview Questions

How do you change the corner radius of a Card?
What is the difference between margin and padding in the context of a Card?
How would you make a Card tappable and show a ripple effect?
Can you use a CircleAvatar inside a Card? Give an example.
What happens if you set elevation: 0 on a Card?
How do you create a card that spans the full width of its parent but has a fixed height?
Why might you need to set clipBehavior on a Card?

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Card Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            children: [
              Card(
                elevation: 2.0,
                child: ListTile(
                  leading: Icon(Icons.person, color: Colors.blue),
                  title: Text('John Doe'),
                  subtitle: Text('Flutter Developer'),
                  trailing: Icon(Icons.arrow_forward_ios, size: 16),
                ),
              ),
              Card(
                elevation: 4.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Product Title', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                      SizedBox(height: 8),
                      Text('This is a short description of the product. It looks great inside a card!'),
                    ],
                  ),
                ),
              ),
              Card(
                color: Colors.amber.shade50,
                child: InkWell(
                  onTap: () {},
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Row(
                      children: [
                        Icon(Icons.favorite, color: Colors.red),
                        SizedBox(width: 16),
                        Text('Tap this card for a surprise!'),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 3

Which property of Card controls the size of its drop shadow?

shadow

elevation

borderRadius

depth

of 3

How do you make a Card tappable with a ripple effect?

Card(onTap: ...)

Wrap the Card's child with InkWell

Set the Card's `clickable` property

Wrap the Card with GestureDetector

of 3

What is the default shape of a Card?

CircleBorder

RoundedRectangleBorder with radius 4.0

BeveledRectangleBorder

StadiumBorder

// Rounded rectangle with 20px radius Card( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0), ), child: ... ) // Circular card (useful for avatars) Card( shape: CircleBorder(), child: Container(width: 100, height: 100, color: Colors.blue), )

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Card Example')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            children: [
              Card(
                elevation: 2.0,
                child: ListTile(
                  leading: Icon(Icons.person, color: Colors.blue),
                  title: Text('John Doe'),
                  subtitle: Text('Flutter Developer'),
                  trailing: Icon(Icons.arrow_forward_ios, size: 16),
                ),
              ),
              Card(
                elevation: 4.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Product Title', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                      SizedBox(height: 8),
                      Text('This is a short description of the product. It looks great inside a card!'),
                    ],
                  ),
                ),
              ),
              Card(
                color: Colors.amber.shade50,
                child: InkWell(
                  onTap: () {},
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Row(
                      children: [
                        Icon(Icons.favorite, color: Colors.red),
                        SizedBox(width: 16),
                        Text('Tap this card for a surprise!'),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

of 3

Which property of Card controls the size of its drop shadow?

shadow

elevation

borderRadius

depth

of 3

How do you make a Card tappable with a ripple effect?

Card(onTap: ...)

Wrap the Card's child with InkWell

Set the Card's `clickable` property

Wrap the Card with GestureDetector

of 3

What is the default shape of a Card?

CircleBorder

RoundedRectangleBorder with radius 4.0

BeveledRectangleBorder

StadiumBorder

Flutter Card Widget Tutorial for Beginners

Flutter Card Widget Tutorial for Beginners

What is Card in Flutter?

Basic Usage

Key Properties

Elevation and Shadow

Shape Customization

Adding Margins and Internal Padding

Cards with ListTile

Cards in a ListView

InkWell and Gestures

Common Use Cases

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?

Flutter Card Widget Tutorial for Beginners

Flutter Card Widget Tutorial for Beginners

What is Card in Flutter?

Basic Usage

Key Properties

Elevation and Shadow

Shape Customization

Adding Margins and Internal Padding

Cards with ListTile

Cards in a ListView

InkWell and Gestures

Common Use Cases

Common Mistakes Beginners Make

Key Points to Remember

Common Interview Questions

Try it yourself

Test Your Knowledge

Need help?