Fix the drawing position of OutlineInputBorder (#158440)

hgraceb · web-flow · commit 9a04500c7ffc · 2024-12-06T00:02:39.000Z
Fixes #150109. 1. There are two golden file tests broken. I have read the document for the golden file test, but I'm not sure if I should do something else. 2. Modify the test because of drawing position changes. ## Changes ```dart import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Padding( padding: const EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Directionality( textDirection: TextDirection.ltr, child: RepaintBoundary( child: InputDecorator( isFocused: true, isEmpty: true, decoration: InputDecoration( labelText: 'label', border: OutlineInputBorder( borderRadius: BorderRadius.circular(30.0), gapPadding: 0.0, ), ), ), ), ), Directionality( textDirection: TextDirection.rtl, child: RepaintBoundary( child: InputDecorator( isFocused: true, isEmpty: true, decoration: InputDecoration( labelText: 'label', border: OutlineInputBorder( borderRadius: BorderRadius.circular(30.0), gapPadding: 0.0, ), ), ), ), ), ], ), ), ), )); } ``` | Before | After | | ---------------------------------------- | ------------------------------------------------------ | | ![Before](https://github.com/user-attachments/assets/98fcda4d-9cfa-4b7a-a68e-f978d4c63481) | ![After](https://github.com/user-attachments/assets/d677e3a8-a88a-44d8-8997-64187537c438) | ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
diff --git a/packages/flutter/lib/src/material/input_border.dart b/packages/flutter/lib/src/material/input_border.dart
@@ -428,7 +428,7 @@ class OutlineInputBorder extends InputBorder {
   @override
   bool get preferPaintInterior => true;
 
-  Path _gapBorderPath(Canvas canvas, RRect center, double start, double extent) {
+  Path _gapBorderPath(Canvas canvas, RRect center, double outerWidth, double start, double extent) {
     // When the corner radii on any side add up to be greater than the
     // given height, each radius has to be scaled to not exceed the
     // size of the width/height of the RRect.
@@ -482,14 +482,14 @@ class OutlineInputBorder extends InputBorder {
     // Draw top border from gap end to top right corner and draw top right corner.
     const double trCornerArcStart = (3 * math.pi) / 2.0;
     const double trCornerArcSweep = cornerArcSweep;
-    if (start + extent < scaledRRect.width - scaledRRect.trRadiusX) {
+    if (start + extent < outerWidth - scaledRRect.trRadiusX) {
       path.moveTo(scaledRRect.left + start + extent, scaledRRect.top);
       path.lineTo(scaledRRect.right - scaledRRect.trRadiusX, scaledRRect.top);
       if (scaledRRect.trRadius != Radius.zero) {
         path.addArc(trCorner, trCornerArcStart, trCornerArcSweep);
       }
-    } else if (start + extent < scaledRRect.width) {
-      final double dx = scaledRRect.width - (start + extent);
+    } else if (start + extent < outerWidth) {
+      final double dx = outerWidth - (start + extent);
       final double sweep = math.asin(clampDouble(1 - dx / scaledRRect.trRadiusX, 0.0, 1.0));
       path.addArc(trCorner, trCornerArcStart + sweep, trCornerArcSweep - sweep);
     }
@@ -546,7 +546,7 @@ class OutlineInputBorder extends InputBorder {
         TextDirection.rtl => gapStart + gapPadding - extent,
         TextDirection.ltr => gapStart - gapPadding,
       };
-      final Path path = _gapBorderPath(canvas, center, math.max(0.0, start), extent);
+      final Path path = _gapBorderPath(canvas, center, outer.width, math.max(0.0, start), extent);
       canvas.drawPath(path, paint);
     }
   }
diff --git a/packages/flutter/test/material/input_decorator_test.dart b/packages/flutter/test/material/input_decorator_test.dart
@@ -1634,8 +1634,9 @@ void main() {
       );
     });
 
+    // Regression test for https://github.com/flutter/flutter/issues/82321.
+    // Regression test for https://github.com/flutter/flutter/issues/150109.
     testWidgets('OutlineBorder starts at the right position when border radius is taller than horizontal content padding', (WidgetTester tester) async {
-      // This is a regression test for https://github.com/flutter/flutter/issues/82321.
       Widget buildFrame(TextDirection textDirection) {
         return MaterialApp(
           home: Scaffold(
@@ -1677,8 +1678,8 @@ void main() {
           ],
           // The points just before the label bottom left corner should be part of the border.
           includes: <Offset>[
-            labelBottomLeftLocalToBorder - const Offset(1, 0),
-            labelBottomLeftLocalToBorder - const Offset(1, 1),
+            labelBottomLeftLocalToBorder + const Offset(-1, 0),
+            labelBottomLeftLocalToBorder + const Offset(-1, -1),
           ],
         )
         ..restore(),
@@ -1687,10 +1688,7 @@ void main() {
       await tester.pumpWidget(buildFrame(TextDirection.rtl));
       borderBox = InputDecorator.containerOf(tester.element(findBorderPainter()))!;
       // Convert label bottom right offset to border path coordinate system.
-      Offset labelBottomRightLocalToBorder = borderBox.globalToLocal(getLabelRect(tester).bottomRight);
-      // TODO(bleroux): determine why the position has to be moved by 2 pixels to the right.
-      // See https://github.com/flutter/flutter/issues/150109.
-      labelBottomRightLocalToBorder += const Offset(2, 0);
+      final Offset labelBottomRightLocalToBorder = borderBox.globalToLocal(getLabelRect(tester).bottomRight);
 
       expect(findBorderPainter(), paints
         ..save()
@@ -1702,7 +1700,7 @@ void main() {
           // The points just after the label bottom right corner should be part of the border.
           includes: <Offset>[
             labelBottomRightLocalToBorder + const Offset(1, 0),
-            labelBottomRightLocalToBorder + const Offset(1, 1),
+            labelBottomRightLocalToBorder + const Offset(1, -1),
           ],
         )
         ..restore(),
