Card Widget Patterns in Flutter: Elevated Surfaces Done Right

The Card widget is the default way to group related content on a raised surface. This follows the cited widget guide: a Card is a Material widget with a rounded shape and an elevation shadow, usually containing a ListTile, Padding, and column of rows.

Card(
  elevation: 2,
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  child: ListTile(
    leading: const Icon(Icons.folder),
    title: const Text('Project files'),
    subtitle: const Text('Updated 2 hours ago'),
    trailing: const Icon(Icons.chevron_right),
    onTap: () {},
  ),
)

Flat cards

Set elevation: 0 for a flat, outlined look, and combine it with shape for a visible border:

Card(
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
    side: BorderSide(color: Colors.grey.shade300),
  ),
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('A flat card with a subtle border.'),
  ),
)

Colors and clipping

color overrides the surface color, and clipBehavior decides what happens when children paint outside the shape:

Card(
  color: Theme.of(context).colorScheme.primaryContainer,
  clipBehavior: Clip.antiAlias,
  child: Image.asset('assets/banner.jpg', height: 160, fit: BoxFit.cover),
)

Use Clip.antiAlias whenever a card contains images or anything that could overflow its rounded corners.

Custom shape

Cards accept any ShapeDecoration-style shape. A custom radius gives your app a signature look:

Card(
  elevation: 4,
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.circular(32),
  ),
  child: const Padding(
    padding: EdgeInsets.all(20),
    child: Text('Cards can take any shape you like.'),
  ),
)

Interactive cards

Combine Card with an InkWell inside for ripple feedback:

Card(
  child: InkWell(
    borderRadius: BorderRadius.circular(12),
    onTap: () {},
    child: const Padding(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          Icon(Icons.settings),
          SizedBox(width: 12),
          Text('Settings'),
        ],
      ),
    ),
  ),
)

Takeaway: Card gives you a raised, rounded surface for free — choose the right elevation, add clipBehavior around images, and wrap interactive content in an InkWell to keep Material feedback intact.