Migrate Chips to Material 3 (#107166)

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -20,6 +20,9 @@ import 'dart:io';
 import 'package:gen_defaults/app_bar_template.dart';
 import 'package:gen_defaults/button_template.dart';
 import 'package:gen_defaults/card_template.dart';
+import 'package:gen_defaults/chip_action_template.dart';
+import 'package:gen_defaults/chip_filter_template.dart';
+import 'package:gen_defaults/chip_input_template.dart';
 import 'package:gen_defaults/dialog_template.dart';
 import 'package:gen_defaults/fab_template.dart';
 import 'package:gen_defaults/icon_button_template.dart';
@@ -101,6 +104,10 @@ Future<void> main(List<String> args) async {
   ButtonTemplate('md.comp.outlined-button', '$materialLib/outlined_button.dart', tokens).updateFile();
   ButtonTemplate('md.comp.text-button', '$materialLib/text_button.dart', tokens).updateFile();
   CardTemplate('$materialLib/card.dart', tokens).updateFile();
+  ChipActionTemplate('$materialLib/chip_action.dart', tokens).updateFile();
+  ChipFilterTemplate('$materialLib/chip_filter.dart', tokens).updateFile();
+  ChipFilterTemplate('$materialLib/chip_choice.dart', tokens).updateFile();
+  ChipInputTemplate('$materialLib/chip_input.dart', tokens).updateFile();
   DialogTemplate('$materialLib/dialog.dart', tokens).updateFile();
   FABTemplate('$materialLib/floating_action_button.dart', tokens).updateFile();
   IconButtonTemplate('$materialLib/icon_button.dart', tokens).updateFile();

dev/tools/gen_defaults/lib/chip_action_template.dart

+// 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 'template.dart';
+
+class ChipActionTemplate extends TokenTemplate {
+
+  const ChipActionTemplate(super.fileName, super.tokens);
+
+  static const String tokenGroup = 'md.comp.assist-chip';
+  static const String variant = '.flat';
+
+  @override
+  String generate() => '''
+// Generated version ${tokens["version"]}
+class _TokenDefaultsM3 extends ChipThemeData {
+  const _TokenDefaultsM3(this.context, this.isEnabled)
+    : super(
+        elevation: ${elevation("$tokenGroup$variant.container")},
+        shape: ${shape("$tokenGroup.container")},
+        showCheckmark: true,
+      );
+
+  final BuildContext context;
+  final bool isEnabled;
+
+  @override
+  TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
+
+  @override
+  Color? get backgroundColor => ${componentColor("$tokenGroup$variant.container")};
+
+  @override
+  Color? get shadowColor => ${color("$tokenGroup.container.shadow-color")};
+
+  @override
+  @override Color? get surfaceTintColor => ${color("$tokenGroup.container.surface-tint-layer.color")};
+
+  @override
+  Color? get selectedColor => ${componentColor("$tokenGroup$variant.selected.container")};
+
+  @override
+  Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
+
+  @override
+  Color? get disabledColor => ${componentColor("$tokenGroup$variant.disabled.container")};
+
+  @override
+  Color? get deleteIconColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
+
+  @override
+  BorderSide? get side => isEnabled
+    ? ${border('$tokenGroup$variant.outline')}
+    : ${border('$tokenGroup$variant.disabled.outline')};
+
+  @override
+  IconThemeData? get iconTheme => IconThemeData(
+    color: isEnabled
+      ? ${color("$tokenGroup.with-icon.icon.color")}
+      : ${color("$tokenGroup.with-icon.disabled.icon.color")},
+    size: ${tokens["$tokenGroup.with-icon.icon.size"]},
+  );
+
+  @override
+  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
+
+  /// The chip at text scale 1 starts with 8px on each side and as text scaling
+  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+  /// Once the widget has a text scaling of 2 or higher than the label padding
+  /// remains 4px.
+  @override
+  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
+    const EdgeInsets.symmetric(horizontal: 8.0),
+    const EdgeInsets.symmetric(horizontal: 4.0),
+    clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
+  )!;
+}
+''';
+}

dev/tools/gen_defaults/lib/chip_filter_template.dart

+// 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 'template.dart';
+
+class ChipFilterTemplate extends TokenTemplate {
+  const ChipFilterTemplate(super.fileName, super.tokens);
+
+  static const String tokenGroup = 'md.comp.filter-chip';
+  static const String variant = '.flat';
+
+  @override
+  String generate() => '''
+// Generated version ${tokens["version"]}
+class _TokenDefaultsM3 extends ChipThemeData {
+  const _TokenDefaultsM3(this.context, this.isEnabled, this.isSelected)
+    : super(
+        elevation: ${elevation("$tokenGroup$variant.container")},
+        shape: ${shape("$tokenGroup.container")},
+        showCheckmark: true,
+      );
+
+  final BuildContext context;
+  final bool isEnabled;
+  final bool isSelected;
+
+  @override
+  TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
+
+  @override
+  Color? get backgroundColor => ${componentColor("$tokenGroup$variant.container")};
+
+  @override
+  Color? get shadowColor => ${color("$tokenGroup.container.shadow-color")};
+
+  @override
+  @override Color? get surfaceTintColor => ${color("$tokenGroup.container.surface-tint-layer.color")};
+
+  @override
+  Color? get selectedColor => isEnabled
+    ? ${componentColor("$tokenGroup$variant.selected.container")}
+    : ${componentColor("$tokenGroup$variant.disabled.selected.container")};
+
+  @override
+  Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
+
+  @override
+  Color? get disabledColor => isSelected
+   ? ${componentColor("$tokenGroup$variant.disabled.selected.container")}
+   : ${componentColor("$tokenGroup$variant.disabled.unselected.container")};
+
+  @override
+  Color? get deleteIconColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
+
+  @override
+  BorderSide? get side => !isSelected
+    ? isEnabled
+      ? ${border('$tokenGroup$variant.unselected.outline')}
+      : ${border('$tokenGroup$variant.disabled.unselected.outline')}
+    : null;
+
+  @override
+  IconThemeData? get iconTheme => IconThemeData(
+    color: isEnabled
+      ? ${color("$tokenGroup.with-icon.icon.color")}
+      : ${color("$tokenGroup.with-icon.disabled.icon.color")},
+    size: ${tokens["$tokenGroup.with-icon.icon.size"]},
+  );
+
+  @override
+  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
+
+  /// The chip at text scale 1 starts with 8px on each side and as text scaling
+  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+  /// Once the widget has a text scaling of 2 or higher than the label padding
+  /// remains 4px.
+  @override
+  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
+    const EdgeInsets.symmetric(horizontal: 8.0),
+    const EdgeInsets.symmetric(horizontal: 4.0),
+    clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
+  )!;
+}
+''';
+}

dev/tools/gen_defaults/lib/chip_input_template.dart

+// 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 'template.dart';
+
+class ChipInputTemplate extends TokenTemplate {
+  const ChipInputTemplate(super.fileName, super.tokens);
+
+  static const String tokenGroup = 'md.comp.input-chip';
+  static const String variant = '';
+
+  @override
+  String generate() => '''
+// Generated version ${tokens["version"]}
+class _TokenDefaultsM3 extends ChipThemeData {
+  const _TokenDefaultsM3(this.context, this.isEnabled)
+    : super(
+        elevation: ${elevation("$tokenGroup$variant.container")},
+        shape: ${shape("$tokenGroup.container")},
+        showCheckmark: true,
+      );
+
+  final BuildContext context;
+  final bool isEnabled;
+
+  @override
+  TextStyle? get labelStyle => ${textStyle("$tokenGroup.label-text")};
+
+  @override
+  Color? get backgroundColor => ${componentColor("$tokenGroup$variant.container")};
+
+  @override
+  Color? get shadowColor => ${color("$tokenGroup.container.shadow-color")};
+
+  @override
+  @override Color? get surfaceTintColor => ${color("$tokenGroup.container.surface-tint-layer.color")};
+
+  @override
+  Color? get selectedColor => ${componentColor("$tokenGroup$variant.selected.container")};
+
+  @override
+  Color? get checkmarkColor => ${color("$tokenGroup.with-icon.selected.icon.color")};
+
+  @override
+  Color? get disabledColor => ${componentColor("$tokenGroup$variant.disabled.container")};
+
+  @override
+  Color? get deleteIconColor => ${color("$tokenGroup.with-trailing-icon.selected.trailing-icon.color")};
+
+  @override
+  BorderSide? get side => isEnabled
+    ? ${border('$tokenGroup$variant.unselected.outline')}
+    : ${border('$tokenGroup$variant.disabled.unselected.outline')};
+
+  @override
+  IconThemeData? get iconTheme => IconThemeData(
+    color: isEnabled
+      ? ${color("$tokenGroup.with-leading-icon.leading-icon.color")}
+      : ${color("$tokenGroup.with-leading-icon.disabled.leading-icon.color")},
+    size: ${tokens["$tokenGroup.with-leading-icon.leading-icon.size"]},
+  );
+
+  @override
+  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
+
+  /// The chip at text scale 1 starts with 8px on each side and as text scaling
+  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+  /// Once the widget has a text scaling of 2 or higher than the label padding
+  /// remains 4px.
+  @override
+  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
+    const EdgeInsets.symmetric(horizontal: 8.0),
+    const EdgeInsets.symmetric(horizontal: 4.0),
+    clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
+  )!;
+}
+''';
+}

packages/flutter/lib/src/material/chip.dart

@@ -184,8 +184,19 @@ abstract class ChipAttributes {
 
   /// Color of the chip's shadow when the elevation is greater than 0.
   ///
-  /// The default is [Colors.black].
+  /// The default is null.
   Color? get shadowColor;
+
+  /// Color of the chip's surface tint overlay when its elevation is
+  /// greater than 0.
+  ///
+  /// The default is null.
+  Color? get surfaceTintColor;
+
+  /// Theme used for all icons in the chip.
+  ///
+  /// The default is null.
+  IconThemeData? get iconTheme;
 }
 
 /// An interface for Material Design chips that can be deleted.
@@ -575,6 +586,8 @@ class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttri
     this.materialTapTargetSize,
     this.elevation,
     this.shadowColor,
+    this.surfaceTintColor,
+    this.iconTheme,
     @Deprecated(
       'Migrate to deleteButtonTooltipMessage. '
       'This feature was deprecated after v2.10.0-0.3.pre.'
@@ -624,6 +637,10 @@ class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttri
   @override
   final Color? shadowColor;
   @override
+  final Color? surfaceTintColor;
+  @override
+  final IconThemeData? iconTheme;
+  @override
   @Deprecated(
     'Migrate to deleteButtonTooltipMessage. '
     'This feature was deprecated after v2.10.0-0.3.pre.'
@@ -655,6 +672,7 @@ class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttri
       materialTapTargetSize: materialTapTargetSize,
       elevation: elevation,
       shadowColor: shadowColor,
+      surfaceTintColor: surfaceTintColor,
     );
   }
 }
@@ -708,6 +726,7 @@ class RawChip extends StatefulWidget
   /// [elevation].
   const RawChip({
     super.key,
+    this.defaultProperties,
     this.avatar,
     required this.label,
     this.labelStyle,
@@ -736,6 +755,8 @@ class RawChip extends StatefulWidget
     this.materialTapTargetSize,
     this.elevation,
     this.shadowColor,
+    this.surfaceTintColor,
+    this.iconTheme,
     this.selectedShadowColor,
     this.showCheckmark = true,
     this.checkmarkColor,
@@ -754,6 +775,13 @@ class RawChip extends StatefulWidget
        assert(elevation == null || elevation >= 0.0),
        deleteIcon = deleteIcon ?? _kDefaultDeleteIcon;
 
+  /// Defines the defaults for the chip properties if
+  /// they are not specified elsewhere.
+  ///
+  /// If null then [ChipThemeData.fromDefaults] will be used
+  /// for the default properties.
+  final ChipThemeData? defaultProperties;
+
   @override
   final Widget? avatar;
   @override
@@ -809,6 +837,10 @@ class RawChip extends StatefulWidget
   @override
   final Color? shadowColor;
   @override
+  final Color? surfaceTintColor;
+  @override
+  final IconThemeData? iconTheme;
+  @override
   final Color? selectedShadowColor;
   @override
   final bool? showCheckmark;
@@ -985,23 +1017,41 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
   /// Picks between three different colors, depending upon the state of two
   /// different animations.
   Color? _getBackgroundColor(ThemeData theme, ChipThemeData chipTheme, ChipThemeData chipDefaults) {
-    final ColorTween backgroundTween = ColorTween(
-      begin: widget.disabledColor
-        ?? chipTheme.disabledColor
-        ?? theme.disabledColor,
-      end: widget.backgroundColor
-        ?? chipTheme.backgroundColor
-        ?? theme.chipTheme.backgroundColor
-        ?? chipDefaults.backgroundColor,
-    );
-    final ColorTween selectTween = ColorTween(
-      begin: backgroundTween.evaluate(enableController),
-      end: widget.selectedColor
-        ?? chipTheme.selectedColor
-        ?? theme.chipTheme.selectedColor
-        ?? chipDefaults.selectedColor,
-    );
-    return selectTween.evaluate(selectionFade);
+    if (theme.useMaterial3) {
+      final ColorTween backgroundTween = ColorTween(
+        begin: widget.disabledColor
+          ?? chipTheme.disabledColor
+          ?? chipDefaults.disabledColor,
+        end: widget.backgroundColor
+          ?? chipTheme.backgroundColor
+          ?? chipDefaults.backgroundColor,
+      );
+      final ColorTween selectTween = ColorTween(
+        begin: backgroundTween.evaluate(enableController),
+        end: widget.selectedColor
+          ?? chipTheme.selectedColor
+          ?? chipDefaults.selectedColor,
+      );
+      return selectTween.evaluate(selectionFade);
+    } else {
+      final ColorTween backgroundTween = ColorTween(
+        begin: widget.disabledColor
+            ?? chipTheme.disabledColor
+            ?? theme.disabledColor,
+        end: widget.backgroundColor
+            ?? chipTheme.backgroundColor
+            ?? theme.chipTheme.backgroundColor
+            ?? chipDefaults.backgroundColor,
+      );
+      final ColorTween selectTween = ColorTween(
+        begin: backgroundTween.evaluate(enableController),
+        end: widget.selectedColor
+            ?? chipTheme.selectedColor
+            ?? theme.chipTheme.selectedColor
+            ?? chipDefaults.selectedColor,
+      );
+      return selectTween.evaluate(selectionFade);
+    }
   }
 
   @override
@@ -1114,7 +1164,7 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
     final ThemeData theme = Theme.of(context);
     final ChipThemeData chipTheme = ChipTheme.of(context);
     final Brightness brightness = chipTheme.brightness ?? theme.brightness;
-    final ChipThemeData chipDefaults = ChipThemeData.fromDefaults(
+    final ChipThemeData chipDefaults = widget.defaultProperties ?? ChipThemeData.fromDefaults(
       brightness: brightness,
       secondaryColor: brightness == Brightness.dark ? Colors.tealAccent[200]! : theme.primaryColor,
       labelStyle: theme.textTheme.bodyText1!,
@@ -1124,16 +1174,21 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
 
     final double elevation = widget.elevation
       ?? chipTheme.elevation
-      ?? chipDefaults.elevation!;
+      ?? chipDefaults.elevation
+      ?? 0;
     final double pressElevation = widget.pressElevation
       ?? chipTheme.pressElevation
-      ?? chipDefaults.pressElevation!;
-    final Color shadowColor = widget.shadowColor
+      ?? chipDefaults.pressElevation
+      ?? 0;
+    final Color? shadowColor = widget.shadowColor
       ?? chipTheme.shadowColor
-      ?? chipDefaults.shadowColor!;
-    final Color selectedShadowColor = widget.selectedShadowColor
+      ?? chipDefaults.shadowColor;
+    final Color? surfaceTintColor = widget.surfaceTintColor
+      ?? chipTheme.surfaceTintColor
+      ?? chipDefaults.surfaceTintColor;
+    final Color? selectedShadowColor = widget.selectedShadowColor
       ?? chipTheme.selectedShadowColor
-      ?? chipDefaults.selectedShadowColor!;
+      ?? chipDefaults.selectedShadowColor;
     final Color? checkmarkColor = widget.checkmarkColor
       ?? chipTheme.checkmarkColor
       ?? chipDefaults.checkmarkColor;
@@ -1150,14 +1205,21 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
       ?? chipTheme.labelPadding
       ?? chipDefaults.labelPadding
       ?? defaultLabelPadding;
+    final IconThemeData? iconTheme = widget.iconTheme
+      ?? chipTheme.iconTheme
+      ?? chipDefaults.iconTheme;
 
     final TextStyle effectiveLabelStyle = labelStyle.merge(widget.labelStyle);
     final Color? resolvedLabelColor = MaterialStateProperty.resolveAs<Color?>(effectiveLabelStyle.color, materialStates);
     final TextStyle resolvedLabelStyle = effectiveLabelStyle.copyWith(color: resolvedLabelColor);
+    final Widget? avatar = iconTheme != null && hasAvatar
+      ? IconTheme(data: iconTheme, child: widget.avatar!)
+      : widget.avatar;
 
     Widget result = Material(
       elevation: isTapping ? pressElevation : elevation,
       shadowColor: widget.selected ? selectedShadowColor : shadowColor,
+      surfaceTintColor: surfaceTintColor,
       animationDuration: pressedAnimationDuration,
       shape: resolvedShape,
       clipBehavior: widget.clipBehavior,
@@ -1198,7 +1260,7 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
                 avatar: AnimatedSwitcher(
                   duration: _kDrawerDuration,
                   switchInCurve: Curves.fastOutSlowIn,
-                  child: widget.avatar,
+                  child: avatar,
                 ),
                 deleteIcon: AnimatedSwitcher(
                   duration: _kDrawerDuration,
@@ -1226,6 +1288,7 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
         ),
       ),
     );
+
     final BoxConstraints constraints;
     final Offset densityAdjustment = (widget.visualDensity ?? theme.visualDensity).baseSizeAdjustment;
     switch (widget.materialTapTargetSize ?? theme.materialTapTargetSize) {
@@ -1247,6 +1310,9 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
         child: result,
       ),
     );
+    // if (height != null) {
+    //   result = SizedBox(height: height, child: result);
+    // }
     return Semantics(
       button: widget.tapEnabled,
       container: true,

packages/flutter/lib/src/material/chip_action.dart

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart' show clampDouble;
 import 'package:flutter/widgets.dart';
 
 import 'chip.dart';
+import 'chip_theme.dart';
 import 'debug.dart';
+import 'theme.dart';
 import 'theme_data.dart';
 
 /// A Material Design action chip.
@@ -43,6 +46,12 @@ import 'theme_data.dart';
 /// ```
 /// {@end-tool}
 ///
+/// ## Material Design 3
+///
+/// [ActionChip] can be used for both the Assist and Suggestion chips from
+/// Material Design 3. If [ThemeData.useMaterial3] is true, then [ActionChip]
+/// will be styled to match the Material Design 3 Assist and Suggestion chips.
+///
 /// See also:
 ///
 ///  * [Chip], a chip that displays information and can be deleted.
@@ -55,7 +64,7 @@ import 'theme_data.dart';
 ///  * [Wrap], A widget that displays its children in multiple horizontal or
 ///    vertical runs.
 ///  * <https://material.io/design/components/chips.html>
-class ActionChip extends StatelessWidget implements ChipAttributes, TappableChipAttributes {
+class ActionChip extends StatelessWidget implements ChipAttributes, TappableChipAttributes, DisabledChipAttributes {
   /// Create a chip that acts like a button.
   ///
   /// The [label], [onPressed], [autofocus], and [clipBehavior] arguments must
@@ -67,7 +76,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
     required this.label,
     this.labelStyle,
     this.labelPadding,
-    required this.onPressed,
+    this.onPressed,
     this.pressElevation,
     this.tooltip,
     this.side,
@@ -76,19 +85,17 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
     this.focusNode,
     this.autofocus = false,
     this.backgroundColor,
+    this.disabledColor,
     this.padding,
     this.visualDensity,
     this.materialTapTargetSize,
     this.elevation,
     this.shadowColor,
+    this.surfaceTintColor,
+    this.iconTheme,
   }) : assert(label != null),
        assert(clipBehavior != null),
        assert(autofocus != null),
-       assert(
-         onPressed != null,
-         'Rather than disabling an ActionChip by setting onPressed to null, '
-         'remove it from the interface entirely.',
-       ),
        assert(pressElevation == null || pressElevation >= 0.0),
        assert(elevation == null || elevation >= 0.0);
 
@@ -101,7 +108,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
   @override
   final EdgeInsetsGeometry? labelPadding;
   @override
-  final VoidCallback onPressed;
+  final VoidCallback? onPressed;
   @override
   final double? pressElevation;
   @override
@@ -119,6 +126,8 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
   @override
   final Color? backgroundColor;
   @override
+  final Color? disabledColor;
+  @override
   final EdgeInsetsGeometry? padding;
   @override
   final VisualDensity? visualDensity;
@@ -128,11 +137,22 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
   final double? elevation;
   @override
   final Color? shadowColor;
+  @override
+  final Color? surfaceTintColor;
+  @override
+  final IconThemeData? iconTheme;
+
+  @override
+  bool get isEnabled => onPressed != null;
 
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterial(context));
+    final ChipThemeData? defaults = Theme.of(context).useMaterial3
+      ? _TokenDefaultsM3(context, isEnabled)
+      : null;
     return RawChip(
+      defaultProperties: defaults,
       avatar: avatar,
       label: label,
       onPressed: onPressed,
@@ -145,12 +165,87 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
       clipBehavior: clipBehavior,
       focusNode: focusNode,
       autofocus: autofocus,
+      disabledColor: disabledColor,
       padding: padding,
       visualDensity: visualDensity,
+      isEnabled: isEnabled,
       labelPadding: labelPadding,
       materialTapTargetSize: materialTapTargetSize,
       elevation: elevation,
       shadowColor: shadowColor,
+      surfaceTintColor: surfaceTintColor,
     );
   }
 }
+
+// BEGIN GENERATED TOKEN PROPERTIES
+
+// Generated code to the end of this file. Do not edit by hand.
+// These defaults are generated from the Material Design Token
+// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
+
+// Generated version v0_101
+class _TokenDefaultsM3 extends ChipThemeData {
+  const _TokenDefaultsM3(this.context, this.isEnabled)
+    : super(
+        elevation: 0.0,
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0))),
+        showCheckmark: true,
+      );
+
+  final BuildContext context;
+  final bool isEnabled;
+
+  @override
+  TextStyle? get labelStyle => Theme.of(context).textTheme.labelLarge;
+
+  @override
+  Color? get backgroundColor => null;
+
+  @override
+  Color? get shadowColor => null;
+
+  @override
+  @override Color? get surfaceTintColor => Theme.of(context).colorScheme.surfaceTint;
+
+  @override
+  Color? get selectedColor => null;
+
+  @override
+  Color? get checkmarkColor => null;
+
+  @override
+  Color? get disabledColor => null;
+
+  @override
+  Color? get deleteIconColor => null;
+
+  @override
+  BorderSide? get side => isEnabled
+    ? BorderSide(color: Theme.of(context).colorScheme.outline)
+    : BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12));
+
+  @override
+  IconThemeData? get iconTheme => IconThemeData(
+    color: isEnabled
+      ? Theme.of(context).colorScheme.primary
+      : Theme.of(context).colorScheme.onSurface,
+    size: 18.0,
+  );
+
+  @override
+  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
+
+  /// The chip at text scale 1 starts with 8px on each side and as text scaling
+  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+  /// Once the widget has a text scaling of 2 or higher than the label padding
+  /// remains 4px.
+  @override
+  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
+    const EdgeInsets.symmetric(horizontal: 8.0),
+    const EdgeInsets.symmetric(horizontal: 4.0),
+    clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
+  )!;
+}
+
+// END GENERATED TOKEN PROPERTIES

packages/flutter/lib/src/material/chip_choice.dart

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart' show clampDouble;
 import 'package:flutter/widgets.dart';
 
 import 'chip.dart';
 import 'chip_theme.dart';
 import 'debug.dart';
+import 'theme.dart';
 import 'theme_data.dart';
 
 /// A Material Design choice chip.
@@ -53,6 +55,13 @@ import 'theme_data.dart';
 /// ```
 /// {@end-tool}
 ///
+/// ## Material Design 3
+///
+/// [ChoiceChip] can be used for single select Filter chips from
+/// Material Design 3. If [ThemeData.useMaterial3] is true, then [ChoiceChip]
+/// will be styled to match the Material Design 3 specification for Filter
+/// chips. Use [FilterChip] for multiple select Filter chips.
+///
 /// See also:
 ///
 ///  * [Chip], a chip that displays information and can be deleted.
@@ -98,6 +107,8 @@ class ChoiceChip extends StatelessWidget
     this.materialTapTargetSize,
     this.elevation,
     this.shadowColor,
+    this.surfaceTintColor,
+    this.iconTheme,
     this.selectedShadowColor,
     this.avatarBorder = const CircleBorder(),
   }) : assert(selected != null),
@@ -150,9 +161,13 @@ class ChoiceChip extends StatelessWidget
   @override
   final Color? shadowColor;
   @override
