What is Card Widget in Flutter: Simple Explanation and Example

The Card widget in Flutter is a container with rounded corners and a shadow that groups related content visually. It works like a physical card, giving a neat, elevated look to UI elements inside it.

How It Works

The Card widget acts like a small piece of paper or a business card in your app. It groups content together inside a box with rounded corners and a shadow, making it stand out from the background. This shadow effect is called elevation, which gives a sense of depth, like the card is floating above the screen.

Think of it as putting a photo or note on your desk: the card visually separates that content from everything else, making it easier to focus on. You can put text, images, buttons, or any other widgets inside a Card. It also has padding inside so the content doesn’t touch the edges, keeping things neat and readable.

Example

This example shows a simple Card with some text inside. It uses elevation to create a shadow and padding to space the text nicely.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Card Widget Example')),
        body: Center(
          child: Card(
            elevation: 4,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: const Text('This is a simple card widget.'),
            ),
          ),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'Card Widget Example' and a centered white card with rounded corners and shadow containing the text 'This is a simple card widget.'

When to Use

Use the Card widget when you want to group related information visually in your app. It helps users see that certain content belongs together, like a contact's info, a product description, or a news article preview.

Cards are great for lists, grids, or any place where you want to separate items clearly but keep a clean, modern look. They improve readability and make your app feel organized and polished.

Key Points

• Visual grouping: Cards group related content with a neat container.
• Elevation: Adds shadow for depth and focus.
• Rounded corners: Makes UI look friendly and modern.
• Flexible: Can hold any widgets inside.
• Padding: Keeps content spaced nicely inside the card.

Key Takeaways

The Card widget creates a container with rounded corners and shadow to group content visually.

It adds elevation to give a floating effect that highlights the content.

Cards improve UI clarity by separating related information cleanly.

You can put any widgets inside a Card, like text, images, or buttons.

Use Cards to organize lists, previews, or grouped data in your app.