Card Widget

What is Card Widget?

A material design card, used to represent some related information, for example an album, a geographical location, a meal, contact details, etc.

A card has slightly rounded corners and a shadow.

Default Constructor

This default constructor creates a material design card.

Card(
    color://
    elevation:// must be null or non-negative
    shape://
    borderOnForeground: // must not be null default to true,
    margin: //
    clipBehavior://
    child://
    semanticContainer: // default to true,
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The color parameter is to apply background color to card.

The elevation parameter is to the z-coordinate at which to place this card. This controls the size of the shadow below the card.

The borderOnForeground parameter is to check whether to paint the shape border in front of the child. The default value is true. If false, the border will be painted behind the child.

The margin parameter is to add empty space that surrounds the card.

The clipBehavior parameter is to apply Clip with anti-aliasing behavior. This mode has anti-aliased clipping edges to achieve a smoother look. Defaults to Clip.antiAlias.

The child parameter is to add child widget below Card widget in the tree.

The semanticContainer is to check whether this widget represents a single semantic container, or if false a collection of individual semantic nodes. Defaults to true.

Code snippet

This code snippet shows how to configure Card widget with different parameters values.

Card(
      color: Colors.grey[100],
      elevation: 2,
      borderOnForeground: true,
      margin: const EdgeInsets.all(5),
      clipBehavior: Clip.antiAlias,
      semanticContainer: true,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            height: 100,
            width: 200,
            child: Center(
              child: Text('Flutter Course'),
            ),
          ),
          FlatButton(
            color: Colors.green,
            child: Text('Get Started'),
            onPressed: () {},
          ),
        ],
      ),
    );

Demo Code

This example shows creation of a Card widget that shows course title and a action.

import 'package:flutter/material.dart';

class CardDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.grey[100],
      elevation: 10,
      borderOnForeground: true,
      margin: const EdgeInsets.all(5),
      clipBehavior: Clip.antiAlias,
      semanticContainer: true,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            height: 100,
            width: 200,
            child: Center(
              child: Text('Flutter Learning Course'),
            ),
          ),
          FlatButton(
            color: Colors.blue[200],
            child: Text('Get Started'),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Card Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: CardDemo(),
      ),
    );
  }
}

void main() => runApp(MyApp());