Unverified Commit efc5123d authored by jslavitz's avatar jslavitz Committed by GitHub

Chip press elevation (#22383)

* Make Chip press elevation customizable.
parent 75b24070
...@@ -27,7 +27,6 @@ const double _kDeleteIconSize = 18.0; ...@@ -27,7 +27,6 @@ const double _kDeleteIconSize = 18.0;
const int _kCheckmarkAlpha = 0xde; // 87% const int _kCheckmarkAlpha = 0xde; // 87%
const int _kDisabledAlpha = 0x61; // 38% const int _kDisabledAlpha = 0x61; // 38%
const double _kCheckmarkStrokeWidth = 2.0; const double _kCheckmarkStrokeWidth = 2.0;
const double _kPressElevation = 8.0;
const Duration _kSelectDuration = Duration(milliseconds: 195); const Duration _kSelectDuration = Duration(milliseconds: 195);
const Duration _kCheckmarkDuration = Duration(milliseconds: 150); const Duration _kCheckmarkDuration = Duration(milliseconds: 150);
...@@ -275,6 +274,12 @@ abstract class SelectableChipAttributes { ...@@ -275,6 +274,12 @@ abstract class SelectableChipAttributes {
/// ``` /// ```
ValueChanged<bool> get onSelected; ValueChanged<bool> get onSelected;
/// Elevation to be applied on the chip during the press motion.
/// This controls the size of the shadow below the chip.
///
/// Defaults to 8.
double get pressElevation;
/// Color to be used for the chip's background, indicating that it is /// Color to be used for the chip's background, indicating that it is
/// selected. /// selected.
/// ///
...@@ -378,6 +383,12 @@ abstract class TappableChipAttributes { ...@@ -378,6 +383,12 @@ abstract class TappableChipAttributes {
/// ``` /// ```
VoidCallback get onPressed; VoidCallback get onPressed;
/// Elevation to be applied on the chip during the press motion.
/// This controls the size of the shadow below the chip.
///
/// Defaults to 8.
double get pressElevation;
/// Tooltip string to be used for the body area (where the label and avatar /// Tooltip string to be used for the body area (where the label and avatar
/// are) of the chip. /// are) of the chip.
String get tooltip; String get tooltip;
...@@ -564,6 +575,7 @@ class InputChip extends StatelessWidget ...@@ -564,6 +575,7 @@ class InputChip extends StatelessWidget
this.deleteIconColor, this.deleteIconColor,
this.deleteButtonTooltipMessage, this.deleteButtonTooltipMessage,
this.onPressed, this.onPressed,
this.pressElevation,
this.disabledColor, this.disabledColor,
this.selectedColor, this.selectedColor,
this.tooltip, this.tooltip,
...@@ -603,6 +615,8 @@ class InputChip extends StatelessWidget ...@@ -603,6 +615,8 @@ class InputChip extends StatelessWidget
@override @override
final VoidCallback onPressed; final VoidCallback onPressed;
@override @override
final double pressElevation;
@override
final Color disabledColor; final Color disabledColor;
@override @override
final Color selectedColor; final Color selectedColor;
...@@ -633,6 +647,7 @@ class InputChip extends StatelessWidget ...@@ -633,6 +647,7 @@ class InputChip extends StatelessWidget
deleteButtonTooltipMessage: deleteButtonTooltipMessage, deleteButtonTooltipMessage: deleteButtonTooltipMessage,
onSelected: onSelected, onSelected: onSelected,
onPressed: onPressed, onPressed: onPressed,
pressElevation: pressElevation,
selected: selected, selected: selected,
tapEnabled: true, tapEnabled: true,
disabledColor: disabledColor, disabledColor: disabledColor,
...@@ -716,6 +731,7 @@ class ChoiceChip extends StatelessWidget ...@@ -716,6 +731,7 @@ class ChoiceChip extends StatelessWidget
this.labelStyle, this.labelStyle,
this.labelPadding, this.labelPadding,
this.onSelected, this.onSelected,
this.pressElevation,
@required this.selected, @required this.selected,
this.selectedColor, this.selectedColor,
this.disabledColor, this.disabledColor,
...@@ -741,6 +757,8 @@ class ChoiceChip extends StatelessWidget ...@@ -741,6 +757,8 @@ class ChoiceChip extends StatelessWidget
@override @override
final ValueChanged<bool> onSelected; final ValueChanged<bool> onSelected;
@override @override
final double pressElevation;
@override
final bool selected; final bool selected;
@override @override
final Color disabledColor; final Color disabledColor;
...@@ -772,6 +790,7 @@ class ChoiceChip extends StatelessWidget ...@@ -772,6 +790,7 @@ class ChoiceChip extends StatelessWidget
labelStyle: labelStyle ?? (selected ? chipTheme.secondaryLabelStyle : null), labelStyle: labelStyle ?? (selected ? chipTheme.secondaryLabelStyle : null),
labelPadding: labelPadding, labelPadding: labelPadding,
onSelected: onSelected, onSelected: onSelected,
pressElevation: pressElevation,
selected: selected, selected: selected,
showCheckmark: false, showCheckmark: false,
onDeleted: null, onDeleted: null,
...@@ -889,6 +908,7 @@ class FilterChip extends StatelessWidget ...@@ -889,6 +908,7 @@ class FilterChip extends StatelessWidget
this.labelPadding, this.labelPadding,
this.selected = false, this.selected = false,
@required this.onSelected, @required this.onSelected,
this.pressElevation,
this.disabledColor, this.disabledColor,
this.selectedColor, this.selectedColor,
this.tooltip, this.tooltip,
...@@ -915,6 +935,8 @@ class FilterChip extends StatelessWidget ...@@ -915,6 +935,8 @@ class FilterChip extends StatelessWidget
@override @override
final ValueChanged<bool> onSelected; final ValueChanged<bool> onSelected;
@override @override
final double pressElevation;
@override
final Color disabledColor; final Color disabledColor;
@override @override
final Color selectedColor; final Color selectedColor;
...@@ -943,6 +965,7 @@ class FilterChip extends StatelessWidget ...@@ -943,6 +965,7 @@ class FilterChip extends StatelessWidget
labelStyle: labelStyle, labelStyle: labelStyle,
labelPadding: labelPadding, labelPadding: labelPadding,
onSelected: onSelected, onSelected: onSelected,
pressElevation: pressElevation,
selected: selected, selected: selected,
tooltip: tooltip, tooltip: tooltip,
shape: shape, shape: shape,
...@@ -1014,6 +1037,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip ...@@ -1014,6 +1037,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
this.labelStyle, this.labelStyle,
this.labelPadding, this.labelPadding,
@required this.onPressed, @required this.onPressed,
this.pressElevation,
this.tooltip, this.tooltip,
this.shape, this.shape,
this.clipBehavior = Clip.none, this.clipBehavior = Clip.none,
...@@ -1039,6 +1063,8 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip ...@@ -1039,6 +1063,8 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
@override @override
final VoidCallback onPressed; final VoidCallback onPressed;
@override @override
final double pressElevation;
@override
final String tooltip; final String tooltip;
@override @override
final ShapeBorder shape; final ShapeBorder shape;
...@@ -1058,6 +1084,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip ...@@ -1058,6 +1084,7 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
avatar: avatar, avatar: avatar,
label: label, label: label,
onPressed: onPressed, onPressed: onPressed,
pressElevation: pressElevation,
tooltip: tooltip, tooltip: tooltip,
labelStyle: labelStyle, labelStyle: labelStyle,
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
...@@ -1127,6 +1154,7 @@ class RawChip extends StatefulWidget ...@@ -1127,6 +1154,7 @@ class RawChip extends StatefulWidget
this.deleteButtonTooltipMessage, this.deleteButtonTooltipMessage,
this.onPressed, this.onPressed,
this.onSelected, this.onSelected,
this.pressElevation = 8.0,
this.tapEnabled = true, this.tapEnabled = true,
this.selected, this.selected,
this.showCheckmark = true, this.showCheckmark = true,
...@@ -1165,6 +1193,8 @@ class RawChip extends StatefulWidget ...@@ -1165,6 +1193,8 @@ class RawChip extends StatefulWidget
@override @override
final VoidCallback onPressed; final VoidCallback onPressed;
@override @override
final double pressElevation;
@override
final bool selected; final bool selected;
@override @override
final bool isEnabled; final bool isEnabled;
...@@ -1220,10 +1250,6 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip ...@@ -1220,10 +1250,6 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
Animation<double> enableAnimation; Animation<double> enableAnimation;
Animation<double> selectionFade; Animation<double> selectionFade;
static final Animatable<double> pressedShadowTween = Tween<double>(
begin: 0.0,
end: _kPressElevation,
);
bool get hasDeleteButton => widget.onDeleted != null; bool get hasDeleteButton => widget.onDeleted != null;
bool get hasAvatar => widget.avatar != null; bool get hasAvatar => widget.avatar != null;
...@@ -1436,8 +1462,9 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip ...@@ -1436,8 +1462,9 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
final TextDirection textDirection = Directionality.of(context); final TextDirection textDirection = Directionality.of(context);
final ShapeBorder shape = widget.shape ?? chipTheme.shape; final ShapeBorder shape = widget.shape ?? chipTheme.shape;
Widget result = Material( Widget result = Material(
elevation: isTapping ? _kPressElevation : 0.0, elevation: isTapping ? widget.pressElevation : 0.0,
animationDuration: pressedAnimationDuration, animationDuration: pressedAnimationDuration,
shape: shape, shape: shape,
clipBehavior: widget.clipBehavior, clipBehavior: widget.clipBehavior,
......
...@@ -1403,6 +1403,36 @@ void main() { ...@@ -1403,6 +1403,36 @@ void main() {
expect(deleted, true); expect(deleted, true);
}); });
testWidgets('Chip elevation works correctly', (WidgetTester tester) async {
final ThemeData theme = ThemeData(
platform: TargetPlatform.android,
primarySwatch: Colors.red,
);
final ChipThemeData chipTheme = theme.chipTheme;
InputChip inputChip = const InputChip(label: Text('Label'), pressElevation: 8.0);
Widget buildChip(ChipThemeData data) {
return _wrapForChip(
textDirection: TextDirection.ltr,
child: Theme(
data: theme,
child: inputChip,
),
);
}
await tester.pumpWidget(buildChip(chipTheme));
expect(inputChip.pressElevation, 8.0);
inputChip = const InputChip(label: Text('Label'), pressElevation: 12.0);
await tester.pumpWidget(buildChip(chipTheme));
await tester.pumpAndSettle();
expect(inputChip.pressElevation, 12.0);
});
testWidgets('can be tapped outside of chip body', (WidgetTester tester) async { testWidgets('can be tapped outside of chip body', (WidgetTester tester) async {
bool pressed = false; bool pressed = false;
await tester.pumpWidget( await tester.pumpWidget(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment