Skip to content

F
Front-End
Unverified Commit e57f57c7 authored by rami-a's avatar rami-a Committed by GitHub
Browse files
Options

Add elevation to Chips to allow for more flexibility (#27316) 

Expose elevation on chips and allow for it to be customized by the developer.
parent fac051c7
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 12 deletions
packages/flutter/lib/src/material/chip.dart
View file @ e57f57c7
......@@ -111,6 +111,13 @@ abstract class ChipAttributes {
///
/// * [MaterialTapTargetSize], for a description of how this affects tap targets.
MaterialTapTargetSize get materialTapTargetSize;
/// Elevation to be applied on the chip relative to its parent.
///
/// This controls the size of the shadow below the chip.
///
/// Defaults to 0. The value is always non-negative.
double get elevation;
}
/// An interface for material design chips that can be deleted.
......@@ -460,7 +467,8 @@ abstract class TappableChipAttributes {
class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttributes {
/// Creates a material design chip.
///
/// The [label] and [clipBehavior] arguments must not be null.
/// The [label], [elevation], and [clipBehavior] arguments must not be null.
/// Additionally, the [elevation] must be non-negative.
const Chip({
Key key,
this.avatar,
......@@ -476,8 +484,10 @@ class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttri
this.backgroundColor,
this.padding,
this.materialTapTargetSize,
this.elevation = 0.0,
}) : assert(label != null),
assert(clipBehavior != null),
assert(elevation != null && elevation >= 0.0),
super(key: key);
@override
......@@ -506,6 +516,8 @@ class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttri
final String deleteButtonTooltipMessage;
@override
final MaterialTapTargetSize materialTapTargetSize;
@override
final double elevation;
@override
Widget build(BuildContext context) {
......@@ -525,6 +537,7 @@ class Chip extends StatelessWidget implements ChipAttributes, DeletableChipAttri
backgroundColor: backgroundColor,
padding: padding,
materialTapTargetSize: materialTapTargetSize,
elevation: elevation,
isEnabled: true,
);
}
......@@ -587,8 +600,10 @@ class InputChip extends StatelessWidget
/// The [onPressed] and [onSelected] callbacks must not both be specified at
/// the same time.
///
/// The [label], [isEnabled], [selected], and [clipBehavior] arguments must
/// not be null.
/// The [label], [isEnabled], [selected], [pressElevation], [elevation] and
/// [clipBehavior] arguments must not be null. Additionally, [pressElevation]
/// and [elevation] must be non-negative. Typically, [pressElevation] is
/// greater than [elevation].
const InputChip({
Key key,
this.avatar,
......@@ -612,11 +627,14 @@ class InputChip extends StatelessWidget
this.backgroundColor,
this.padding,
this.materialTapTargetSize,
this.elevation = 0.0,
this.avatarBorder = const CircleBorder(),
}) : assert(selected != null),
assert(isEnabled != null),
assert(label != null),
assert(clipBehavior != null),
assert(pressElevation != null && pressElevation >= 0.0),
assert(elevation != null && elevation >= 0.0),
super(key: key);
@override
......@@ -662,6 +680,8 @@ class InputChip extends StatelessWidget
@override
final MaterialTapTargetSize materialTapTargetSize;
@override
final double elevation;
@override
final ShapeBorder avatarBorder;
@override
......@@ -689,6 +709,7 @@ class InputChip extends StatelessWidget
backgroundColor: backgroundColor,
padding: padding,
materialTapTargetSize: materialTapTargetSize,
elevation: elevation,
isEnabled: isEnabled && (onSelected != null || onDeleted != null || onPressed != null),
avatarBorder: avatarBorder,
);
......@@ -756,7 +777,10 @@ class ChoiceChip extends StatelessWidget
DisabledChipAttributes {
/// Create a chip that acts like a radio button.
///
/// The [label], [selected], and [clipBehavior] attributes must not be null.
/// The [label], [selected], [pressElevation], [elevation] and [clipBehavior]
/// arguments must not be null. Additionally, [pressElevation] and [elevation]
/// must be non-negative. Typically, [pressElevation] is greater than
/// [elevation].
const ChoiceChip({
Key key,
this.avatar,
......@@ -774,10 +798,13 @@ class ChoiceChip extends StatelessWidget
this.backgroundColor,
this.padding,
this.materialTapTargetSize,
this.elevation = 0.0,
this.avatarBorder = const CircleBorder(),
}) : assert(selected != null),
assert(label != null),
assert(clipBehavior != null),
assert(pressElevation != null && pressElevation >= 0.0),
assert(elevation != null && elevation >= 0.0),
super(key: key);
@override
......@@ -811,6 +838,8 @@ class ChoiceChip extends StatelessWidget
@override
final MaterialTapTargetSize materialTapTargetSize;
@override
final double elevation;
@override
final ShapeBorder avatarBorder;
@override
......@@ -839,6 +868,7 @@ class ChoiceChip extends StatelessWidget
padding: padding,
isEnabled: isEnabled,
materialTapTargetSize: materialTapTargetSize,
elevation: elevation,
avatarBorder: avatarBorder,
);
}
......@@ -937,7 +967,10 @@ class FilterChip extends StatelessWidget
DisabledChipAttributes {
/// Create a chip that acts like a checkbox.
///
/// The [selected] and [label] attributes must not be null.
/// The [selected], [label], [pressElevation], [elevation] and [clipBehavior]
/// arguments must not be null. Additionally, [pressElevation] and [elevation]
/// must be non-negative. Typically, [pressElevation] is greater than
/// [elevation].
const FilterChip({
Key key,
this.avatar,
......@@ -955,10 +988,13 @@ class FilterChip extends StatelessWidget
this.backgroundColor,
this.padding,
this.materialTapTargetSize,
this.elevation = 0.0,
this.avatarBorder = const CircleBorder(),
}) : assert(selected != null),
assert(label != null),
assert(clipBehavior != null),
assert(pressElevation != null && pressElevation >= 0.0),
assert(elevation != null && elevation >= 0.0),
super(key: key);
@override
......@@ -992,6 +1028,8 @@ class FilterChip extends StatelessWidget
@override
final MaterialTapTargetSize materialTapTargetSize;
@override
final double elevation;
@override
final ShapeBorder avatarBorder;
@override
......@@ -1017,6 +1055,7 @@ class FilterChip extends StatelessWidget
padding: padding,
isEnabled: isEnabled,
materialTapTargetSize: materialTapTargetSize,
elevation: elevation,
avatarBorder: avatarBorder,
);
}
......@@ -1072,7 +1111,10 @@ class FilterChip extends StatelessWidget
class ActionChip extends StatelessWidget implements ChipAttributes, TappableChipAttributes {
/// Create a chip that acts like a button.
///
/// The [label], [onPressed], and [clipBehavior] arguments must not be null.
/// The [label], [onPressed], [pressElevation], [elevation] and [clipBehavior]
/// arguments must not be null. Additionally, [pressElevation] and [elevation]
/// must be non-negative. Typically, [pressElevation] is greater than
/// [elevation].
const ActionChip({
Key key,
this.avatar,
......@@ -1087,12 +1129,15 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
this.backgroundColor,
this.padding,
this.materialTapTargetSize,
this.elevation = 0.0,
}) : assert(label != null),
assert(
onPressed != null,
'Rather than disabling an ActionChip by setting onPressed to null, '
'remove it from the interface entirely.',
),
assert(pressElevation != null && pressElevation >= 0.0),
assert(elevation != null && elevation >= 0.0),
super(key: key);
@override
......@@ -1119,6 +1164,8 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
final EdgeInsetsGeometry padding;
@override
final MaterialTapTargetSize materialTapTargetSize;
@override
final double elevation;
@override
Widget build(BuildContext context) {
......@@ -1136,7 +1183,8 @@ class ActionChip extends StatelessWidget implements ChipAttributes, TappableChip
padding: padding,
labelPadding: labelPadding,
isEnabled: true,
materialTapTargetSize: materialTapTargetSize
materialTapTargetSize: materialTapTargetSize,
elevation: elevation,
);
}
}
......@@ -1183,8 +1231,10 @@ class RawChip extends StatefulWidget
/// The [onPressed] and [onSelected] callbacks must not both be specified at
/// the same time.
///
/// The [label], [pressElevation], [isEnabled], and [clipBehavior] arguments
/// must not be null. Additionally, [pressElevation] must be non-negative.
/// The [label], [pressElevation], [elevation], [isEnabled], and
/// [clipBehavior] arguments must not be null. Additionally, [pressElevation]
/// and [elevation] must be non-negative. Typically, [pressElevation] is
/// greater than [elevation].
const RawChip({
Key key,
this.avatar,
......@@ -1210,11 +1260,13 @@ class RawChip extends StatefulWidget
this.clipBehavior = Clip.none,
this.backgroundColor,
this.materialTapTargetSize,
this.elevation = 0.0,
this.avatarBorder = const CircleBorder(),
}) : assert(label != null),
assert(isEnabled != null),
assert(clipBehavior != null),
assert(pressElevation != null && pressElevation >= 0.0),
assert(elevation != null && elevation >= 0.0),
deleteIcon = deleteIcon ?? _kDefaultDeleteIcon,
super(key: key);
......@@ -1261,6 +1313,8 @@ class RawChip extends StatefulWidget
@override
final MaterialTapTargetSize materialTapTargetSize;
@override
final double elevation;
@override
final CircleBorder avatarBorder;
/// Whether or not to show a check mark when [selected] is true.
......@@ -1512,7 +1566,7 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
Widget result = Material(
elevation: isTapping ? widget.pressElevation : 0.0,
elevation: isTapping ? widget.pressElevation : widget.elevation,
animationDuration: pressedAnimationDuration,
shape: shape,
clipBehavior: widget.clipBehavior,
......
packages/flutter/test/material/chip_test.dart
View file @ e57f57c7
......@@ -1484,7 +1484,7 @@ void main() {
final ChipThemeData chipTheme = theme.chipTheme;
InputChip inputChip = const InputChip(label: Text('Label'), pressElevation: 8.0);
InputChip inputChip = const InputChip(label: Text('Label'));
Widget buildChip(ChipThemeData data) {
return _wrapForChip(
......@@ -1498,12 +1498,18 @@ void main() {
await tester.pumpWidget(buildChip(chipTheme));
expect(inputChip.pressElevation, 8.0);
expect(inputChip.elevation, 0.0);
inputChip = const InputChip(label: Text('Label'), pressElevation: 12.0);
inputChip = const InputChip(
label: Text('Label'),
pressElevation: 12.0,
elevation: 4.0,
);
await tester.pumpWidget(buildChip(chipTheme));
await tester.pumpAndSettle();
expect(inputChip.pressElevation, 12.0);
expect(inputChip.elevation, 4.0);
});
testWidgets('can be tapped outside of chip body', (WidgetTester tester) async {
......
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

HIAST - GitLab