chipTheme static method
ChipThemeData
chipTheme({
- required ColorScheme colorScheme,
- SchemeColor? selectedSchemeColor,
- SchemeColor? baseSchemeColor,
- SchemeColor? deleteIconSchemeColor,
- required TextStyle labelStyle,
- TextStyle? secondaryLabelStyle,
- double? radius,
- Color? surfaceTintColor,
- bool? useTintedDisable,
- bool? useMaterial3,
An opinionated ChipThemeData theme with custom border radius and a custom theme that partially mimics the M3 style in M2 and works well with FlexColorScheme surface blends.
The border radius defaults to 8dp kChipRadius
, new M3 default.
https://m3.material.io/components/chips/specs
Implementation
static ChipThemeData chipTheme({
/// Typically the same [ColorScheme] that is also use for your [ThemeData].
required final ColorScheme colorScheme,
/// Defines which [Theme] based [ColorScheme] based color the selected Chips
/// use as their selected state color.
///
/// The color scheme contrast pair color is used for text and icons, on the
/// [selectedSchemeColor]
///
/// If not defined and [useMaterial3] is true, defaults to
/// [SchemeColor.secondaryContainer].
final SchemeColor? selectedSchemeColor,
/// Defines which [Theme] based [ColorScheme] based color the Chips
/// use as their color tint base color.
///
/// The selected color is only used as base for the [Chip] colors, it also
/// uses alpha blend and opacity to create the effective Chip colors using
/// the selected scheme color as base.
///
/// If not defined it defaults to effective theme based color from using
/// [SchemeColor.primary], when [useMaterial3] is false.
///
/// If [useMaterial3] is true, using a null [chipSchemeColor] will
/// result in M3 default Chip coloring being used without opacity and alpha
/// blends. To get the same coloring for M3 as when [useMaterial3] is false,
/// pass in [SchemeColor.primary].
final SchemeColor? baseSchemeColor,
/// Defines which [Theme] based [ColorScheme] based color the Chips
/// use as color of the delete icon.
///
/// The selected color is only used as base for the [Chip] colors, it also
/// uses alpha blend and opacity to create the effective Chip colors using
/// the selected scheme color as base.
///
/// If not defined it defaults to effective theme based color from using
/// [SchemeColor.onSurface].
final SchemeColor? deleteIconSchemeColor,
/// Overrides the default for [ChipAttributes.labelStyle],
/// the style of the [DefaultTextStyle] that contains the
/// chip's label.
///
/// This only has an effect on label widgets that respect the
/// [DefaultTextStyle], such as [Text].
///
/// This property applies to [ActionChip], [Chip],
/// [FilterChip], [InputChip], [RawChip].
required final TextStyle labelStyle,
/// Overrides the default for [ChoiceChip.labelStyle],
/// the style of the [DefaultTextStyle] that contains the
/// chip's label.
///
/// This only has an effect on label widgets that respect the
/// [DefaultTextStyle], such as [Text].
final TextStyle? secondaryLabelStyle,
/// Corner radius of the Chip.
///
/// If not defined, defaults to [kChipRadius] 8dp,
/// based on M3 Specification
/// https://m3.material.io/components/chips/specs
final double? radius,
/// 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,
/// Defines if the theme uses tinted disabled color.
///
/// If undefined, defaults to false.
final bool? useTintedDisable,
/// A temporary flag used to opt-in to Material 3 features.
///
/// If set to true, the theme will use Material3 default styles when
/// properties are undefined, if false defaults will use FlexColorScheme's
/// own opinionated default values.
///
/// The M2/M3 defaults will only be used for properties that are not
/// defined, if defined they keep their defined values.
///
/// If undefined, defaults to false.
final bool? useMaterial3,
}) {
// Used to toggle between different defaults from M2 and M3.
final bool useM3 = useMaterial3 ?? false;
final bool tintDisable = useTintedDisable ?? false;
// Function used to increase icon color for selections resulting in poor
// icon color.
Color fixContrast(Color color) {
if (colorScheme.brightness == Brightness.light) {
if (ThemeData.estimateBrightnessForColor(color) == Brightness.light) {
return color.darken(25);
} else {
return color;
}
} else {
if (ThemeData.estimateBrightnessForColor(color) == Brightness.dark) {
return color.lighten(25);
} else {
return color;
}
}
}
// TODO(rydmike): Monitor Chip issue #115364
// https://github.com/flutter/flutter/issues/115364
//
// Flag for not using any defined color values in M3 mode, but instead
// falling back to M3 theme defaults, when using Material 3.
// We do this when no Scheme colors are selected to get the exact M3
// theme default. It is not possible due to SDK Chip theming issues
// and limitations to recreate the exact M3 Chip themes with any other
// theme colors than the default built-in ones.
final bool useM3Defaults =
useM3 && baseSchemeColor == null && selectedSchemeColor == null;
// Get blend color, defaults to surface for M3 and to primary for M2.
final SchemeColor fallbackBlend =
useM3 ? SchemeColor.surface : SchemeColor.primary;
final Color blendColor =
schemeColor(baseSchemeColor ?? fallbackBlend, colorScheme);
// Selected color
final SchemeColor fallbackSelected =
useM3 ? SchemeColor.secondaryContainer : SchemeColor.surface;
final Color selectedColor = useM3 || selectedSchemeColor != null
? schemeColor(selectedSchemeColor ?? fallbackSelected, colorScheme)
: blendColor.blendAlpha(
colorScheme.surface, kChipSelectedBackgroundAlphaBlend);
// The onSelected onColor
final Color onSelectedColor =
schemeColorPair(selectedSchemeColor ?? fallbackSelected, colorScheme);
// The onSelected onColor
final Color deleteIconColor = schemeColor(
deleteIconSchemeColor ?? SchemeColor.onSurface, colorScheme);
// Using these tinted overlay variable in all themes for ease of
// reasoning and duplication.
final Color tint = selectedColor;
// Icon color.
final Color iconColor;
if (blendColor == colorScheme.surface ||
blendColor == colorScheme.background) {
iconColor = selectedColor;
} else {
iconColor = blendColor;
}
// Text color, uses the foreground color for all chip styles.
final TextStyle effectiveLabelStyle =
labelStyle.copyWith(color: colorScheme.onSurface);
// Text color, uses the foreground color for all chip styles.
final TextStyle effectiveSelectedLabelStyle =
labelStyle.copyWith(color: onSelectedColor);
return ChipThemeData(
// Applies to [ActionChip], [Chip], [ChoiceChip], [FilterChip],
// [InputChip], [RawChip], but NOT to ANY selected or disabled Chip.
backgroundColor: useM3Defaults
? null
: blendColor.blendAlpha(
colorScheme.surface, kChipBackgroundAlphaBlend),
// Applies to [Chip], [InputChip], [RawChip].
deleteIconColor: useM3Defaults && deleteIconSchemeColor == null
? null
: deleteIconColor,
// Applies to [ChoiceChip], [FilterChip], [InputChip], [RawChip].
// Same formula as on FCS Elevated button and ToggleButtons.
disabledColor: useM3Defaults && !tintDisable
? null
: tintDisable
? tintedDisable(colorScheme.onSurface, tint)
.withAlpha(kAlphaVeryLowDisabled)
: colorScheme.onSurface.withAlpha(kAlphaVeryLowDisabled),
// Applies to [ChoiceChip], [FilterChip], [InputChip], [RawChip].
selectedColor: useM3Defaults ? null : selectedColor,
// Applies to [ChoiceChip.selectedColor], if set it overrides the
// [selectedColor], for ChoiceChips.
secondarySelectedColor: useM3Defaults ? null : selectedColor,
// Applies to [ActionChip], [Chip], [ChoiceChip], [FilterChip],
// [InputChip] and [RawChip].
surfaceTintColor:
useM3Defaults ? surfaceTintColor : colorScheme.surfaceTint,
// Applies to [FilterChip], [InputChip], [RawChip].
checkmarkColor: onSelectedColor,
// Applies to [ActionChip], [Chip], [ChoiceChip], [FilterChip],
// [InputChip] and [RawChip].
padding: useM3 ? null : const EdgeInsets.all(4),
// Applies to [ActionChip], [Chip], [ChoiceChip], [FilterChip],
// [InputChip] and [RawChip].
shape: useM3 && radius == null
? null
: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(radius ?? kChipRadius),
),
),
// Applies to [ActionChip], [Chip], [FilterChip], [InputChip], [RawChip].
labelStyle: useM3Defaults ? null : effectiveLabelStyle,
// Applies to [ChoiceChip.labelStyle],
secondaryLabelStyle: useM3Defaults ? null : effectiveSelectedLabelStyle,
// Applies to [ActionChip], [Chip], [ChoiceChip], [FilterChip],
// [InputChip] and [RawChip].
iconTheme: useM3Defaults
? null
: IconThemeData(
color: fixContrast(iconColor),
size: 18.0,
),
);
}