Card class Null safety

A Material Design card: a panel with slightly rounded corners and an elevation 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.

This is what it looks like when run:

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.

This sample shows creation of a Card widget that shows album information and two actions.
To create a local project with this code sample, run:
flutter create --sample=material.Card.1 mysample

Sometimes the primary action area of a card is the card itself. Cards can be one large touch target that shows a detail screen when tapped.

This sample shows creation of a Card widget that can be tapped. When tapped this Card's InkWell displays an "ink splash" that fills the entire card.
To create a local project with this code sample, run:
flutter create --sample=material.Card.2 mysample

Material Design 3 introduced new types of cards. These can be produced by configuring the Card widget's properties. Card widget.

This sample shows creation of Card widgets for elevated, filled and outlined types, as described in:
To create a local project with this code sample, run:
flutter create --sample=material.Card.3 mysample

See also:



Card({Key? key, Color? color, Color? shadowColor, Color? surfaceTintColor, double? elevation, ShapeBorder? shape, bool borderOnForeground = true, EdgeInsetsGeometry? margin, Clip? clipBehavior, Widget? child, bool semanticContainer = true})
Creates a Material Design card.


borderOnForeground bool
Whether to paint the shape border in front of the child.
child Widget?
The widget below this widget in the tree.
clipBehavior Clip?
The content will be clipped (or not) according to this option.
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.
hashCode int
The hash code for this object.
@nonVirtual, read-only, inherited
key Key?
Controls how one widget replaces another widget in the tree.
final, inherited
margin EdgeInsetsGeometry?
The empty space that surrounds the card.
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited
semanticContainer bool
Whether this widget represents a single semantic container, or if false a collection of individual semantic nodes.
shadowColor Color?
The color to paint the shadow below the card.
shape ShapeBorder?
The shape of the card's Material.
surfaceTintColor Color?
The color used as an overlay on color to indicate elevation.


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 DiagnosticsNode.toStringDeep.
toString({DiagnosticLevel minLevel =}) String
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 ==(Object other) bool
The equality operator.
@nonVirtual, inherited