// 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 IconButtonTemplate extends TokenTemplate { const IconButtonTemplate(this.tokenGroup, super.blockName, super.fileName, super.tokens, { super.colorSchemePrefix = '_colors.', }); final String tokenGroup; String _backgroundColor() { switch (tokenGroup) { case 'md.comp.filled-icon-button': case 'md.comp.filled-tonal-icon-button': return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.disabled)) { return ${componentColor('$tokenGroup.disabled.container')}; } if (states.contains(MaterialState.selected)) { return ${componentColor('$tokenGroup.selected.container')}; } if (toggleable) { // toggleable but unselected case return ${componentColor('$tokenGroup.unselected.container')}; } return ${componentColor('$tokenGroup.container')}; })'''; case 'md.comp.outlined-icon-button': return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.disabled)) { if (states.contains(MaterialState.selected)) { return ${componentColor('$tokenGroup.disabled.selected.container')}; } return Colors.transparent; } if (states.contains(MaterialState.selected)) { return ${componentColor('$tokenGroup.selected.container')}; } return Colors.transparent; })'''; } return ''' const MaterialStatePropertyAll(Colors.transparent)'''; } String _foregroundColor() { switch (tokenGroup) { case 'md.comp.filled-icon-button': case 'md.comp.filled-tonal-icon-button': return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.disabled)) { return ${componentColor('$tokenGroup.disabled.icon')}; } if (states.contains(MaterialState.selected)) { return ${componentColor('$tokenGroup.toggle.selected.icon')}; } if (toggleable) { // toggleable but unselected case return ${componentColor('$tokenGroup.toggle.unselected.icon')}; } return ${componentColor('$tokenGroup.icon')}; })'''; case 'md.comp.outlined-icon-button': case 'md.comp.icon-button': return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.disabled)) { return ${componentColor('$tokenGroup.disabled.icon')}; } if (states.contains(MaterialState.selected)) { return ${componentColor('$tokenGroup.selected.icon')}; } return ${componentColor('$tokenGroup.unselected.icon')}; })'''; } return ''' const MaterialStatePropertyAll(Colors.transparent)'''; } String _overlayColor() { switch (tokenGroup) { case 'md.comp.filled-icon-button': case 'md.comp.filled-tonal-icon-button': return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.selected)) { if (states.contains(MaterialState.pressed)) { return ${componentColor('$tokenGroup.toggle.selected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')}); } if (states.contains(MaterialState.hovered)) { return ${componentColor('$tokenGroup.toggle.selected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')}); } if (states.contains(MaterialState.focused)) { return ${componentColor('$tokenGroup.toggle.selected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')}); } } if (toggleable) { // toggleable but unselected case if (states.contains(MaterialState.pressed)) { return ${componentColor('$tokenGroup.toggle.unselected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')}); } if (states.contains(MaterialState.hovered)) { return ${componentColor('$tokenGroup.toggle.unselected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')}); } if (states.contains(MaterialState.focused)) { return ${componentColor('$tokenGroup.toggle.unselected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')}); } } if (states.contains(MaterialState.pressed)) { return ${componentColor('$tokenGroup.pressed.state-layer')}; } if (states.contains(MaterialState.hovered)) { return ${componentColor('$tokenGroup.hover.state-layer')}; } if (states.contains(MaterialState.focused)) { return ${componentColor('$tokenGroup.focus.state-layer')}; } return Colors.transparent; })'''; case 'md.comp.outlined-icon-button': return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.selected)) { if (states.contains(MaterialState.pressed)) { return ${componentColor('$tokenGroup.selected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')}); } if (states.contains(MaterialState.hovered)) { return ${componentColor('$tokenGroup.selected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')}); } if (states.contains(MaterialState.focused)) { return ${componentColor('$tokenGroup.selected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')}); } } if (states.contains(MaterialState.pressed)) { return ${componentColor('$tokenGroup.unselected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')}); } if (states.contains(MaterialState.hovered)) { return ${componentColor('$tokenGroup.unselected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')}); } if (states.contains(MaterialState.focused)) { return ${componentColor('$tokenGroup.unselected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')}); } return Colors.transparent; })'''; case 'md.comp.icon-button': return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.selected)) { if (states.contains(MaterialState.pressed)) { return ${componentColor('$tokenGroup.selected.pressed.state-layer')}; } if (states.contains(MaterialState.hovered)) { return ${componentColor('$tokenGroup.selected.hover.state-layer')}; } if (states.contains(MaterialState.focused)) { return ${componentColor('$tokenGroup.selected.focus.state-layer')}; } } if (states.contains(MaterialState.pressed)) { return ${componentColor('$tokenGroup.unselected.pressed.state-layer')}; } if (states.contains(MaterialState.hovered)) { return ${componentColor('$tokenGroup.unselected.hover.state-layer')}; } if (states.contains(MaterialState.focused)) { return ${componentColor('$tokenGroup.unselected.focus.state-layer')}; } return Colors.transparent; })'''; } return ''' const MaterialStatePropertyAll(Colors.transparent)'''; } String _minimumSize() { if (tokenAvailable('$tokenGroup.container.size')) { return ''' const MaterialStatePropertyAll(Size(${getToken('$tokenGroup.container.size')}, ${getToken('$tokenGroup.container.size')}))'''; } else { return ''' const MaterialStatePropertyAll(Size(${getToken('$tokenGroup.state-layer.size')}, ${getToken('$tokenGroup.state-layer.size')}))'''; } } String _shape() { if (tokenAvailable('$tokenGroup.container.shape')) { return ''' const MaterialStatePropertyAll(${shape("$tokenGroup.container", "")})'''; } else { return ''' const MaterialStatePropertyAll(${shape("$tokenGroup.state-layer", "")})'''; } } String _side() { if (tokenAvailable('$tokenGroup.unselected.outline.color')) { return ''' MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.selected)) { return null; } else { if (states.contains(MaterialState.disabled)) { return BorderSide(color: ${componentColor('$tokenGroup.disabled.unselected.outline')}); } return BorderSide(color: ${componentColor('$tokenGroup.unselected.outline')}); } })'''; } return ''' null'''; } String _elevationColor(String token) { if (tokenAvailable(token)) { return 'MaterialStatePropertyAll(${color(token)})'; } else { return 'const MaterialStatePropertyAll(Colors.transparent)'; } } @override String generate() => ''' class _${blockName}DefaultsM3 extends ButtonStyle { _${blockName}DefaultsM3(this.context, this.toggleable) : super( animationDuration: kThemeChangeDuration, enableFeedback: true, alignment: Alignment.center, ); final BuildContext context; final bool toggleable; late final ColorScheme _colors = Theme.of(context).colorScheme; // No default text style @override MaterialStateProperty? get backgroundColor =>${_backgroundColor()}; @override MaterialStateProperty? get foregroundColor =>${_foregroundColor()}; @override MaterialStateProperty? get overlayColor =>${_overlayColor()}; @override MaterialStateProperty? get elevation => const MaterialStatePropertyAll(0.0); @override MaterialStateProperty? get shadowColor => ${_elevationColor("$tokenGroup.container.shadow-color")}; @override MaterialStateProperty? get surfaceTintColor => ${_elevationColor("$tokenGroup.container.surface-tint-layer.color")}; @override MaterialStateProperty? get padding => const MaterialStatePropertyAll(EdgeInsets.all(8.0)); @override MaterialStateProperty? get minimumSize =>${_minimumSize()}; // No default fixedSize @override MaterialStateProperty? get maximumSize => const MaterialStatePropertyAll(Size.infinite); @override MaterialStateProperty? get iconSize => const MaterialStatePropertyAll(${getToken("$tokenGroup.icon.size")}); @override MaterialStateProperty? get side =>${_side()}; @override MaterialStateProperty? get shape =>${_shape()}; @override MaterialStateProperty? get mouseCursor => MaterialStateProperty.resolveWith((Set states) { if (states.contains(MaterialState.disabled)) { return SystemMouseCursors.basic; } return SystemMouseCursors.click; }); @override VisualDensity? get visualDensity => VisualDensity.standard; @override MaterialTapTargetSize? get tapTargetSize => Theme.of(context).materialTapTargetSize; @override InteractiveInkFeatureFactory? get splashFactory => Theme.of(context).splashFactory; } '''; }