Chip press elevation (#22383)
* Make Chip press elevation customizable.
This commit is contained in:
parent
75b24070dd
commit
efc5123d29
@ -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 {
|
|||||||
/// ```
|
/// ```
|
||||||
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 {
|
|||||||
/// ```
|
/// ```
|
||||||
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
|
|||||||
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
|
|||||||
@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
|
|||||||
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
|
|||||||
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
|
|||||||
@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
|
|||||||
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
|
|||||||
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
|
|||||||
@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
|
|||||||
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
|
|||||||
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
|
|||||||
@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
|
|||||||
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
|
|||||||
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
|
|||||||
@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
|
|||||||
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
|
|||||||
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() {
|
|||||||
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(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user