OutlineInputBorder: Fix label animation and gap rendering by shivanuj13 · Pull Request #182910 · flutter/flutter

shivanuj13 · 2026-02-25T21:41:45Z

Fixes the outline border appearing straight instead of rounded during the floating label animation by using gapPercentage in the corner arc sweep calculations.

Fixes #153387

Before the changes:

before.mp4

After the changes:

after.mp4

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
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.

Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the gemini-code-assist bot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.

gemini-code-assist

Code Review

This pull request fixes a rendering issue with OutlineInputBorder where the corners of the gap for the floating label would appear straight during animation. The changes correctly incorporate gapPercentage into the path calculations for the border gap, ensuring the corners are rounded throughout the animation. The fix looks mostly correct, but I've found a potential issue in the arc sweep calculation that might lead to incorrect animation behavior. Additionally, new tests have been added to cover this fix.

gemini-code-assist · 2026-02-25T21:48:20Z

      final double tlCornerArcSweep = math.acos(
-        clampDouble(1 - start / scaledRRect.tlRadiusX, 0.0, 1.0),
+        clampDouble((1 - start / tlRadiusX) * gapPercentage, 0.0, 1.0),
      );


The calculation for tlCornerArcSweep seems to have an extra multiplication by gapPercentage. The start argument to this method is already scaled by gapPercentage, so applying it again here might result in a non-linear and incorrect animation for the corner arc. The argument to acos should likely be clampDouble(1 - start / tlRadiusX, 0.0, 1.0). This would make the sweep angle animate smoothly from 0 to its final value as gapPercentage goes from 0 to 1.

final double tlCornerArcSweep = math.acos( clampDouble(1 - start / tlRadiusX, 0.0, 1.0), );

gemini-code-assist · 2026-02-25T21:48:20Z

