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 it along with available options for customization.

Create a Card

Creating a Card is very easy. You only need to call the constructor and at least pass a Widget on child option 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'),
        ),
      ],
    ),
  );

 

Customize Card

Customize 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 widget. Then, specify the desired width and height of the Container.

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

Customize Color

Use color option to set the color of the Card. It's of Flutter's Color type. You can either choose predefined color or set the RGB value.

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

Customize Border

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

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

Customize Shadow

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

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

For list of available options, see the table below.

OptionDescription
Key keyThe Card widget's key
Color colorThe card's background color.
double elevationZ-coordinate of the widget which affects the size of shadow.
ShapeBorder shapeShape of the Card.
bool borderOnForegroundWhether to paint the shape border in front of the child. Default is true.
EdgeInsetsGeometry marginThe empty space that surrounds the Card.
Clip clipBehaviorIf this property is null then ThemeData.cardTheme.clipBehavior is used.
Widget childThe content.
bool semanticContainerIf true, it represents a single semantic container,. If false, it represents a collection of individual semantic nodes. Default is true

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: () {},
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),