ZdsCard class

A card used to display grouped information and related actions.

Cards provide a way to group information together and allow navigating large quantities of data. For example, cards can be used to show information about an employee's shift, including the starting and ending time, the date, and the current status. Cards make parsing information easier and faster than with a traditional table.

For cards to be effective, an inner hierarchy is necessary. This can be achieved by organizing the information shown in a card with a title, the supporting content, and actions:

ZdsCard(
  child: Column(
    children: [
      // Key information like the title can go here so the user understands the card's content in a glance
      ZdsCardHeader(),
      // The supporting content of the card (i.e. in a card about a delivery, its status would go here)
      Text(),
      // Related actions are placed at the end as they're only useful after the user has processed the rest of the
      // card's information
      Row(children:[ZdsButton(), ZdsButton()])
    ]
  )
)

This widget also integrates Semantics through onTapHint, which is highly recommended to use so Talkback and Voiceover users have an adequate experience.

See also:

Inheritance
Available Extensions

Constructors

ZdsCard({Key? key, Widget? child, VoidCallback? onTap, Color? backgroundColor, Gradient? gradient, String? onTapHint, EdgeInsets padding = const EdgeInsets.symmetric(horizontal: 24, vertical: 20), ZdsCardVariant variant = ZdsCardVariant.elevated, EdgeInsets? margin, String? semanticLabel})
Creates a card to display information.
const

Properties

backgroundColor Color?
The background color of the card.
final
child Widget?
The card's contents.
final
gradient Gradient?
A gradient to apply to the card's background
final
hashCode int
The hash code for this object.
no setterinherited
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
margin EdgeInsets?
Margin surrounding the outside of the card
final
onTap VoidCallback?
A function called whenever the user taps on the card.
final
onTapHint String?
A String used by Semantics to provide a hint of what tapping on this Card will do.
final
padding EdgeInsets
Empty space to inscribe inside this widget.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
semanticLabel String?
The semantic label applied to the card.
final
variant ZdsCardVariant
Whether to use an outlined or elevated card.
final

Methods

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

Operators

operator ==(Object other) bool
The equality operator.
inherited