Card Widget Beginner Guide in Dart

If you are just starting with Flutter and Dart, one of the most useful UI components you should learn is the Card widget. The Card widget allows you to create visually appealing layouts with elevation, rounded corners, and customizable shadows. In this beginner guide, you will learn everything about Card widget in Dart, its properties, use cases, and complete code examples.

What is a Card Widget in Dart?

A Card widget in Flutter is a container-like widget with rounded corners and shadows that follows the Material Design guidelines. It is commonly used to group related information together, such as product cards, profile sections, or article previews.

Why Use Card Widget?

• Provides a clean design that follows Material Design standards.
• Supports elevation and shadow for depth effects.
• Easy to combine with other widgets such as ListTile or Column.
• Flexible customization like color, margin, shape, border, and more.

Basic Syntax of Card Widget

Card(
  child: Text("This is a simple Card"),
)

This creates a simple Card with a text inside. However, to make it more practical, we often combine it with Padding, Column, or ListTile.

Important Properties of Card

Practical Example: Profile Card

Below is a practical example of creating a profile card widget in Dart. This example demonstrates how you can combine Card with ListTile, Image, and Text.

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 Widget Beginner Guide"),
        ),
        body: Center(
          child: ProfileCard(),
        ),
      ),
    );
  }
}

class ProfileCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      margin: EdgeInsets.all(20),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: Padding(
        padding: EdgeInsets.all(15),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CircleAvatar(
              radius: 40,
              backgroundImage: NetworkImage(
                "https://via.placeholder.com/150",
              ),
            ),
            SizedBox(height: 10),
            Text(
              "John Doe",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            Text("Mobile Developer at Flutter Inc."),
            SizedBox(height: 15),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: Text("Follow"),
                ),
                SizedBox(width: 10),
                OutlinedButton(
                  onPressed: () {},
                  child: Text("Message"),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Use Case: Product Card Example

The Card widget is widely used for e-commerce apps. Let’s create a product card layout that displays an image, title, description, and a price with a button.

class ProductCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 3,
      margin: EdgeInsets.all(15),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
            child: Image.network(
              "https://via.placeholder.com/400x200",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Cool Sneakers", 
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                SizedBox(height: 5),
                Text("Lightweight running sneakers for everyday wear."),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text("\$59.99", 
                      style: TextStyle(fontSize: 16, color: Colors.green)),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text("Buy Now"),
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Comparison: Card Widget vs Container

Many beginners often ask: What is the difference between Card and Container? Here is a quick comparison:

Best Practices for Card Widget

• Use elevation wisely, higher values may look unnatural.
• Keep padding consistent for good readability.
• Combine Card with ListView for scrollable lists.
• Use rounded corners for modern UI feel.

Conclusion

The Card widget in Dart is a powerful tool to design modern, clean, and responsive UI layouts. By understanding its properties and combining it with other Flutter widgets, you can create elegant profile cards, product cards, and much more. This beginner guide should help you start using Card widget effectively in your Flutter projects.

For more insights on Material Design principles, check the official Material Design guide.