[Chip] Make sure InkResponse is in the foreground on delete for chips with...

[Chip] Make sure InkResponse is in the foreground on delete for chips with background color (#41463)

* Make sure InkResponse is visible on delete for chips with background color set

* Override computeDistanceToActualBaseline in layout builder

packages/flutter/lib/src/material/chip.dart

@@ -15,6 +15,7 @@ import 'constants.dart';
 import 'debug.dart';
 import 'feedback.dart';
 import 'icons.dart';
+import 'ink_decoration.dart';
 import 'ink_well.dart';
 import 'material.dart';
 import 'material_localizations.dart';
@@ -1813,7 +1814,7 @@ class _RawChipState extends State<RawChip> with TickerProviderStateMixin<RawChip
         child: AnimatedBuilder(
           animation: Listenable.merge(<Listenable>[selectController, enableController]),
           builder: (BuildContext context, Widget child) {
-            return Container(
+            return Ink(
               decoration: ShapeDecoration(
                 shape: shape,
                 color: getBackgroundColor(chipTheme),

packages/flutter/lib/src/widgets/layout_builder.dart

@@ -235,6 +235,11 @@ class _RenderLayoutBuilder extends RenderBox with RenderObjectWithChildMixin<Ren
     return 0.0;
   }
 
+  @override
+  double computeDistanceToActualBaseline(TextBaseline baseline) {
+    return child?.getDistanceToActualBaseline(baseline);
+  }
+
   @override
   void performLayout() {
     layoutAndBuildChild();

packages/flutter/test/material/chip_test.dart

@@ -2179,6 +2179,35 @@ void main() {
     await gesture.removePointer();
   });
 
+  testWidgets('Chips with background color should have delete icon ripple and splash in the foreground', (WidgetTester tester) async {
+    // Regression test for https://github.com/flutter/flutter/issues/41461
+    await tester.pumpWidget(
+      _wrapForChip(
+        child: Chip(
+          onDeleted: () { },
+          backgroundColor: Colors.pink,
+          label: const Text('Chip with delete icon'),
+          deleteIcon: const Icon(Icons.cancel),
+        ),
+      ),
+    );
+    final Offset center = tester.getCenter(find.byType(Icon));
+
+    final TestGesture gesture = await tester.startGesture(center);
+    await tester.pump(); // start gesture
+    await tester.pump(const Duration(milliseconds: 200)); // wait for splash to be well under way
+    final RenderBox box = Material.of(tester.element(find.byType(InkResponse))) as dynamic;
+    expect(
+      box,
+      paints
+        ..clipRect(rect: const Rect.fromLTRB(0.0, 0.0, 342.0, 32.0))
+        ..path(color: Colors.pink[500])
+        ..circle(x: 12.0, y: 12.0, radius: 0.0, color: const Color(0x66c8c8c8))
+        ..circle(x: 326.0, y: 16.0, radius: 35.0, color: const Color(0x00bcbcbc))
+    );
+    await gesture.up();
+  });
+
   testWidgets('loses focus when disabled', (WidgetTester tester) async {
     final FocusNode focusNode = FocusNode(debugLabel: 'InputChip');
     await tester.pumpWidget(

packages/flutter/test/widgets/layout_builder_test.dart

@@ -587,4 +587,40 @@ void main() {
     await tester.pump();
     expect(hitCounts, const <int> [0, 0, 0]);
   });
+
+  testWidgets('LayoutBuilder calculates baseline from child', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      Directionality(
+        textDirection: TextDirection.ltr,
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.baseline,
+          textBaseline: TextBaseline.alphabetic,
+          children: <Widget>[
+            LayoutBuilder(
+              builder: (BuildContext context, BoxConstraints constraints) {
+                return const Text('First', style: TextStyle(fontSize: 10));
+              },
+            ),
+            LayoutBuilder(
+              builder: (BuildContext context, BoxConstraints constraints) {
+                return const Text('Second', style: TextStyle(fontSize: 30));
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+
+    // The Ahem font extends 0.2 * fontSize below the baseline.
+    // So the two row elements line up like this:
+    //
+    //  First  Second
+    //  -------------   baseline
+    //    2      6      space below the baseline = 0.2 * fontSize
+    //  -------------   widget text dy values
+
+    final double firstTextDy = tester.getBottomLeft(find.text('First')).dy;
+    final double secondTextDy = tester.getBottomLeft(find.text('Second')).dy;
+    expect(firstTextDy, closeTo(secondTextDy - 4.0, 0.001));
+  }, skip: isBrowser);
 }