Add Card.filled and Card.outlined factory methods (#136229)

QuncCccccc · web-flow · commit 4a0f261b4e24 · 2023-11-01T23:29:49.000Z
Fixes #119401

This PR is to:
* add `Card.filled` and `Card.outlined` factory methods so that we can use tokens for these two types of cards to generate default theme instead of providing hard-corded values in example.
* update card.2.dart example.
* add test file for card.2.dart example.
* fix some mismatch caused by editing the auto-generated defaults by hand in navigation_bar.dart and navigation_drawer.dart.
diff --git a/dev/bots/check_code_samples.dart b/dev/bots/check_code_samples.dart
@@ -261,7 +261,7 @@ class SampleChecker {
   }
 }
 
-// These tests are known to be missing.  They should all eventually be
+// These tests are known to be missing. They should all eventually be
 // implemented, but until they are we allow them, so that we can catch any new
 // examples that are added without tests.
 //
@@ -282,7 +282,6 @@ final Set<String> _knownMissingTests = <String>{
   'examples/api/test/material/text_field/text_field.1_test.dart',
   'examples/api/test/material/button_style/button_style.0_test.dart',
   'examples/api/test/material/range_slider/range_slider.0_test.dart',
-  'examples/api/test/material/card/card.2_test.dart',
   'examples/api/test/material/card/card.0_test.dart',
   'examples/api/test/material/selection_container/selection_container_disabled.0_test.dart',
   'examples/api/test/material/selection_container/selection_container.0_test.dart',
diff --git a/dev/tools/gen_defaults/bin/gen_defaults.dart b/dev/tools/gen_defaults/bin/gen_defaults.dart
@@ -112,7 +112,9 @@ Future<void> main(List<String> args) async {
   ButtonTemplate('md.comp.filled-tonal-button', 'FilledTonalButton', '$materialLib/filled_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.outlined-button', 'OutlinedButton', '$materialLib/outlined_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.text-button', 'TextButton', '$materialLib/text_button.dart', tokens).updateFile();
-  CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile();
+  CardTemplate('md.comp.elevated-card', 'Card', '$materialLib/card.dart', tokens).updateFile();
+  CardTemplate('md.comp.filled-card', 'FilledCard', '$materialLib/card.dart', tokens).updateFile();
+  CardTemplate('md.comp.outlined-card', 'OutlinedCard', '$materialLib/card.dart', tokens).updateFile();
   CheckboxTemplate('Checkbox', '$materialLib/checkbox.dart', tokens).updateFile();
   ColorSchemeTemplate(colorLightTokens, colorDarkTokens, 'ColorScheme', '$materialLib/theme_data.dart', tokens).updateFile();
   DatePickerTemplate('DatePicker', '$materialLib/date_picker_theme.dart', tokens).updateFile();
diff --git a/dev/tools/gen_defaults/generated/used_tokens.csv b/dev/tools/gen_defaults/generated/used_tokens.csv
@@ -203,6 +203,10 @@ md.comp.filled-button.label-text.text-style,
 md.comp.filled-button.pressed.container.elevation,
 md.comp.filled-button.pressed.state-layer.color,
 md.comp.filled-button.pressed.state-layer.opacity,
+md.comp.filled-card.container.color,
+md.comp.filled-card.container.elevation,
+md.comp.filled-card.container.shadow-color,
+md.comp.filled-card.container.shape,
 md.comp.filled-icon-button.container.color,
 md.comp.filled-icon-button.container.shape,
 md.comp.filled-icon-button.container.size,
@@ -459,6 +463,13 @@ md.comp.outlined-button.outline.color,
 md.comp.outlined-button.outline.width,
 md.comp.outlined-button.pressed.state-layer.color,
 md.comp.outlined-button.pressed.state-layer.opacity,
+md.comp.outlined-card.container.color,
+md.comp.outlined-card.container.elevation,
+md.comp.outlined-card.container.shadow-color,
+md.comp.outlined-card.container.shape,
+md.comp.outlined-card.container.surface-tint-layer.color,
+md.comp.outlined-card.outline.color,
+md.comp.outlined-card.outline.width,
 md.comp.outlined-icon-button.container.shape,
 md.comp.outlined-icon-button.container.size,
 md.comp.outlined-icon-button.disabled.icon.color,
diff --git a/dev/tools/gen_defaults/lib/card_template.dart b/dev/tools/gen_defaults/lib/card_template.dart
@@ -5,32 +5,49 @@
 import 'template.dart';
 
 class CardTemplate extends TokenTemplate {
-  const CardTemplate(super.blockName, super.fileName, super.tokens, {
+  const CardTemplate(this.tokenGroup, super.blockName, super.fileName, super.tokens, {
     super.colorSchemePrefix = '_colors.',
   });
 
+  final String tokenGroup;
+
+  String _shape() {
+    final String cardShape = shape('$tokenGroup.container');
+    if (tokenAvailable('$tokenGroup.outline.color')) {
+      return '''
+
+    $cardShape.copyWith(
+      side: ${border('$tokenGroup.outline')}
+    )''';
+    } else {
+      return cardShape;
+    }
+  }
+
   @override
   String generate() => '''
 class _${blockName}DefaultsM3 extends CardTheme {
   _${blockName}DefaultsM3(this.context)
     : super(
         clipBehavior: Clip.none,
-        elevation: ${elevation("md.comp.elevated-card.container")},
+        elevation: ${elevation('$tokenGroup.container')},
         margin: const EdgeInsets.all(4.0),
-        shape: ${shape("md.comp.elevated-card.container")},
       );
 
   final BuildContext context;
   late final ColorScheme _colors = Theme.of(context).colorScheme;
 
   @override
-  Color? get color => ${componentColor("md.comp.elevated-card.container")};
+  Color? get color => ${componentColor('$tokenGroup.container')};
+
+  @override
+  Color? get shadowColor => ${colorOrTransparent('$tokenGroup.container.shadow-color')};
 
   @override
-  Color? get shadowColor => ${colorOrTransparent("md.comp.elevated-card.container.shadow-color")};
+  Color? get surfaceTintColor => ${colorOrTransparent('$tokenGroup.container.surface-tint-layer.color')};
 
   @override
-  Color? get surfaceTintColor => ${colorOrTransparent("md.comp.elevated-card.container.surface-tint-layer.color")};
+  ShapeBorder? get shape =>${_shape()};
 }
 ''';
 }
diff --git a/dev/tools/gen_defaults/lib/navigation_bar_template.dart b/dev/tools/gen_defaults/lib/navigation_bar_template.dart
@@ -34,9 +34,11 @@ class _${blockName}DefaultsM3 extends NavigationBarThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       return IconThemeData(
         size: ${getToken("md.comp.navigation-bar.icon.size")},
-        color: states.contains(MaterialState.selected)
-          ? ${componentColor("md.comp.navigation-bar.active.icon")}
-          : ${componentColor("md.comp.navigation-bar.inactive.icon")},
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
+            ? ${componentColor("md.comp.navigation-bar.active.icon")}
+            : ${componentColor("md.comp.navigation-bar.inactive.icon")},
       );
     });
   }
@@ -47,9 +49,12 @@ class _${blockName}DefaultsM3 extends NavigationBarThemeData {
   @override MaterialStateProperty<TextStyle?>? get labelTextStyle {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
     final TextStyle style = ${textStyle("md.comp.navigation-bar.label-text")}!;
-      return style.apply(color: states.contains(MaterialState.selected)
-        ? ${componentColor("md.comp.navigation-bar.active.label-text")}
-        : ${componentColor("md.comp.navigation-bar.inactive.label-text")}
+      return style.apply(
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
+            ? ${componentColor("md.comp.navigation-bar.active.label-text")}
+            : ${componentColor("md.comp.navigation-bar.inactive.label-text")}
       );
     });
   }
diff --git a/dev/tools/gen_defaults/lib/navigation_drawer_template.dart b/dev/tools/gen_defaults/lib/navigation_drawer_template.dart
@@ -42,7 +42,9 @@ class _${blockName}DefaultsM3 extends NavigationDrawerThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       return IconThemeData(
         size: ${getToken("md.comp.navigation-drawer.icon.size")},
-        color: states.contains(MaterialState.selected)
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
             ? ${componentColor("md.comp.navigation-drawer.active.icon")}
             : ${componentColor("md.comp.navigation-drawer.inactive.icon")},
       );
@@ -54,7 +56,9 @@ class _${blockName}DefaultsM3 extends NavigationDrawerThemeData {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
       final TextStyle style = ${textStyle("md.comp.navigation-drawer.label-text")}!;
       return style.apply(
-        color: states.contains(MaterialState.selected)
+        color: states.contains(MaterialState.disabled)
+          ? _colors.onSurfaceVariant.withOpacity(0.38)
+          : states.contains(MaterialState.selected)
             ? ${componentColor("md.comp.navigation-drawer.active.label-text")}
             : ${componentColor("md.comp.navigation-drawer.inactive.label-text")},
       );
diff --git a/examples/api/lib/material/card/card.2.dart b/examples/api/lib/material/card/card.2.dart
@@ -16,97 +16,33 @@ class CardExamplesApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
       home: Scaffold(
         appBar: AppBar(title: const Text('Card Examples')),
-        body: const Column(
-          children: <Widget>[
-            Spacer(),
-            ElevatedCardExample(),
-            FilledCardExample(),
-            OutlinedCardExample(),
-            Spacer(),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-/// An example of the elevated card type.
-///
-/// The default settings for [Card] will provide an elevated
-/// card matching the spec:
-///
-/// https://m3.material.io/components/cards/specs#a012d40d-7a5c-4b07-8740-491dec79d58b
-class ElevatedCardExample extends StatelessWidget {
-  const ElevatedCardExample({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return const Center(
-      child: Card(
-        child: SizedBox(
-          width: 300,
-          height: 100,
-          child: Center(child: Text('Elevated Card')),
-        ),
-      ),
-    );
-  }
-}
-
-/// An example of the filled card type.
-///
-/// To make a [Card] match the filled type, the default elevation and color
-/// need to be changed to the values from the spec:
-///
-/// https://m3.material.io/components/cards/specs#0f55bf62-edf2-4619-b00d-b9ed462f2c5a
-class FilledCardExample extends StatelessWidget {
-  const FilledCardExample({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return Center(
-      child: Card(
-        elevation: 0,
-        color: Theme.of(context).colorScheme.surfaceVariant,
-        child: const SizedBox(
-          width: 300,
-          height: 100,
-          child: Center(child: Text('Filled Card')),
+        body: const Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              Card(child: _SampleCard(cardName: 'Elevated Card')),
+              Card.filled(child: _SampleCard(cardName: 'Filled Card')),
+              Card.outlined(child: _SampleCard(cardName: 'Outlined Card')),
+            ],
+          ),
         ),
       ),
     );
   }
 }
 
-/// An example of the outlined card type.
-///
-/// To make a [Card] match the outlined type, the default elevation and shape
-/// need to be changed to the values from the spec:
-///
-/// https://m3.material.io/components/cards/specs#0f55bf62-edf2-4619-b00d-b9ed462f2c5a
-class OutlinedCardExample extends StatelessWidget {
-  const OutlinedCardExample({super.key});
+class _SampleCard extends StatelessWidget {
+  const _SampleCard({required this.cardName});
+  final String cardName;
 
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: Card(
-        elevation: 0,
-        shape: RoundedRectangleBorder(
-          side: BorderSide(
-            color: Theme.of(context).colorScheme.outline,
-          ),
-          borderRadius: const BorderRadius.all(Radius.circular(12)),
-        ),
-        child: const SizedBox(
-          width: 300,
-          height: 100,
-          child: Center(child: Text('Outlined Card')),
-        ),
-      ),
+    return SizedBox(
+      width: 300,
+      height: 100,
+      child: Center(child: Text(cardName)),
     );
   }
 }
diff --git a/examples/api/test/material/card/card.2_test.dart b/examples/api/test/material/card/card.2_test.dart
@@ -0,0 +1,59 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/card/card.2.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Card variants', (WidgetTester tester) async {
+    await tester.pumpWidget(const example.CardExamplesApp());
+
+    expect(find.byType(Card), findsNWidgets(3));
+
+    expect(find.widgetWithText(Card, 'Elevated Card'), findsOneWidget);
+    expect(find.widgetWithText(Card, 'Filled Card'), findsOneWidget);
+    expect(find.widgetWithText(Card, 'Outlined Card'), findsOneWidget);
+
+    Material getCardMaterial(WidgetTester tester, int cardIndex) {
+      return tester.widget<Material>(
+        find.descendant(
+          of: find.byType(Card).at(cardIndex),
+          matching: find.byType(Material),
+        ),
+      );
+    }
+
+    final Material defaultCard = getCardMaterial(tester, 0);
+    expect(defaultCard.clipBehavior, Clip.none);
+    expect(defaultCard.elevation, 1.0);
+    expect(defaultCard.shape, const RoundedRectangleBorder(
+      borderRadius: BorderRadius.all(Radius.circular(12.0)),
+    ));
+    expect(defaultCard.color, const Color(0xfffffbfe));
+    expect(defaultCard.shadowColor, const Color(0xff000000));
+    expect(defaultCard.surfaceTintColor, const Color(0xff6750a4));
+
+    final Material filledCard = getCardMaterial(tester, 1);
+    expect(filledCard.clipBehavior, Clip.none);
+    expect(filledCard.elevation, 0.0);
+    expect(filledCard.shape, const RoundedRectangleBorder(
+      borderRadius: BorderRadius.all(Radius.circular(12.0)),
+    ));
+    expect(filledCard.color, const Color(0xffe7e0ec));
+    expect(filledCard.shadowColor, const Color(0xff000000));
+    expect(filledCard.surfaceTintColor, const Color(0x00000000));
+
+    final Material outlinedCard = getCardMaterial(tester, 2);
+    expect(outlinedCard.clipBehavior, Clip.none);
+    expect(outlinedCard.elevation, 0.0);
+    expect(outlinedCard.shape, const RoundedRectangleBorder(
+      side: BorderSide(color: Color(0xffcac4d0)),
+      borderRadius: BorderRadius.all(Radius.circular(12.0)),
+    ));
+    expect(outlinedCard.color, const Color(0xfffffbfe));
+    expect(outlinedCard.shadowColor, const Color(0xff000000));
+    expect(outlinedCard.surfaceTintColor, const Color(0xff6750a4));
+  });
+}
diff --git a/packages/flutter/lib/src/material/card.dart b/packages/flutter/lib/src/material/card.dart
diff --git a/packages/flutter/lib/src/material/navigation_bar.dart b/packages/flutter/lib/src/material/navigation_bar.dart
diff --git a/packages/flutter/test/material/card_test.dart b/packages/flutter/test/material/card_test.dart
