Flutter Card Widget – Examples, Design & Usage

The Card widget in Flutter is a useful UI component that helps create beautiful and structured layouts. It is commonly used to display information in a material-style box with shadows and rounded corners. In this guide, we will explore Flutter Card Design, various Flutter Card Examples, how to create a Flutter Card with Image and Text, and handle user interactions like onPressed.

What is a Card in Flutter?

A Card in Flutter is a pre-designed widget from the Material library that provides an elevated container with shadow and rounded corners. It is widely used in lists, dashboards, and product displays.

Key Features of Flutter Card Widget

Shadows and elevation
Rounded corners
Customizable content (Text, Images, Buttons, etc.)
Interaction using onPressed (with InkWell or GestureDetector)

Basic Flutter Card Example

Let’s start with a simple Card widget example in Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: CardExampleScreen(),
    );
  }
}

class CardExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter Card Example")),
      body: Center(
        child: Card(
          elevation: 5, // Shadow effect
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Text("This is a simple Card in Flutter"),
          ),
        ),
      ),
    );
  }
}

Explanation

Card Widget: Creates a material design card.
Elevation: Adds shadow to the card.
RoundedRectangleBorder: Provides rounded corners.
Padding: Adds space inside the card.

Flutter Card with Image and Text

If you want to display an image along with text inside a card, use the Column or ListTile widget.

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Column(
    children: [
      Image.network(
        'https://source.unsplash.com/random',
        height: 150,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Flutter Card with Image", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            SizedBox(height: 5),
            Text("This card contains an image and text."),
          ],
        ),
      ),
    ],
  ),
)

Explanation

Image.network(): Loads an image from a URL.
BoxFit.cover: Ensures the image covers the card width.
Column Widget: Organizes text below the image.

Clickable Card (Flutter Card onPressed Example)

By default, the Card widget does not have an onPressed property like buttons. However, you can make it clickable using InkWell or GestureDetector.

Card(
  elevation: 5,
  child: InkWell(
    onTap: () {
      print("Card Clicked");
    },
    child: Padding(
      padding: EdgeInsets.all(20),
      child: Text("Tap on this Card"),
    ),
  ),
)

Explanation

InkWell(): Provides a ripple effect when tapped.
onTap(): Defines an action when the card is clicked.

Flutter Card with Button and Icon

To add a button or an icon inside a card, you can use the ListTile widget.

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: ListTile(
    leading: Icon(Icons.star, color: Colors.orange),
    title: Text("Flutter Card with Icon & Button"),
    subtitle: Text("This card contains an icon and button."),
    trailing: ElevatedButton(
      onPressed: () {
        print("Button Clicked");
      },
      child: Text("Click Me"),
    ),
  ),
)

Explanation

ListTile Widget: A built-in Flutter widget for structured content.
leading: Adds an icon to the left.
title & subtitle: Displays text content.
trailing: Places a button at the right end of the card.

Multiple Cards in a Grid Layout

If you need multiple cards in a grid format, use GridView.builder().

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 2 columns
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemCount: 6, // Number of cards
  itemBuilder: (context, index) {
    return Card(
      elevation: 3,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
      child: Center(child: Text("Card ${index + 1}")),
    );
  },
)

Explanation

GridView.builder(): Dynamically creates a grid layout.
SliverGridDelegateWithFixedCrossAxisCount: Defines columns, spacing, and alignment.

Best Practices for Flutter Card Design

✅ Use elevation wisely to maintain a clean UI.
✅ Avoid excessive padding to keep the card visually balanced.
✅ Use shadows and borders to make the card more appealing.
✅ Ensure card content is readable with sufficient spacing.
✅ For interactivity, always wrap with InkWell or GestureDetector.

Conclusion

The Card widget in Flutter is a powerful UI component for designing beautiful material-style cards. Whether you need a basic card, a card with an image and text, or a clickable card with onPressed functionality, Flutter makes it easy.

Now that you know how to design a card in Flutter, try implementing different styles in your Flutter projects!

For more Flutter tutorials and UI design tips, stay connected! 🚀

FAQs

1. How to make a full-width Card in Flutter?

Wrap the card inside a Container and set the width as double.infinity.

Container(
  width: double.infinity,
  child: Card(
    child: Padding(
      padding: EdgeInsets.all(20),
      child: Text("Full Width Card"),
    ),
  ),
)

2. How to change the background color of a Card?

Use the color property in the Card widget.

Card(
  color: Colors.blueAccent,
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Text("Colored Card", style: TextStyle(color: Colors.white)),
  ),
)