+  final Color? surfaceTintColor;
+  @override
   final Color? selectedShadowColor;
   @override
   final ShapeBorder avatarBorder;
+  @override
+  final IconThemeData? iconTheme;
 
   @override
   bool get isEnabled => onSelected != null;
@@ -161,7 +176,11 @@ class ChoiceChip extends StatelessWidget
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterial(context));
     final ChipThemeData chipTheme = ChipTheme.of(context);
+    final ChipThemeData? defaults = Theme.of(context).useMaterial3
+      ? _TokenDefaultsM3(context, isEnabled, selected)
+      : null;
     return RawChip(
+      defaultProperties: defaults,
       avatar: avatar,
       label: label,
       labelStyle: labelStyle ?? (selected ? chipTheme.secondaryLabelStyle : null),
@@ -169,7 +188,7 @@ class ChoiceChip extends StatelessWidget
       onSelected: onSelected,
       pressElevation: pressElevation,
       selected: selected,
-      showCheckmark: false,
+      showCheckmark: Theme.of(context).useMaterial3,
       tooltip: tooltip,
       side: side,
       shape: shape,
@@ -185,8 +204,88 @@ class ChoiceChip extends StatelessWidget
       materialTapTargetSize: materialTapTargetSize,
       elevation: elevation,
       shadowColor: shadowColor,
+      surfaceTintColor: surfaceTintColor,
       selectedShadowColor: selectedShadowColor,
       avatarBorder: avatarBorder,
     );
   }
 }
