Flutter Card Widget Tutorial

Flutter Card Widget Tutorial: A Comprehensive Guide

The Card Widget in Flutter is a versatile and visually appealing way to present content. Whether you want to display text, images, or interactive elements, the card widget provides a customizable container with features like shadows, borders, and rounded corners. In this tutorial, we explore various use cases and implementations of the card widget to enhance your app’s user interface.

1. Basic Card

A simple card can act as a clean container for text or any content. Here’s how you can create one:

Card(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text("This is a basic card."),
  ),
)

Output:

A minimal card with a text element.

2. Card with Elevation

Add depth and a 3D effect to your card by using the elevation property:

Card(
  elevation: 10,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text("Card with elevation."),
  ),
)

Why Use It?

Elevation helps cards stand out, especially in layered designs.

3. Rounded Corners

Give your cards a modern look by rounding the edges:

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text("Card with rounded corners."),
  ),
)

4. Add Borders

Add a border with customizable width and color:

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
    side: BorderSide(color: Colors.blue, width: 2),
  ),
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text("Card with a border."),
  ),
)

5. Card with an Image

Combine images with text or other widgets:

Card(
  child: Column(
    children: [
      Image.network("https://via.placeholder.com/150"),
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text("Card with an image."),
      ),
    ],
  ),
)

6. Card with Icon and Text

Integrate icons into your card for enhanced usability:

Card(
  child: ListTile(
    leading: Icon(Icons.star, color: Colors.amber),
    title: Text("Card with an icon."),
    subtitle: Text("This card has both icon and text."),
  ),
)

7. Card with Buttons

Add interactivity to your cards with action buttons:

Card(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      ListTile(
        leading: Icon(Icons.album),
        title: Text("Card with buttons"),
        subtitle: Text("This card has action buttons below."),
      ),
      ButtonBar(
        children: [
          TextButton(
            onPressed: () {},
            child: Text("ACTION 1"),
          ),
          TextButton(
            onPressed: () {},
            child: Text("ACTION 2"),
          ),
        ],
      ),
    ],
  ),
)

8. Gradient Background

Create a card with an eye-catching gradient background:

Card(
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.purple],
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Text("Card with gradient background."),
    ),
  ),
)

9. Interactive Card

Make your cards clickable with the InkWell widget:

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

10. Scrollable Card List

Display multiple cards in a vertically scrollable list:

ListView(
  children: [
    Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text("Card 1"),
      ),
    ),
    Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text("Card 2"),
      ),
    ),
  ],
)

11. Horizontal Card

Create a horizontally scrollable card list:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Card(
        child: Container(
          width: 200,
          height: 150,
          color: Colors.red,
        ),
      ),
      Card(
        child: Container(
          width: 200,
          height: 150,
          color: Colors.green,
        ),
      ),
    ],
  ),
)

12. Custom Shadow

Customize the card’s shadow color and spread:

Card(
  elevation: 10,
  shadowColor: Colors.red,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Text("Card with custom shadow color."),
  ),
)

13. Card with Stack

Layer widgets on top of each other for a creative design:

Card(
  child: Stack(
    children: [
      Container(
        height: 150,
        color: Colors.blue,
      ),
      Positioned(
        bottom: 10,
        left: 10,
        child: Text(
          "Overlay text on a card.",
          style: TextStyle(color: Colors.white, fontSize: 16),
        ),
      ),
    ],
  ),
)

Conclusion

The Card Widget in Flutter is a powerful tool for building beautiful, responsive UI designs. From simple text containers to interactive, image-laden cards, it offers endless possibilities. Experiment with these examples to find the perfect implementation for your app.

Explore Other Flutter Topics…

Tagged Custom Card Designs in Flutter, Flutter Card Widget Tutorial, Flutter Card with Gradient Background, Interactive Cards in Flutter, Scrollable Card List in Flutter