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 {};