-      path.addArc(trCorner, trCornerArcStart + sweep, trCornerArcSweep - sweep);
+    } else if (start + extent < scaledRRect.width) {
+      final double dx = scaledRRect.width - (start + extent);
+      final double sweep = math.asin(clampDouble((1 - dx / trRadiusX) * gapPercentage, 0.0, 1.0));


Similar to the comment on tlCornerArcSweep, this calculation for sweep also seems to have an extra multiplication by gapPercentage. The values start and extent used in dx are already dependent on gapPercentage. This might cause an incorrect animation curve for the corner. I believe removing the multiplication would produce the intended smooth animation.

final double sweep = math.asin(clampDouble(1 - dx / trRadiusX, 0.0, 1.0));

flutter-dashboard · 2026-03-24T19:21:49Z

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

dkwingsmt

Thank you so much for working on this! The logic change in this PR is really delicate and I appreciate it.

However, I noticed that this implementation actually changes the current behavior by introducing a horizontal "sliding" of the gap: By multiplying start by gapPercentage, the entire gap appears to slide along the X-axis as it animates, rather than expanding from a fixed starting point. Typically, the gap should stay anchored at its intended position (gapStart - gapPadding) and grow to the right as the extent increases.

The reason we see a straight line before your fix is that when the gap is still very small (and ends inside the corner radius), the original code jumps straight to scaledRRect.top to start the next segment. Instead of shifting X coordinates, we should calculate the exact point on the arc where the gap ends and "resume" the arc from that specific angle.

Instead of modifying start or adding offsets to moveTo, I recommend keeping the original start and extent logic but refining how we "resume" the path. If gapEnd falls within a radius, we can calculate the specific resumeAngle and use addArc to draw the remaining part of that corner. This would keep the gap fixed in place and avoid the jumpy behavior.

shivanuj13 · 2026-04-02T11:21:02Z

Thanks a lot for the review.

I’ve updated the fix so that the gap now stays anchored at its original start position, and only the gap width (extent) animates, as intended.

VID_20260402_163731.mp4

dkwingsmt

LGTM except for the unit test failures.

dkwingsmt · 2026-04-28T05:07:18Z

-      final double sweep = math.asin(clampDouble(1 - dx / scaledRRect.trRadiusX, 0.0, 1.0));
-      path.addArc(trCorner, trCornerArcStart + sweep, trCornerArcSweep - sweep);
+    } else if (gapEnd < scaledRRect.width) {
+      final double dx = scaledRRect.width - gapEnd;


You can't replace outerWidth with anything related to scaledRRect, because scaledRRect comes from inflating outer by borderSide.strokeOffset / 2. This is also the cause to the unit test failures.

justinmc

This looks great, kudos @shivanuj13. LGTM if CI passes.

@dkwingsmt What are you using as a reference for how this animation should look? I was looking at the web implementation and it looks very slightly different than what I see in this PR in the last comment. The web one appears to expand the gap from a central point, whereas this PR expands the gap from left to right. Not a big deal though.

dkwingsmt · 2026-04-28T17:45:14Z

@justinmc Oh! Thank you so much for checking for me. I was just thinking about what the original issue says. I really should have checked the M3 website. Well this PR is still an improvement.

shivanuj13 · 2026-05-03T09:04:48Z

I was comparing gapEnd to scaledRRect.width, but scaledRRect is built off outer.inflate(borderSide.strokeOffset / 2), so its width isn’t the same horizontal ruler as gapStart / start / extent from InputDecorator.

Now I pass outer.width into _gapBorderPath and only use it for the gapEnd checks and dx

I also hadn’t checked the web version earlier. Please let me know if we should open a separate issue for this behavior difference. This PR is mainly addressing the original problem where, during label animation, the outline border appears straight instead of staying rounded throughout the animation.

dkwingsmt · 2026-05-07T22:18:10Z

This PR is definitely a great improvement as it fixes an obvious bug. We should land this PR as it is (after the code freeze is lifted). Thank you very much for the contribution.

The issue mentioned by @justinmc should be filed as a separate issue, where we might want to discuss whether to apply the change by default or add a property for backward compatibility.

@shivanuj13 You're not required to file the issue, and definitely not required to address it. But doing so will definitely be appreciated. :)

dkwingsmt · 2026-05-07T22:20:26Z

Analyser issue:


[2026-05-07 15:17:44.861156] [STDOUT] stdout:    info • Omit the type annotation on a local variable when the type is obvious. Try removing the type annotation • packages/flutter/test/material/input_decorator_test.dart:1815:13 • omit_obvious_local_variable_types
[2026-05-07 15:17:44.861281] [STDOUT] stdout:    info • Omit the type annotation on a local variable when the type is obvious. Try removing the type annotation • packages/flutter/test/material/input_decorator_test.dart:1816:13 • omit_obvious_local_variable_types
[2026-05-07 15:17:44.861306] [STDOUT] stdout:    info • The value of the argument is redundant because it matches the default value. Try removing the argument • packages/flutter/test/material/input_decorator_test.dart:2145:21 • avoid_redundant_argument_values
[2026-05-07 15:17:44.861387] [STDOUT] stdout:    info • The value of the argument is redundant because it matches the default value. Try removing the argument • packages/flutter/test/material/input_decorator_test.dart:2145:39 • avoid_redundant_argument_values

https://ci.chromium.org/ui/p/flutter/builders/try/Linux%20analyzer_benchmark/26008/overview

shivanuj13 · 2026-05-10T15:30:34Z

Thank you @dkwingsmt for guiding me throughout this PR. I have fixed the analyser issue.

dkwingsmt · 2026-05-20T18:16:18Z

+          ..path(style: PaintingStyle.stroke)
+          ..restore(),
+      );
+    }, skip: isBrowser);


analyzer error:

/b/s/w/ir/x/w/flutter/packages/flutter/test/material/input_decorator_test.dart:1831: skip test without a justification comment.

…uring the floating label animation

…sibility during transitions

…ods for cleaner corner arc calculations

…terWidth parameter for improved border calculations

…tor_test.dart

dkwingsmt

Re-LGTM for the record.

dkwingsmt · 2026-06-10T17:51:04Z

Thanks for your contribution! This PR has reached completion, however we're not able to merge this PR for the moment due to the Material/Cupertino code freeze (#184093). As soon as the decoupling is complete, we will post a way to port this PR to the new packages to land. In the meantime, I'll convert this PR to a draft and apply a label so that we can quickly find it when the freeze is lifted.

Piinks · 2026-06-24T20:31:38Z

I've marked this PR as not ready to port to flutter/packages yet.
We'll provide instructions to move this change over to material_ui/cupertino_ui once ready to receive PRs. Thank you!

Piinks · 2026-09-09T21:53:44Z

This PR is now ready to port over to flutter/packages! 🥳
See guidance and instructions in #188444

github-actions Bot added framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages labels Feb 25, 2026

gemini-code-assist Bot reviewed Feb 25, 2026

