chipTheme static method

ChipThemeData chipTheme({ required ColorScheme colorScheme, SchemeColor? baseSchemeColor, required TextStyle labelStyle, double? radius, })

An opinionated ChipThemeData with custom border radius and rather involved theme.

The border radius default to 16 kDefaultRadius, new M3 default. https://m3.material.io/components/floating-action-button/specs

This is inspired by M3 Chip design and applies it to the limited theming features for old M2 chips, to some extent. Tricky to get this one to play nicely, but this setup is pretty ok and fits well with the color blended themes.

Implementation

static ChipThemeData chipTheme({
  /// Typically the same [ColorScheme] that is also use for your [ThemeData].
  required final ColorScheme colorScheme,

  /// Select which color from the passed in [ColorScheme] to use as the
  /// chip themes main color.
  ///
  /// All colors in the color scheme are not good choices, but some work well.
  ///
  /// If not defined, [colorScheme.primary] will be used.
  final SchemeColor? baseSchemeColor,

  /// The style to be applied to the chip's label.
  ///
  /// This only has an effect on label widgets that respect the
  /// [DefaultTextStyle], such as [Text].
  required TextStyle labelStyle,

  /// Corner radius of the Chip.
  ///
  /// Defaults to [kChipRadius] = 8, M3 defaults for Chips.
  final double? radius,
}) {
  // Get base color, defaults to primary.
  final Color _baseColor = baseSchemeColor == null
      ? colorScheme.primary
      : schemeColor(baseSchemeColor, colorScheme);

  // For all Chips  except disabled Chip.
  final Color foreground =
      _baseColor.blendAlpha(colorScheme.onSurface, kChipForegroundAlphaBlend);
  // For selected InputChip & ChoiceChip.
  final Color selectedBackgroundColor = _baseColor.blendAlpha(
      colorScheme.surface, kChipSelectedBackgroundAlphaBlend);
  // Text color, uses the foreground color for all chip style.
  final TextStyle effectiveLabelStyle =
      labelStyle.copyWith(color: foreground);

  return ChipThemeData(
    brightness: ThemeData.estimateBrightnessForColor(colorScheme.primary),
    padding: const EdgeInsets.all(4),
    // For all Chip types, except disabled, InputChip & ChoiceChip.
    backgroundColor:
        _baseColor.blendAlpha(colorScheme.surface, kChipBackgroundAlphaBlend),
    selectedColor: selectedBackgroundColor, // Selected InputChip
    secondarySelectedColor: selectedBackgroundColor, // Selected ChoiceChip
    checkmarkColor: foreground,
    deleteIconColor: _baseColor,
    // Same formula as on Elevated button and ToggleButtons. The Chip has
    // a built in scrim for disabled state, making it look a bit different
    // but it is pretty close.
    disabledColor: _baseColor
        .blendAlpha(colorScheme.onSurface, kDisabledAlphaBlend)
        .withAlpha(kDisabledBackgroundAlpha),
    // Same label style on selected and not selected chips, their different
    // background style make the stand out enough.
    labelStyle: effectiveLabelStyle,
    secondaryLabelStyle: effectiveLabelStyle,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(radius ?? kChipRadius),
      ),
    ),
  );
}