StyledCard - Design

A card that mimics Material’s Card with Sundial colors, borders, and shadows. Source: styled_card.dart.

Variants

Variants are named constructors (the Sundial pattern — a private _CardVariant enum, no public variant param):

Constructor	Background	Border	Shadow
`StyledCard(…)`	`surfaceElevated`	none	subtle, from `elevation` (default 1.0)
`StyledCard.outlined(…)`	transparent	1 px `surfaceHigh`	none
`StyledCard.filled(…)`	`surfaceElevated`	none	none

StyledCard(
  child: Text('Elevated by default'),
)

StyledCard.outlined(
  child: Text('Transparent with a hairline border'),
)

StyledCard.filled(
  padding: EdgeInsets.all(12),
  child: Text('Flat filled surface'),
)

API

Parameter	Type	Default	Notes
`child`	`Widget?`	—	Card content
`color`	`Color?`	variant default	Overrides the background
`padding`	`EdgeInsets`	`kDefaultCardPadding` = `EdgeInsets.all(20)`	Inner padding
`margin`	`EdgeInsets?`	—	Outer margin
`border`	`BoxBorder?`	variant default	Overrides the border
`borderRadius`	`double`	`kDefaultCardBorderRadius` = `16.0`	Corner radius
`constraints`	`BoxConstraints?`	—	Size constraints
`elevation`	`double`	`1.0`	Default constructor only. Shadow alpha = `elevation.clamp(0,1) × 0.26`, blur = `elevation × 4`

The card wraps its content in Material(type: MaterialType.transparency), so ink effects from children render correctly.

Tokens consumed

surfaceElevated — elevated/filled background
surfaceHigh — outlined border

Real usage

settings_list_tile.dart

StyledCard.filled(
  padding: EdgeInsets.zero,
  child: Column(children: tiles),
)

Also the surface behind styled bottom sheets (radius 24, surfaceBg).