Flutter - Card Widget Example

This tutorial is about how to create Card widget in Flutter and how to customize it.

Dart provides a ready-to-use Material Card class. Below are some examples of how to use the widget along with the properties you can use to customize the visual of the widget.

Creating a Card

Creating a Card is very easy. You only need to call the constructor and at least pass a Widget as child property to be displayed inside the Card.

  return Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: Icon(Icons.album, size: 50),
          title: Text('Heart Shaker'),
          subtitle: Text('TWICE'),
        ),
      ],
    ),
  );

Customizing Card

Customizing Size

As it doesn't provide option to adjust width or height, the easiest way to set the size is by wrapping it inside a Container or a SizedBox widget. Then, specify the desired width and height of the Container or SizedBox.

  Container(
    width: 200,
    height: 200,
    child: Card(
       ...
    ),
  )

Customizing Color

Use color property to set the color of the Card. You need to pass a Color, either by using predefined color or creating a custom color by defining the RGB values.

  return Card(
    color: Colors.black,
  //  color: Color.fromARGB(50, 255, 100, 200),
    child: ...
  );

Customizing Border

By default, it uses RoundedRectangleBorder with a radius of 4.0. You can pass a custom ShapeBorder object. The example below uses RoundedRectangleBorder with a bigger radius of 15.0

  return Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15.0),
    ),
    child: ...
  );

Customizing Shadow

If you want to control the shadow around the Card, you can set the elevation property. The bigger the value, the bigger the shadow distance.

  return Card(
    elevaion: 10,
    child: ...
  );

Below is an example of a Card with custom size, background color, shape and shadow.

  Container(
    width: 200,
    child: Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      color: Colors.pink,
      elevation: 10,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const ListTile(
            leading: Icon(Icons.album, size: 70),
            title: Text('Heart Shaker', style: TextStyle(color: Colors.white)),
            subtitle: Text('TWICE', style: TextStyle(color: Colors.white)),
          ),
          ButtonTheme.bar(
            child: ButtonBar(
              children: <Widget>[
                FlatButton(
                  child: const Text('Edit', style: TextStyle(color: Colors.white)),
                  onPressed: () {},
                ),
                FlatButton(
                  child: const Text('Delete', style: TextStyle(color: Colors.white)),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),

Properties

Below is the list of available properties.

• Color color: The card's background color.
• double elevation: The z-coordinate of the widget which affects the size of shadow.
• ShapeBorder shape: Shape of the Card.
• bool borderOnForeground: Whether to paint the shape border in front of the child. Default to true.
• EdgeInsetsGeometry margin: The empty space that surrounds the Card.
• Clip clipBehavior: If this property is null then ThemeData.cardTheme.clipBehavior is used.
• Widget child: The widget to be displayed inside Card
• bool semanticContainer: If true, it represents a single semantic container. If false, it represents a collection of individual semantic nodes. Default to true.