From b5697a0c6dec3218d324d0c996143ecc7decede6 Mon Sep 17 00:00:00 2001
From: "auto-submit[bot]" <98614782+auto-submit[bot]@users.noreply.github.com>
Date: Fri, 7 Jun 2024 19:30:18 +0000
Subject: [PATCH] Reverts "Fix `SegmentedButton` clipping when drawing segments
(#149739)" (#149927)
Reverts: flutter/flutter#149739
Initiated by: QuncCccccc
Reason for reverting: the newly-added unit test might cause the red tree
Original PR Author: TahaTesser
Reviewed By: {QuncCccccc}
This change reverts the following previous change:
fixes [`SegmentedButton` doesn't clip properly when one of the segments has `ColorFiltered`](https://github.com/flutter/flutter/issues/144990)
### Code sample
expand to view the code sample
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SegmentedButton(
segments: const >[
ButtonSegment(
value: 0,
label: ColorFiltered(
colorFilter:
ColorFilter.mode(Colors.amber, BlendMode.colorBurn),
child: Text('Option 1'),
),
),
ButtonSegment(
value: 1,
label: Text('Option 2'),
),
],
onSelectionChanged: (Set selected) {},
selected: const {0},
),
),
),
);
}
}
```
### Before
![before](https://github.com/flutter/flutter/assets/48603081/b402fc51-d575-4208-8a71-f798ef2b2bf5)
### After
![after](https://github.com/flutter/flutter/assets/48603081/77a5cac2-ecef-4381-a043-dbb5c91407ec)
---
.../lib/src/material/segmented_button.dart | 8 +-
.../test/material/segmented_button_test.dart | 73 -------------------
2 files changed, 5 insertions(+), 76 deletions(-)
diff --git a/packages/flutter/lib/src/material/segmented_button.dart b/packages/flutter/lib/src/material/segmented_button.dart
index 0c0540f559bac..cbfcb2dfed2eb 100644
--- a/packages/flutter/lib/src/material/segmented_button.dart
+++ b/packages/flutter/lib/src/material/segmented_button.dart
@@ -895,11 +895,12 @@ class _RenderSegmentedButton extends RenderBox with
Path? enabledClipPath;
Path? disabledClipPath;
+ context.canvas..save()..clipPath(borderClipPath);
while (child != null) {
final _SegmentedButtonContainerBoxParentData childParentData = child.parentData! as _SegmentedButtonContainerBoxParentData;
final Rect childRect = childParentData.surroundingRect!.outerRect.shift(offset);
- context.canvas..save()..clipPath(borderClipPath);
+ context.canvas..save()..clipRect(childRect);
context.paintChild(child, childParentData.offset + offset);
context.canvas.restore();
@@ -934,8 +935,8 @@ class _RenderSegmentedButton extends RenderBox with
final BorderSide divider = segments[index - 1].enabled || segments[index].enabled
? enabledBorder.side.copyWith(strokeAlign: 0.0)
: disabledBorder.side.copyWith(strokeAlign: 0.0);
- final Offset top = Offset(dividerPos, borderRect.top);
- final Offset bottom = Offset(dividerPos, borderRect.bottom);
+ final Offset top = Offset(dividerPos, childRect.top);
+ final Offset bottom = Offset(dividerPos, childRect.bottom);
context.canvas.drawLine(top, bottom, divider.toPaint());
}
@@ -943,6 +944,7 @@ class _RenderSegmentedButton extends RenderBox with
child = childAfter(child);
index += 1;
}
+ context.canvas.restore();
// Paint the outer border for both disabled and enabled clip rect if needed.
if (disabledClipPath == null) {
diff --git a/packages/flutter/test/material/segmented_button_test.dart b/packages/flutter/test/material/segmented_button_test.dart
index 29ae55098e005..c4a2f2bcd066b 100644
--- a/packages/flutter/test/material/segmented_button_test.dart
+++ b/packages/flutter/test/material/segmented_button_test.dart
@@ -1045,79 +1045,6 @@ void main() {
await tester.pumpAndSettle();
expect(getOverlayColor(tester), paints..rect(color: overlayColor));
});
-
- // This is a regression test for https://github.com/flutter/flutter/issues/144990.
- testWidgets('SegmentedButton clips border path when drawing segments', (WidgetTester tester) async {
- await tester.pumpWidget(
- MaterialApp(
- home: Scaffold(
- body: Center(
- child: SegmentedButton(
- segments: const >[
- ButtonSegment(
- value: 0,
- label: Text('Option 1'),
- ),
- ButtonSegment(
- value: 1,
- label: Text('Option 2'),
- ),
- ],
- onSelectionChanged: (Set selected) {},
- selected: const {0},
- ),
- ),
- ),
- ),
- );
-
- expect(
- find.byType(SegmentedButton),
- paints
- ..save()
- ..clipPath() // Clip the border.
- ..path(color: const Color(0xffe8def8)) // Draw segment 0.
- ..save()
- ..clipPath() // Clip the border.
- ..path(color: const Color(0x00000000)), // Draw segment 1.
- );
- });
-
- // This is a regression test for https://github.com/flutter/flutter/issues/144990.
- testWidgets('SegmentedButton dividers matches border rect size', (WidgetTester tester) async {
- await tester.pumpWidget(
- MaterialApp(
- home: Scaffold(
- body: Center(
- child: SegmentedButton(
- segments: const >[
- ButtonSegment(
- value: 0,
- label: Text('Option 1'),
- ),
- ButtonSegment(
- value: 1,
- label: Text('Option 2'),
- ),
- ],
- onSelectionChanged: (Set selected) {},
- selected: const {0},
- ),
- ),
- ),
- ),
- );
-
- const double tapTargetSize = 48.0;
- expect(
- find.byType(SegmentedButton),
- paints
- ..line(
- p1: const Offset(166.8000030517578, 4.0),
- p2: const Offset(166.8000030517578, tapTargetSize - 4.0),
- ),
- );
- });
}
Set enabled = const {};