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:
- ZdsCardHeader, used to create a title header in a card
- ZdsCardWithActions, a ZdsCard variant with an actions/status bar at the bottom.
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