+
+// BEGIN GENERATED TOKEN PROPERTIES
+
+// Generated code to the end of this file. Do not edit by hand.
+// These defaults are generated from the Material Design Token
+// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
+
+// Generated version v0_101
+class _TokenDefaultsM3 extends ChipThemeData {
+  const _TokenDefaultsM3(this.context, this.isEnabled, this.isSelected)
+    : super(
+        elevation: 0.0,
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0))),
+        showCheckmark: true,
+      );
+
+  final BuildContext context;
+  final bool isEnabled;
+  final bool isSelected;
+
+  @override
+  TextStyle? get labelStyle => Theme.of(context).textTheme.labelLarge;
+
+  @override
+  Color? get backgroundColor => null;
+
+  @override
+  Color? get shadowColor => Theme.of(context).colorScheme.shadow;
+
+  @override
+  @override Color? get surfaceTintColor => Theme.of(context).colorScheme.surfaceTint;
+
+  @override
+  Color? get selectedColor => isEnabled
+    ? Theme.of(context).colorScheme.secondaryContainer
+    : Theme.of(context).colorScheme.onSurface.withOpacity(0.12);
+
+  @override
+  Color? get checkmarkColor => Theme.of(context).colorScheme.onSecondaryContainer;
+
+  @override
+  Color? get disabledColor => isSelected
+   ? Theme.of(context).colorScheme.onSurface.withOpacity(0.12)
+   : null;
+
+  @override
+  Color? get deleteIconColor => Theme.of(context).colorScheme.onSecondaryContainer;
+
+  @override
+  BorderSide? get side => !isSelected
+    ? isEnabled
+      ? BorderSide(color: Theme.of(context).colorScheme.outline)
+      : BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12))
+    : null;
+
+  @override
+  IconThemeData? get iconTheme => IconThemeData(
+    color: isEnabled
+      ? null
+      : Theme.of(context).colorScheme.onSurface,
+    size: 18.0,
+  );
+
+  @override
+  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
+
+  /// The chip at text scale 1 starts with 8px on each side and as text scaling
+  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+  /// Once the widget has a text scaling of 2 or higher than the label padding
+  /// remains 4px.
+  @override
+  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
+    const EdgeInsets.symmetric(horizontal: 8.0),
+    const EdgeInsets.symmetric(horizontal: 4.0),
+    clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
+  )!;
+}
+
+// END GENERATED TOKEN PROPERTIES

