Card class

A material design card. A card has slightly rounded corners and a shadow.

A card is a sheet of Material used to represent some related information, for example an album, a geographical location, a meal, contact details, etc.

Sample code

Here is an example of using a Card widget.

new Card(
  child: new Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      const ListTile(
        leading: const Icon(Icons.album),
        title: const Text('The Enchanted Nightingale'),
        subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
      new // make buttons use the appropriate styles for cards
        child: new ButtonBar(
          children: <Widget>[
            new FlatButton(
              child: const Text('BUY TICKETS'),
              onPressed: () { /* ... */ },
            new FlatButton(
              child: const Text('LISTEN'),
              onPressed: () { /* ... */ },

This is what it would look like:

A card with a slight shadow, consisting of two rows, one with an icon and
some text describing a musical, and the other with buttons for buying
tickets or listening to the show.

See also:



Card({Key key, Color color, double elevation, ShapeBorder shape, EdgeInsetsGeometry margin: const EdgeInsets.all(4.0), Widget child })
Creates a material design card.


child Widget
The widget below this widget in the tree. [...]
color Color
The card's background color. [...]
elevation double
The z-coordinate at which to place this card. This controls the size of the shadow below the card. [...]
margin EdgeInsetsGeometry
The empty space that surrounds the card. [...]
shape ShapeBorder
The shape of the card's Material. [...]
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited


build(BuildContext context) Widget
Describes the part of the user interface represented by this widget. [...]
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree. [...]
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by toStringDeep. [...]
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
toStringShort() String
A short, textual description of this widget.


operator ==(dynamic other) bool
The equality operator. [...]