Skip to content

Commit

Permalink
Fix Chip highlight color isn't drawn on top of the background color (f…
Browse files Browse the repository at this point in the history
  • Loading branch information
TahaTesser authored Apr 17, 2023
1 parent 7424f34 commit 15cb1f8
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 2 deletions.
3 changes: 2 additions & 1 deletion packages/flutter/lib/src/material/chip.dart
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import 'colors.dart';
import 'constants.dart';
import 'debug.dart';
import 'icons.dart';
import 'ink_decoration.dart';
import 'ink_well.dart';
import 'material.dart';
import 'material_localizations.dart';
Expand Down Expand Up @@ -1210,7 +1211,7 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
child: AnimatedBuilder(
animation: Listenable.merge(<Listenable>[selectController, enableController]),
builder: (BuildContext context, Widget? child) {
return Container(
return Ink(
decoration: ShapeDecoration(
shape: resolvedShape,
color: _getBackgroundColor(theme, chipTheme, chipDefaults),
Expand Down
51 changes: 50 additions & 1 deletion packages/flutter/test/material/chip_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ dynamic getRenderChip(WidgetTester tester) {
if (!tester.any(findRenderChipElement())) {
return null;
}
final Element element = tester.element(findRenderChipElement());
final Element element = tester.element(findRenderChipElement().first);
return element.renderObject;
}

Expand Down Expand Up @@ -3284,6 +3284,55 @@ void main() {

expect(tester.takeException(), isNull);
});

testWidgets('Chip background color and shape are drawn on Ink', (WidgetTester tester) async {
const Color backgroundColor = Color(0xff00ff00);
const OutlinedBorder shape = ContinuousRectangleBorder();

await tester.pumpWidget(wrapForChip(
child: const RawChip(
label: Text('text'),
backgroundColor: backgroundColor,
shape: shape,
),
));

final Ink ink = tester.widget(find.descendant(
of: find.byType(RawChip),
matching: find.byType(Ink),
));
final ShapeDecoration decoration = ink.decoration! as ShapeDecoration;
expect(decoration.color, backgroundColor);
expect(decoration.shape, shape);
});

testWidgets('Chip highlight color is drawn on top of the backgroundColor', (WidgetTester tester) async {
final FocusNode focusNode = FocusNode(debugLabel: 'RawChip');
tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
const Color backgroundColor = Color(0xff00ff00);

await tester.pumpWidget(wrapForChip(
child: RawChip(
label: const Text('text'),
backgroundColor: backgroundColor,
autofocus: true,
focusNode: focusNode,
onPressed: () {},
),
));

await tester.pumpAndSettle();

expect(focusNode.hasPrimaryFocus, isTrue);
expect(
find.byType(Material).last,
paints
// Background color is drawn first.
..rrect(color: backgroundColor)
// Highlight color is drawn on top of the background color.
..rect(color: const Color(0x1f000000)),
);
});
}

class _MaterialStateOutlinedBorder extends StadiumBorder implements MaterialStateOutlinedBorder {
Expand Down

0 comments on commit 15cb1f8

Please sign in to comment.