packages/flutter/lib/src/material/chip_filter.dart

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart' show clampDouble;
 import 'package:flutter/widgets.dart';
 
 import 'chip.dart';
+import 'chip_theme.dart';
 import 'debug.dart';
+import 'theme.dart';
 import 'theme_data.dart';
 
 /// A Material Design filter chip.
@@ -83,6 +86,13 @@ import 'theme_data.dart';
 /// ```
 /// {@end-tool}
 ///
+/// ## Material Design 3
+///
+/// [FilterChip] can be used for multiple select Filter chip from
+/// Material Design 3. If [ThemeData.useMaterial3] is true, then [FilterChip]
+/// will be styled to match the Material Design 3 specification for Filter
+/// chips. Use [ChoiceChip] for single select Filter chips.
+///
 /// See also:
 ///
 ///  * [Chip], a chip that displays information and can be deleted.
@@ -130,6 +140,8 @@ class FilterChip extends StatelessWidget
     this.materialTapTargetSize,
     this.elevation,
     this.shadowColor,
+    this.surfaceTintColor,
+    this.iconTheme,
     this.selectedShadowColor,
     this.showCheckmark,
     this.checkmarkColor,
@@ -184,6 +196,8 @@ class FilterChip extends StatelessWidget
   @override
   final Color? shadowColor;
   @override
+  final Color? surfaceTintColor;
+  @override
   final Color? selectedShadowColor;
   @override
   final bool? showCheckmark;
@@ -191,6 +205,8 @@ class FilterChip extends StatelessWidget
   final Color? checkmarkColor;
   @override
   final ShapeBorder avatarBorder;
+  @override
+  final IconThemeData? iconTheme;
 
   @override
   bool get isEnabled => onSelected != null;
@@ -198,7 +214,11 @@ class FilterChip extends StatelessWidget
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterial(context));
+    final ChipThemeData? defaults = Theme.of(context).useMaterial3
+      ? _TokenDefaultsM3(context, isEnabled, selected)
+      : null;
     return RawChip(
+      defaultProperties: defaults,
       avatar: avatar,
       label: label,
       labelStyle: labelStyle,
@@ -221,6 +241,7 @@ class FilterChip extends StatelessWidget
       materialTapTargetSize: materialTapTargetSize,
       elevation: elevation,
       shadowColor: shadowColor,
+      surfaceTintColor: surfaceTintColor,
       selectedShadowColor: selectedShadowColor,
       showCheckmark: showCheckmark,
       checkmarkColor: checkmarkColor,
@@ -228,3 +249,82 @@ class FilterChip extends StatelessWidget
     );
   }
 }
+
+// BEGIN GENERATED TOKEN PROPERTIES
+
+// Generated code to the end of this file. Do not edit by hand.
+// These defaults are generated from the Material Design Token
+// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
+
+// Generated version v0_101
+class _TokenDefaultsM3 extends ChipThemeData {
+  const _TokenDefaultsM3(this.context, this.isEnabled, this.isSelected)
+    : super(
+        elevation: 0.0,
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0))),
+        showCheckmark: true,
+      );
+
+  final BuildContext context;
+  final bool isEnabled;
+  final bool isSelected;
+
+  @override
+  TextStyle? get labelStyle => Theme.of(context).textTheme.labelLarge;
+
+  @override
+  Color? get backgroundColor => null;
+
+  @override
+  Color? get shadowColor => Theme.of(context).colorScheme.shadow;
+
+  @override
+  @override Color? get surfaceTintColor => Theme.of(context).colorScheme.surfaceTint;
+
+  @override
+  Color? get selectedColor => isEnabled
+    ? Theme.of(context).colorScheme.secondaryContainer
+    : Theme.of(context).colorScheme.onSurface.withOpacity(0.12);
+
+  @override
+  Color? get checkmarkColor => Theme.of(context).colorScheme.onSecondaryContainer;
+
+  @override
+  Color? get disabledColor => isSelected
+   ? Theme.of(context).colorScheme.onSurface.withOpacity(0.12)
+   : null;
+
+  @override
+  Color? get deleteIconColor => Theme.of(context).colorScheme.onSecondaryContainer;
+
+  @override
+  BorderSide? get side => !isSelected
+    ? isEnabled
+      ? BorderSide(color: Theme.of(context).colorScheme.outline)
+      : BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12))
+    : null;
+
+  @override
+  IconThemeData? get iconTheme => IconThemeData(
+    color: isEnabled
+      ? null
+      : Theme.of(context).colorScheme.onSurface,
+    size: 18.0,
+  );
+
+  @override
+  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
+
+  /// The chip at text scale 1 starts with 8px on each side and as text scaling
+  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+  /// Once the widget has a text scaling of 2 or higher than the label padding
+  /// remains 4px.
+  @override
+  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
+    const EdgeInsets.symmetric(horizontal: 8.0),
+    const EdgeInsets.symmetric(horizontal: 4.0),
+    clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
+  )!;
+}
+
+// END GENERATED TOKEN PROPERTIES

packages/flutter/lib/src/material/chip_input.dart

@@ -2,10 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:flutter/foundation.dart' show clampDouble;
 import 'package:flutter/widgets.dart';
 
 import 'chip.dart';
+import 'chip_theme.dart';
 import 'debug.dart';
+import 'icons.dart';
+import 'theme.dart';
 import 'theme_data.dart';
 
 /// A Material Design input chip.
@@ -42,6 +46,13 @@ import 'theme_data.dart';
 /// ```
 /// {@end-tool}
 ///
+/// ## Material Design 3
+///
+/// [InputChip] can be used for Input chips from Material Design 3.
+/// If [ThemeData.useMaterial3] is true, then [InputChip]
+/// will be styled to match the Material Design 3 specification for Input
+/// chips.
+///
 /// See also:
 ///
 ///  * [Chip], a chip that displays information and can be deleted.
@@ -99,6 +110,8 @@ class InputChip extends StatelessWidget
     this.materialTapTargetSize,
     this.elevation,
     this.shadowColor,
+    this.surfaceTintColor,
+    this.iconTheme,
     this.selectedShadowColor,
     this.showCheckmark,
     this.checkmarkColor,
@@ -171,6 +184,8 @@ class InputChip extends StatelessWidget
   @override
   final Color? shadowColor;
   @override
+  final Color? surfaceTintColor;
+  @override
   final Color? selectedShadowColor;
   @override
   final bool? showCheckmark;
@@ -179,6 +194,8 @@ class InputChip extends StatelessWidget
   @override
   final ShapeBorder avatarBorder;
   @override
+  final IconThemeData? iconTheme;
+  @override
   @Deprecated(
     'Migrate to deleteButtonTooltipMessage. '
     'This feature was deprecated after v2.10.0-0.3.pre.'
@@ -188,12 +205,18 @@ class InputChip extends StatelessWidget
   @override
   Widget build(BuildContext context) {
     assert(debugCheckHasMaterial(context));
+    final ChipThemeData? defaults = Theme.of(context).useMaterial3
+      ? _TokenDefaultsM3(context, isEnabled)
+      : null;
+    final Widget? resolvedDeleteIcon = deleteIcon
+      ?? (Theme.of(context).useMaterial3 ? const Icon(Icons.clear, size: 18) : null);
     return RawChip(
+      defaultProperties: defaults,
       avatar: avatar,
       label: label,
       labelStyle: labelStyle,
       labelPadding: labelPadding,
-      deleteIcon: deleteIcon,
+      deleteIcon: resolvedDeleteIcon,
       onDeleted: onDeleted,
       deleteIconColor: deleteIconColor,
       useDeleteButtonTooltip: useDeleteButtonTooltip,
@@ -216,6 +239,7 @@ class InputChip extends StatelessWidget
       materialTapTargetSize: materialTapTargetSize,
       elevation: elevation,
       shadowColor: shadowColor,
+      surfaceTintColor: surfaceTintColor,
       selectedShadowColor: selectedShadowColor,
       showCheckmark: showCheckmark,
       checkmarkColor: checkmarkColor,
@@ -224,3 +248,75 @@ class InputChip extends StatelessWidget
     );
   }
 }
+
+// BEGIN GENERATED TOKEN PROPERTIES
+
+// Generated code to the end of this file. Do not edit by hand.
+// These defaults are generated from the Material Design Token
+// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
+
+// Generated version v0_101
+class _TokenDefaultsM3 extends ChipThemeData {
+  const _TokenDefaultsM3(this.context, this.isEnabled)
+    : super(
+        elevation: 0.0,
+        shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0))),
+        showCheckmark: true,
+      );
+
+  final BuildContext context;
+  final bool isEnabled;
+
+  @override
+  TextStyle? get labelStyle => Theme.of(context).textTheme.labelLarge;
+
+  @override
+  Color? get backgroundColor => null;
+
+  @override
+  Color? get shadowColor => null;
+
+  @override
+  @override Color? get surfaceTintColor => null;
+
+  @override
+  Color? get selectedColor => Theme.of(context).colorScheme.secondaryContainer;
+
+  @override
+  Color? get checkmarkColor => null;
+
+  @override
+  Color? get disabledColor => null;
+
+  @override
+  Color? get deleteIconColor => Theme.of(context).colorScheme.onSecondaryContainer;
+
+  @override
+  BorderSide? get side => isEnabled
+    ? BorderSide(color: Theme.of(context).colorScheme.outline)
+    : BorderSide(color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12));
+
+  @override
+  IconThemeData? get iconTheme => IconThemeData(
+    color: isEnabled
+      ? null
+      : Theme.of(context).colorScheme.onSurface,
+    size: 18.0,
+  );
+
+  @override
+  EdgeInsetsGeometry? get padding => const EdgeInsets.all(8.0);
+
+  /// The chip at text scale 1 starts with 8px on each side and as text scaling
+  /// gets closer to 2 the label padding is linearly interpolated from 8px to 4px.
+  /// Once the widget has a text scaling of 2 or higher than the label padding
+  /// remains 4px.
+  @override
+  EdgeInsetsGeometry? get labelPadding => EdgeInsets.lerp(
+    const EdgeInsets.symmetric(horizontal: 8.0),
+    const EdgeInsets.symmetric(horizontal: 4.0),
+    clampDouble(MediaQuery.of(context).textScaleFactor - 1.0, 0.0, 1.0),
+  )!;
+}
+
+// END GENERATED TOKEN PROPERTIES

packages/flutter/lib/src/material/chip_theme.dart

@@ -184,6 +184,7 @@ class ChipThemeData with Diagnosticable {
     this.selectedColor,
     this.secondarySelectedColor,
     this.shadowColor,
+    this.surfaceTintColor,
     this.selectedShadowColor,
     this.showCheckmark,
     this.checkmarkColor,
@@ -196,6 +197,7 @@ class ChipThemeData with Diagnosticable {
     this.brightness,
     this.elevation,
     this.pressElevation,
+    this.iconTheme,
   });
 
   /// Generates a ChipThemeData from a brightness, a primary color, and a text
