Improve the documentation of Card (#178834)

The documentation of `Card` isn't clear enough on some properties and
the differences between the constructors.

Fixes https://github.com/flutter/flutter/issues/178611.

## Pre-launch Checklist

- [ ] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [ ] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [ ] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [ ] I signed the [CLA].
- [ ] I listed at least one issue that this PR fixes in the description
above.
- [ ] I updated/added relevant documentation (doc comments with `///`).
- [ ] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [ ] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [ ] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Co-authored-by: Victor Sanni <victorsanniay@gmail.com>
This commit is contained in:
Tong Mu 2025-12-17 15:19:24 -08:00 committed by GitHub
parent 2c90366b7d
commit 5fa6c12bbb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -47,9 +47,16 @@ enum _CardVariant { elevated, filled, outlined }
/// ** See code in examples/api/lib/material/card/card.1.dart **
/// {@end-tool}
///
/// Material Design 3 introduced new types of cards. The default [Card] is the
/// elevated card. To create a filled card, use [Card.filled]; to create a outlined
/// card, use [Card.outlined].
/// For Material Design 2 (when [ThemeData.useMaterial3] is false), there is a
/// single card type: the elevated card. In that mode the named constructors
/// ([Card.filled], [Card.outlined]) behave the same as the default [Card].
///
/// For Material Design 3 (when [ThemeData.useMaterial3] is true), three visual
/// variants are available: the default [Card] (elevated), [Card.filled], and
/// [Card.outlined]. All variants share the same theme class, [CardThemeData],
/// so theme properties (for example [CardThemeData.shape]) apply to every card
/// variant within the theme's scope.
///
/// {@tool dartpad}
/// This sample shows creation of [Card] widgets for elevated, filled and
/// outlined types, as described in: https://m3.material.io/components/cards/overview
@ -64,7 +71,10 @@ enum _CardVariant { elevated, filled, outlined }
/// * <https://material.io/design/components/cards.html>
/// * <https://m3.material.io/components/cards>
class Card extends StatelessWidget {
/// Creates a Material Design card.
/// Creates an elevated variant of Card.
///
/// Elevated cards have a drop shadow, providing more separation from the
/// background than filled cards, but less than outlined cards.
///
/// The [elevation] must be null or non-negative.
const Card({
@ -85,7 +95,10 @@ class Card extends StatelessWidget {
/// Create a filled variant of Card.
///
/// Filled cards provide subtle separation from the background. This has less
/// emphasis than elevated(default) or outlined cards.
/// emphasis than elevated cards (the default) or outlined cards.
///
/// If [ThemeData.useMaterial3] is false, this constructor is equivalent to
/// the default constructor of [Card].
const Card.filled({
super.key,
this.color,
@ -105,6 +118,15 @@ class Card extends StatelessWidget {
///
/// Outlined cards have a visual boundary around the container. This can
/// provide greater emphasis than the other types.
///
/// The card's outline is defined by the [shape] property. By default, the
/// card uses a [RoundedRectangleBorder] with a 12.0 corner radius, a 1.0
/// border width, and the color from [ColorScheme.outlineVariant]. If you
/// provide a custom [shape], it is recommended to use an [OutlinedBorder]
/// with a non-null [OutlinedBorder.side] to keep a visible outline.
///
/// If [ThemeData.useMaterial3] is false, this constructor is equivalent to
/// the default constructor of [Card].
const Card.outlined({
super.key,
this.color,
@ -166,10 +188,11 @@ class Card extends StatelessWidget {
///
/// Defines the card's [Material.shape].
///
/// If this property is null then the ambient [CardThemeData.shape] is used.
/// If that's null then the shape will be a [RoundedRectangleBorder]
/// with a circular corner radius of 12.0 and if [ThemeData.useMaterial3] is
/// false, then the circular corner radius will be 4.0.
/// If null, the ambient [CardTheme.shape] from [ThemeData.cardTheme] is used.
/// If that is also null, the shape defaults to a [RoundedRectangleBorder].
/// The default corner radius is 12.0 when [ThemeData.useMaterial3] is true,
/// and 4.0 otherwise. For Material 3 outlined cards, the default [shape] also
/// includes a border side (see [OutlinedBorder.side]).
final ShapeBorder? shape;
/// Whether to paint the [shape] border in front of the [child].