Flutter Widget: Card

The Card widget is one of the most commonly used widgets in Flutter when it comes to creating beautiful and interactive user interfaces. It provides a flexible and customizable container that can display relevant information in a visually appealing manner. In this article, we will dive into the Card widget and explore its various features and usage examples.

Creating a Basic Card

To create a basic Card in Flutter, you can use the Card class provided by the Flutter framework. Here's an example of how you can create a simple Card widget:

Copycopy code to clipboard
1Card(
2  child: ListTile(
3    leading: Icon(Icons.album),
4    title: Text('Card Title'),
5    subtitle: Text('Card Subtitle'),
6    trailing: Icon(Icons.more_vert),
7  ),
8)

In the above example, we use the Card widget as the root widget and provide a child widget within it. In this case, we use the ListTile widget as the child of the Card. The ListTile widget allows us to easily create a typical card layout with an optional leading icon, a title, a subtitle, and an optional trailing icon.

Customizing the Card

The Card widget provides various properties that allow you to customize its appearance and behavior. Here are a few commonly used properties:

• color: Sets the background color of the Card.
• elevation: Controls the depth of the Card's shadow.
• shape: Defines the shape of the Card, such as rounded corners or a custom shape.
• borderOnForeground: Specifies whether the border should be drawn above or below the Card's children.
• margin: Sets the margin around the Card.
• clipBehavior: Defines how the content should be clipped within the Card's bounds.

Let's take a look at an example that demonstrates some of these properties:

Copycopy code to clipboard
1Card(
2  color: Colors.blue,
3  elevation: 4.0,
4  shape: RoundedRectangleBorder(
5    borderRadius: BorderRadius.circular(8.0),
6  ),
7  child: Container(
8    padding: EdgeInsets.all(16.0),
9    child: Text(
10      'Customized Card',
11      style: TextStyle(
12        color: Colors.white,
13        fontSize: 16.0,
14        fontWeight: FontWeight.bold,
15      ),
16    ),
17  ),
18)

In this example, we customize the Card by setting the color to blue, the elevation to 4.0, and the shape to have rounded corners with a radius of 8.0. We also provide a child widget, which is a Container with some padding and a Text widget inside.

Using Card in a ListView

The Card widget is often used in conjunction with other widgets, such as ListView, to create lists of cards. Here's an example of how you can use the Card widget within a ListView:

Copycopy code to clipboard
1ListView(
2  children: [
3    Card(
4      child: ListTile(
5        leading: Icon(Icons.album),
6        title: Text('Card 1'),
7        subtitle: Text('Subtitle 1'),
8        trailing: Icon(Icons.more_vert),
9      ),
10    ),
11    Card(
12      child: ListTile(
13        leading: Icon(Icons.album),
14        title: Text('Card 2'),
15        subtitle: Text('Subtitle 2'),
16        trailing: Icon(Icons.more_vert),
17      ),
18    ),
19    // Add more cards here...
20  ],
21)

In this example, we create a ListView with multiple Card widgets as its children. Each Card contains a ListTile widget with different content. This allows us to display a scrollable list of cards, which is a common pattern in many applications.

In Closing...

The Card widget in Flutter provides a versatile and customizable container for displaying information in a visually appealing manner. It can be used to create various types of cards, ranging from simple layouts to complex designs. By leveraging the properties and customization options of the Card widget, you can create stunning user interfaces for your Flutter applications.