View reviewed changes

shivanuj13 force-pushed the master branch from 7c0b215 to 4624b33 Compare February 25, 2026 22:14

dkwingsmt requested review from dkwingsmt and justinmc March 4, 2026 19:18

shivanuj13 force-pushed the master branch from c1e2525 to 8c9054b Compare March 24, 2026 19:52

dkwingsmt reviewed Apr 1, 2026

View reviewed changes

shivanuj13 force-pushed the master branch from 8c9054b to 6d8254d Compare April 2, 2026 11:08

shivanuj13 requested a review from dkwingsmt April 6, 2026 09:55

dkwingsmt added the CICD Run CI/CD label Apr 8, 2026

github-actions Bot removed the CICD Run CI/CD label Apr 24, 2026

dkwingsmt added the CICD Run CI/CD label Apr 24, 2026

dkwingsmt reviewed Apr 28, 2026

View reviewed changes

justinmc previously approved these changes Apr 28, 2026

View reviewed changes

shivanuj13 dismissed justinmc’s stale review via 909d5e9 May 3, 2026 08:58

shivanuj13 force-pushed the master branch from 15f89d4 to 909d5e9 Compare May 3, 2026 08:58

github-actions Bot removed the CICD Run CI/CD label May 3, 2026

dkwingsmt self-requested a review May 6, 2026 18:20

dkwingsmt added the CICD Run CI/CD label May 7, 2026

shivanuj13 force-pushed the master branch from 909d5e9 to b331034 Compare May 10, 2026 15:27

github-actions Bot removed the CICD Run CI/CD label May 10, 2026

dkwingsmt added the CICD Run CI/CD label May 13, 2026

dkwingsmt reviewed May 20, 2026

View reviewed changes

Anuj Kumar and others added 9 commits June 1, 2026 13:52

fix: fixes the outline border appearing straight instead of rounded d…

d5593a8

…uring the floating label animation

chore: dart format

9b0bc2d

fix: improve corner arc animation in OutlineInputBorder for better vi…

3cc8555

…sibility during transitions

chore: dart format

7837f22

refactor: remove gapPercentage parameter from OutlineInputBorder meth…

9c08229

…ods for cleaner corner arc calculations

chore: dart format

0b5bfc0

fix: update _gapBorderPath method in OutlineInputBorder to include ou…

b7cf9b5

…terWidth parameter for improved border calculations

chore: remove redundent type annotation

f12a9d6

fix: add issue reference for skipping test on browser in input_decora…

329f76a

…tor_test.dart

shivanuj13 force-pushed the master branch from b331034 to 329f76a Compare June 1, 2026 08:30

github-actions Bot removed the CICD Run CI/CD label Jun 1, 2026

dkwingsmt self-requested a review June 3, 2026 18:34

dkwingsmt added the CICD Run CI/CD label Jun 3, 2026

dkwingsmt approved these changes Jun 10, 2026

View reviewed changes

dkwingsmt marked this pull request as draft June 10, 2026 17:51

dkwingsmt added the waiting for code freeze This PR is waiting for a code freeze to resolve. label Jun 10, 2026

Piinks added the Decoupling: Not ready to port yet Instructions will be provided when this is ready to move to flutter/packages. label Jun 24, 2026

Conversation

shivanuj13 commented Feb 25, 2026

Pre-launch Checklist

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Feb 25, 2026

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard Bot commented Mar 24, 2026

Uh oh!

dkwingsmt left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shivanuj13 commented Apr 2, 2026

Uh oh!

dkwingsmt left a comment

Choose a reason for hiding this comment

Uh oh!

dkwingsmt Apr 28, 2026

Choose a reason for hiding this comment

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

dkwingsmt commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shivanuj13 commented May 3, 2026

Uh oh!

dkwingsmt commented May 7, 2026

Uh oh!

dkwingsmt commented May 7, 2026

Uh oh!

shivanuj13 commented May 10, 2026

Uh oh!

dkwingsmt May 20, 2026

Choose a reason for hiding this comment

Uh oh!

dkwingsmt left a comment

Choose a reason for hiding this comment

Uh oh!

dkwingsmt commented Jun 10, 2026

Uh oh!

Piinks commented Jun 24, 2026

Uh oh!

Piinks commented Sep 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dkwingsmt left a comment •

edited

Loading

dkwingsmt commented Apr 28, 2026 •

edited

Loading