@@ -307,6 +309,14 @@ class ChipThemeData with Diagnosticable {
   /// [FilterChip], [InputChip], [RawChip].
   final Color? shadowColor;
 
+  /// Overrides the default for [ChipAttributes.surfaceTintColor], the
+  /// Color of the chip's surface tint overlay when its elevation is
+  /// greater than 0.
+  ///
+  /// This property applies to [ActionChip], [Chip], [ChoiceChip],
+  /// [FilterChip], [InputChip], [RawChip].
+  final Color? surfaceTintColor;
+
   /// Overrides the default for
   /// [SelectableChipAttributes.selectedShadowColor], the Color of the
   /// chip's shadow when its elevation is greater than 0 and the chip
@@ -415,6 +425,13 @@ class ChipThemeData with Diagnosticable {
   /// This property applies to [ActionChip], [InputChip], [RawChip].
   final double? pressElevation;
 
+  /// Overrides the default for [ChipAttributes.iconTheme],
+  /// the theme used for all icons in the chip.
+  ///
+  /// This property applies to [ActionChip], [Chip], [ChoiceChip],
+  /// [FilterChip], [InputChip], [RawChip].
+  final IconThemeData? iconTheme;
+
   /// Creates a copy of this object but with the given fields replaced with the
   /// new values.
   ChipThemeData copyWith({
@@ -424,6 +441,7 @@ class ChipThemeData with Diagnosticable {
     Color? selectedColor,
     Color? secondarySelectedColor,
     Color? shadowColor,
+    Color? surfaceTintColor,
     Color? selectedShadowColor,
     bool? showCheckmark,
     Color? checkmarkColor,
@@ -436,6 +454,7 @@ class ChipThemeData with Diagnosticable {
     Brightness? brightness,
     double? elevation,
     double? pressElevation,
+    IconThemeData? iconTheme,
   }) {
     return ChipThemeData(
       backgroundColor: backgroundColor ?? this.backgroundColor,
@@ -444,6 +463,7 @@ class ChipThemeData with Diagnosticable {
       selectedColor: selectedColor ?? this.selectedColor,
       secondarySelectedColor: secondarySelectedColor ?? this.secondarySelectedColor,
       shadowColor: shadowColor ?? this.shadowColor,
+      surfaceTintColor: surfaceTintColor ?? this.surfaceTintColor,
       selectedShadowColor: selectedShadowColor ?? this.selectedShadowColor,
       showCheckmark: showCheckmark ?? this.showCheckmark,
       checkmarkColor: checkmarkColor ?? this.checkmarkColor,
@@ -456,6 +476,7 @@ class ChipThemeData with Diagnosticable {
       brightness: brightness ?? this.brightness,
       elevation: elevation ?? this.elevation,
       pressElevation: pressElevation ?? this.pressElevation,
+      iconTheme: iconTheme ?? this.iconTheme,
     );
   }
 
@@ -476,6 +497,7 @@ class ChipThemeData with Diagnosticable {
       selectedColor: Color.lerp(a?.selectedColor, b?.selectedColor, t),
       secondarySelectedColor: Color.lerp(a?.secondarySelectedColor, b?.secondarySelectedColor, t),
       shadowColor: Color.lerp(a?.shadowColor, b?.shadowColor, t),
+      surfaceTintColor: Color.lerp(a?.surfaceTintColor, b?.surfaceTintColor, t),
       selectedShadowColor: Color.lerp(a?.selectedShadowColor, b?.selectedShadowColor, t),
       showCheckmark: t < 0.5 ? a?.showCheckmark ?? true : b?.showCheckmark ?? true,
       checkmarkColor: Color.lerp(a?.checkmarkColor, b?.checkmarkColor, t),
@@ -488,6 +510,7 @@ class ChipThemeData with Diagnosticable {
       brightness: t < 0.5 ? a?.brightness ?? Brightness.light : b?.brightness ?? Brightness.light,
       elevation: lerpDouble(a?.elevation, b?.elevation, t),
       pressElevation: lerpDouble(a?.pressElevation, b?.pressElevation, t),
+      iconTheme: IconThemeData.lerp(a?.iconTheme, b?.iconTheme, t),
     );
   }
 
@@ -514,13 +537,14 @@ class ChipThemeData with Diagnosticable {
   }
 
   @override
-  int get hashCode => Object.hash(
+  int get hashCode => Object.hashAll(<Object?>[
     backgroundColor,
     deleteIconColor,
     disabledColor,
     selectedColor,
     secondarySelectedColor,
     shadowColor,
+    surfaceTintColor,
     selectedShadowColor,
     showCheckmark,
     checkmarkColor,
@@ -533,7 +557,8 @@ class ChipThemeData with Diagnosticable {
     brightness,
     elevation,
     pressElevation,
-  );
+    iconTheme,
+  ]);
 
   @override
   bool operator ==(Object other) {
@@ -550,6 +575,7 @@ class ChipThemeData with Diagnosticable {
         && other.selectedColor == selectedColor
         && other.secondarySelectedColor == secondarySelectedColor
         && other.shadowColor == shadowColor
+        && other.surfaceTintColor == surfaceTintColor
         && other.selectedShadowColor == selectedShadowColor
         && other.showCheckmark == showCheckmark
         && other.checkmarkColor == checkmarkColor
@@ -561,7 +587,8 @@ class ChipThemeData with Diagnosticable {
         && other.secondaryLabelStyle == secondaryLabelStyle
         && other.brightness == brightness
         && other.elevation == elevation
-        && other.pressElevation == pressElevation;
+        && other.pressElevation == pressElevation
+        && other.iconTheme == iconTheme;
   }
 
   @override
@@ -573,6 +600,7 @@ class ChipThemeData with Diagnosticable {
     properties.add(ColorProperty('selectedColor', selectedColor, defaultValue: null));
     properties.add(ColorProperty('secondarySelectedColor', secondarySelectedColor, defaultValue: null));
     properties.add(ColorProperty('shadowColor', shadowColor, defaultValue: null));
+    properties.add(ColorProperty('surfaceTintColor', surfaceTintColor, defaultValue: null));
     properties.add(ColorProperty('selectedShadowColor', selectedShadowColor, defaultValue: null));
     properties.add(DiagnosticsProperty<bool>('showCheckmark', showCheckmark, defaultValue: null));
     properties.add(ColorProperty('checkMarkColor', checkmarkColor, defaultValue: null));
@@ -585,5 +613,6 @@ class ChipThemeData with Diagnosticable {
     properties.add(EnumProperty<Brightness>('brightness', brightness, defaultValue: null));
     properties.add(DoubleProperty('elevation', elevation, defaultValue: null));
     properties.add(DoubleProperty('pressElevation', pressElevation, defaultValue: null));
+    properties.add(DiagnosticsProperty<IconThemeData>('iconTheme', iconTheme, defaultValue: null));
   }
 }

packages/flutter/lib/src/material/theme_data.dart

@@ -1183,6 +1183,10 @@ class ThemeData with Diagnosticable {
   ///   * FAB: [FloatingActionButton]
   ///   * Extended FAB: [FloatingActionButton.extended]
   ///   * Cards: [Card]
+  ///   * Chips:
+  ///     - [ActionChip] (used for Assist and Suggestion chips),
+  ///     - [FilterChip], [ChoiceChip] (used for single selection filter chips),
+  ///     - [InputChip]
   ///   * Dialogs: [Dialog], [AlertDialog]
   ///   * Lists: [ListTile]
   ///   * Navigation bar: [NavigationBar] (new, replacing [BottomNavigationBar])

packages/flutter/test/material/chip_theme_test.dart

@@ -50,6 +50,7 @@ void main() {
     expect(themeData.selectedColor, null);
     expect(themeData.secondarySelectedColor, null);
     expect(themeData.shadowColor, null);
+    expect(themeData.surfaceTintColor, null);
     expect(themeData.selectedShadowColor, null);
     expect(themeData.showCheckmark, null);
     expect(themeData.checkmarkColor, null);
@@ -85,6 +86,7 @@ void main() {
       selectedColor: Color(0xfffffff3),
       secondarySelectedColor: Color(0xfffffff4),
       shadowColor: Color(0xfffffff5),
+      surfaceTintColor: Color(0xfffffff8),
       selectedShadowColor: Color(0xfffffff6),
       showCheckmark: true,
       checkmarkColor: Color(0xfffffff7),
@@ -111,6 +113,7 @@ void main() {
       'selectedColor: Color(0xfffffff3)',
       'secondarySelectedColor: Color(0xfffffff4)',
       'shadowColor: Color(0xfffffff5)',
+      'surfaceTintColor: Color(0xfffffff8)',
       'selectedShadowColor: Color(0xfffffff6)',
       'showCheckmark: true',
       'checkMarkColor: Color(0xfffffff7)',
@@ -281,6 +284,7 @@ void main() {
     expect(chipTheme.selectedColor, Colors.black.withAlpha(0x3d));
     expect(chipTheme.secondarySelectedColor, Colors.red.withAlpha(0x3d));
     expect(chipTheme.shadowColor, Colors.black);
+    expect(chipTheme.surfaceTintColor, null);
     expect(chipTheme.selectedShadowColor, Colors.black);
     expect(chipTheme.showCheckmark, true);
     expect(chipTheme.checkmarkColor, null);
@@ -395,6 +399,7 @@ void main() {
       side: const BorderSide(),
       pressElevation: 4.0,
       shadowColor: Colors.black,
+      surfaceTintColor: Colors.black,
       selectedShadowColor: Colors.black,
       showCheckmark: false,
       checkmarkColor: Colors.black,
@@ -411,6 +416,7 @@ void main() {
       elevation: 5.0,
       pressElevation: 10.0,
       shadowColor: Colors.white,
+      surfaceTintColor: Colors.white,
       selectedShadowColor: Colors.white,
       showCheckmark: true,
       checkmarkColor: Colors.white,
@@ -424,6 +430,7 @@ void main() {
     expect(lerp.selectedColor, equals(middleGrey.withAlpha(0x3d)));
     expect(lerp.secondarySelectedColor, equals(middleGrey.withAlpha(0x3d)));
     expect(lerp.shadowColor, equals(middleGrey));
+    expect(lerp.surfaceTintColor, equals(middleGrey));
     expect(lerp.selectedShadowColor, equals(middleGrey));
     expect(lerp.showCheckmark, equals(true));
     expect(lerp.labelPadding, equals(const EdgeInsets.all(4.0)));
@@ -446,6 +453,7 @@ void main() {
     expect(lerpANull25.selectedColor, equals(Colors.black.withAlpha(0x0f)));
     expect(lerpANull25.secondarySelectedColor, equals(Colors.white.withAlpha(0x0f)));
     expect(lerpANull25.shadowColor, equals(Colors.white.withAlpha(0x40)));
+    expect(lerpANull25.surfaceTintColor, equals(Colors.white.withAlpha(0x40)));
     expect(lerpANull25.selectedShadowColor, equals(Colors.white.withAlpha(0x40)));
     expect(lerpANull25.showCheckmark, equals(true));
     expect(lerpANull25.labelPadding, equals(const EdgeInsets.only(top: 2.0, bottom: 2.0)));
@@ -466,6 +474,7 @@ void main() {
     expect(lerpANull75.selectedColor, equals(Colors.black.withAlpha(0x2e)));
     expect(lerpANull75.secondarySelectedColor, equals(Colors.white.withAlpha(0x2e)));
     expect(lerpANull75.shadowColor, equals(Colors.white.withAlpha(0xbf)));
+    expect(lerpANull75.surfaceTintColor, equals(Colors.white.withAlpha(0xbf)));
     expect(lerpANull75.selectedShadowColor, equals(Colors.white.withAlpha(0xbf)));
     expect(lerpANull75.showCheckmark, equals(true));
     expect(lerpANull75.labelPadding, equals(const EdgeInsets.only(top: 6.0, bottom: 6.0)));
@@ -486,6 +495,7 @@ void main() {
     expect(lerpBNull25.selectedColor, equals(Colors.white.withAlpha(0x2e)));
     expect(lerpBNull25.secondarySelectedColor, equals(Colors.black.withAlpha(0x2e)));
     expect(lerpBNull25.shadowColor, equals(Colors.black.withAlpha(0xbf)));
+    expect(lerpBNull25.surfaceTintColor, equals(Colors.black.withAlpha(0xbf)));
     expect(lerpBNull25.selectedShadowColor, equals(Colors.black.withAlpha(0xbf)));
     expect(lerpBNull25.showCheckmark, equals(false));
     expect(lerpBNull25.labelPadding, equals(const EdgeInsets.only(left: 6.0, right: 6.0)));
@@ -506,6 +516,7 @@ void main() {
     expect(lerpBNull75.selectedColor, equals(Colors.white.withAlpha(0x0f)));
     expect(lerpBNull75.secondarySelectedColor, equals(Colors.black.withAlpha(0x0f)));
     expect(lerpBNull75.shadowColor, equals(Colors.black.withAlpha(0x40)));
+    expect(lerpBNull75.surfaceTintColor, equals(Colors.black.withAlpha(0x40)));
     expect(lerpBNull75.selectedShadowColor, equals(Colors.black.withAlpha(0x40)));
     expect(lerpBNull75.showCheckmark, equals(true));
     expect(lerpBNull75.labelPadding, equals(const EdgeInsets.only(left: 2.0, right: 2.0)));