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

See also:



Card({Key? key, Color? color, Color? shadowColor, 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. [...]


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