fix: OutlineInputBorder not respecting BorderSide stroke alignment by ikramhasan · Pull Request #180487 · flutter/flutter

ikramhasan · 2026-01-04T18:19:48Z

This PR fixes OutlineInputBorder to properly respect the strokeAlign property of BorderSide. Previously, the border was always drawn as if strokeAlign was set to strokeAlignInside, regardless of the actual value specified.

Fixes: #179850

Before:

After:

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.

gemini-code-assist

Code Review

This pull request modifies OutlineInputBorder to respect the strokeAlign property of BorderSide. The changes in packages/flutter/lib/src/material/input_border.dart use strokeInset and strokeOffset to adjust the border's dimensions and path based on the alignment. New tests have been added in packages/flutter/test/material/input_decorator_test.dart to verify the behavior for different strokeAlign values. My review includes a suggestion to refactor the new tests to reduce code duplication and improve maintainability, and a minor suggestion to improve test clarity.

gemini-code-assist · 2026-01-04T18:21:34Z

packages/flutter/test/material/input_decorator_test.dart

+    testWidgets(
+      'OutlineInputBorder with BorderSide.strokeAlignOutside should draw border outside bounds',
+      (WidgetTester tester) async {
+        const borderWidth = 4.0;
+        const borderRadius = 12.0;
+        const inputDecoratorWidth = 800.0;
+        const inputDecoratorHeight = 56.0;
+
+        await tester.pumpWidget(
+          buildInputDecorator(
+            decoration: const InputDecoration(
+              filled: true,
+              fillColor: Color(0xFF00FF00),
+              enabledBorder: OutlineInputBorder(
+                borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
+                borderSide: BorderSide(
+                  width: borderWidth,
+                  strokeAlign: BorderSide.strokeAlignOutside,
+                ),
+              ),
+            ),
+          ),
+        );
+
+        final RenderBox box = tester.renderObject(find.byType(InputDecorator));
+
+        expect(
+          box,
+          paints..rrect(
+            style: PaintingStyle.stroke,
+            strokeWidth: borderWidth,
+            rrect: RRect.fromLTRBR(
+              -borderWidth / 2,
+              -borderWidth / 2,
+              inputDecoratorWidth + borderWidth / 2,
+              inputDecoratorHeight + borderWidth / 2,
+              const Radius.circular(borderRadius + borderWidth / 2),
+            ),
+          ),
+        );
+      },
+    );
+
+    testWidgets(
+      'OutlineInputBorder with BorderSide.strokeAlignCenter should draw border between bounds',
+      (WidgetTester tester) async {
+        const borderWidth = 4.0;
+        const borderRadius = 12.0;
+        const inputDecoratorWidth = 800.0;
+        const inputDecoratorHeight = 56.0;
+
+        await tester.pumpWidget(
+          buildInputDecorator(
+            decoration: const InputDecoration(
+              filled: true,
+              fillColor: Color(0xFF00FF00),
+              enabledBorder: OutlineInputBorder(
+                borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
+                borderSide: BorderSide(
+                  width: borderWidth,
+                  strokeAlign: BorderSide.strokeAlignCenter,
+                ),
+              ),
+            ),
+          ),
+        );
+
+        final RenderBox box = tester.renderObject(find.byType(InputDecorator));
+
+        expect(
+          box,
+          paints..rrect(
+            style: PaintingStyle.stroke,
+            strokeWidth: borderWidth,
+            rrect: RRect.fromLTRBR(
+              0,
+              0,
+              inputDecoratorWidth,
+              inputDecoratorHeight,
+              const Radius.circular(borderRadius),
+            ),
+          ),
+        );
+      },
+    );
+
+    testWidgets(
+      'OutlineInputBorder with BorderSide.strokeAlignInside should draw border inside bounds',
+      (WidgetTester tester) async {
+        const borderWidth = 4.0;
+        const borderRadius = 12.0;
+        const inputDecoratorWidth = 800.0;
+        const inputDecoratorHeight = 56.0;
+
+        await tester.pumpWidget(
+          buildInputDecorator(
+            decoration: const InputDecoration(
+              filled: true,
+              fillColor: Color(0xFF00FF00),
+              enabledBorder: OutlineInputBorder(
+                borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
+                borderSide: BorderSide(width: borderWidth),
+              ),
+            ),
+          ),
+        );
+
+        final RenderBox box = tester.renderObject(find.byType(InputDecorator));
+
+        expect(
+          box,
+          paints..rrect(
+            style: PaintingStyle.stroke,
+            strokeWidth: borderWidth,
+            rrect: RRect.fromLTRBR(
+              borderWidth / 2,
+              borderWidth / 2,
+              inputDecoratorWidth - borderWidth / 2,
+              inputDecoratorHeight - borderWidth / 2,
+              const Radius.circular(borderRadius - borderWidth / 2),
+            ),
+          ),
+        );
+      },
+    );


These three tests for strokeAlign are very similar and contain duplicated code. To improve maintainability and readability, consider refactoring them. One way to do this is to create a group for these tests and use a shared helper function to reduce boilerplate code.

For example, you could create a helper function like this:

Future<void> _testStrokeAlign({ required WidgetTester tester, required double strokeAlign, required RRect expectedRRect, }) async { const borderWidth = 4.0; const borderRadius = 12.0; const inputDecoratorWidth = 800.0; const inputDecoratorHeight = 56.0; await tester.pumpWidget( buildInputDecorator( decoration: InputDecoration( filled: true, fillColor: const Color(0xFF00FF00), enabledBorder: OutlineInputBorder( borderRadius: const BorderRadius.all(Radius.circular(borderRadius)), borderSide: BorderSide( width: borderWidth, strokeAlign: strokeAlign, ), ), ), ), ); final RenderBox box = tester.renderObject(find.byType(InputDecorator)); expect( box, paints..rrect( style: PaintingStyle.stroke, strokeWidth: borderWidth, rrect: expectedRRect, ), ); }

Then, each test would become a simple call to this helper with the specific parameters.

References

The style guide emphasizes optimizing for readability (line 29). While line 30 refers to state, the principle of avoiding duplication is also applicable to test code. Refactoring these tests would align with these principles by making the test suite cleaner and easier to maintain. ^(link)

gemini-code-assist · 2026-01-04T18:21:34Z

packages/flutter/test/material/input_decorator_test.dart

+              fillColor: Color(0xFF00FF00),
+              enabledBorder: OutlineInputBorder(
+                borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
+                borderSide: BorderSide(width: borderWidth),


For clarity and to make the test more robust against future changes to default values, it's better to explicitly set strokeAlign: BorderSide.strokeAlignInside here, even though it's the default. This makes the test's intent clearer.

borderSide: BorderSide(width: borderWidth, strokeAlign: BorderSide.strokeAlignInside),

…a single function for clarity

QuncCccccc

Thanks for the contribution! I think the change makes sense to me but it seems in the PR description, it shows me the label (the "inside", "center" and "outside") is no longer vertically centered and "outside" label is a bit lower than the border line. We might don't want it to change.

ikramhasan · 2026-01-17T00:36:39Z

Thanks for the contribution! I think the change makes sense to me but it seems in the PR description, it shows me the label (the "inside", "center" and "outside") is no longer vertically centered and "outside" label is a bit lower than the border line. We might don't want it to change.

I actually made a comment regarding this in the issue this PR references. But to note again, the label alignment has not changed. It looks this way because of the decoration moving up or down. I'm not sure if the label is supposed to align with the textfield, or the decoration. Need confirmation on this.

QuncCccccc

I'm not sure if the label is supposed to align with the textfield, or the decoration. Need confirmation on this.

Yes, the label should align with the border and keep vertically centered.

ikramhasan · 2026-02-03T21:55:23Z

Hey @QuncCccccc, sorry for the late update. I updated the code to make sure the label aligns with the decoration now.

Before	After

QuncCccccc

Nice fix:) LGTM. Thank you!

victorsanni

Thanks for the fix!

auto-submit · 2026-02-07T00:15:12Z

autosubmit label was removed for flutter/flutter/180487, because The base commit of the PR is older than 7 days and can not be merged. Please merge the latest changes from the main into this branch and resubmit the PR.

…ignment (flutter/flutter#180487)

Roll Flutter from e8f9dc50356d to 9bda20a11f1e (34 revisions) flutter/flutter@e8f9dc5...9bda20a 2026-02-10 [email protected] Remove Material import from focus_traversal_test.dart (flutter/flutter#180994) 2026-02-10 [email protected] Roll Skia from 6e217430c052 to cffb3bf918df (1 revision) (flutter/flutter#182131) 2026-02-10 [email protected] Encourage splitting large test files in testing documentation 2 (flutter/flutter#182051) 2026-02-10 [email protected] refactor: migrate CupertinoPageTransitionsBuilder to cupertino folder (flutter/flutter#179776) 2026-02-10 [email protected] Delete the last remaining skia only fragment shader tests (flutter/flutter#182127) 2026-02-10 [email protected] [a11y][android] Set new CheckState APIs for android API 36 (flutter/flutter#182113) 2026-02-10 [email protected] Add missing dependencies to framework_tests_misc_leak_tracking (flutter/flutter#181929) 2026-02-10 [email protected] Roll Dart SDK from eee0e2e11174 to 69eb951f8f7e (2 revisions) (flutter/flutter#182128) 2026-02-10 [email protected] Marks Linux_android_emu android_display_cutout to be flaky (flutter/flutter#181901) 2026-02-10 [email protected] Bump Dart to 3.10 (flutter/flutter#174066) 2026-02-10 [email protected] Roll Skia from d4b7e24a209b to 6e217430c052 (6 revisions) (flutter/flutter#182126) 2026-02-09 [email protected] Intercept UIScene device log and print a guided warning (flutter/flutter#181515) 2026-02-09 [email protected] Introduce ScrollCacheExtent and also fixes unbound shrinkwrap cache ex… (flutter/flutter#181092) 2026-02-09 [email protected] [Android] Add mechanism for setting Android engine flags via Android manifest (take 2) (flutter/flutter#181632) 2026-02-09 [email protected] Fix wrong comment about default impeller value (flutter/flutter#181831) 2026-02-09 [email protected] fix build fail for wayland only platform (flutter/flutter#182057) 2026-02-09 [email protected] [AGP 9] Added Warning Against Updating to AGP 9 (flutter/flutter#181977) 2026-02-09 [email protected] Updated Shaderc dep (flutter/flutter#180976) 2026-02-09 [email protected] Refactor accessibility guidelines out to widget layer (flutter/flutter#181672) 2026-02-09 [email protected] Roll Skia from 68dff53238e5 to d4b7e24a209b (2 revisions) (flutter/flutter#182087) 2026-02-09 [email protected] fix: OutlineInputBorder not respecting BorderSide stroke alignment (flutter/flutter#180487) 2026-02-09 [email protected] Adds opengles to engine dart tests (flutter/flutter#181933) 2026-02-09 [email protected] Add command to build a Swift Package for Add to App and generate FlutterPluginRegistrant (flutter/flutter#181224) 2026-02-09 [email protected] Remove unused constant in `bundle.dart` (flutter/flutter#182023) 2026-02-09 [email protected] Roll Fuchsia Linux SDK from iqtwdXlgKIyZkL5Li... to 7BGf7mPQvgLi7Axb6... (flutter/flutter#182082) 2026-02-09 [email protected] Remove unused getters in `user_messages.dart` (flutter/flutter#181867) 2026-02-09 [email protected] Roll Packages from 7805d3e to 3d5eaa5 (3 revisions) (flutter/flutter#182083) 2026-02-09 [email protected] Roll Skia from 5d891cd7fb7f to 68dff53238e5 (1 revision) (flutter/flutter#182080) 2026-02-09 [email protected] Update example description (flutter/flutter#182067) 2026-02-09 [email protected] Roll Dart SDK from 965b51c219d3 to eee0e2e11174 (1 revision) (flutter/flutter#182073) 2026-02-09 [email protected] Roll Skia from 9533d7533d59 to 5d891cd7fb7f (6 revisions) (flutter/flutter#182070) 2026-02-09 [email protected] Add a new flutter cli command, running-apps, using mDNS app discovery (flutter/flutter#180098) 2026-02-09 [email protected] Roll Skia from b7db9f35f0f2 to 9533d7533d59 (2 revisions) (flutter/flutter#182069) 2026-02-08 [email protected] Improve FlWindowMonitor API (flutter/flutter#181885) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 ...

…lutter#180487) This PR fixes `OutlineInputBorder` to properly respect the strokeAlign property of `BorderSide`. Previously, the border was always drawn as if strokeAlign was set to strokeAlignInside, regardless of the actual value specified. Fixes: flutter#179850 Before: <img width="1654" height="444" alt="image" src="proxy.php?url=https://github.com/user-attachments/assets/98cade3a-34d5-4891-9d2e-2071d461f2b5" /> After: <img width="887" height="241" alt="image" src="proxy.php?url=https://github.com/user-attachments/assets/11ff3b3e-013f-4a7d-aff5-f21fc64e3e6c" /> ## 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. - [x] All existing and new tests are passing. --------- Co-authored-by: Victor Sanni <[email protected]>

fix: OutlineInputBorder not respecting BorderSide stroke alignment

9dc1841

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jan 4, 2026

gemini-code-assist bot reviewed Jan 4, 2026

View reviewed changes

ikramhasan added 2 commits January 5, 2026 00:30

refactor: Consolidate OutlineInputBorder stroke alignment tests into …

6eb8453

…a single function for clarity

refactor: run dart format

85747da

ikramhasan mentioned this pull request Jan 5, 2026

OutlineInputBorder doesn't respect BorderSide's strokeAlign #179850

Closed

dkwingsmt requested a review from victorsanni January 7, 2026 19:38

victorsanni requested review from QuncCccccc, bleroux and huycozy January 8, 2026 19:56

QuncCccccc reviewed Jan 17, 2026

View reviewed changes

QuncCccccc reviewed Jan 20, 2026

View reviewed changes

fix: align labelText with decoration stroke

65d723f

QuncCccccc approved these changes Feb 5, 2026

View reviewed changes

victorsanni approved these changes Feb 7, 2026

View reviewed changes

victorsanni added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 7, 2026

auto-submit bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 7, 2026

victorsanni and others added 2 commits February 6, 2026 16:35

Merge branch 'master' into i_180002

d5a3035

Merge branch 'master' into i_180002

a35e7ba

victorsanni added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2026

auto-submit bot added this pull request to the merge queue Feb 9, 2026

Merged via the queue into flutter:master with commit a82275c Feb 9, 2026
73 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 9, 2026

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 10, 2026

a82275c57 fix: OutlineInputBorder not respecting BorderSide stroke al…

4574651

…ignment (flutter/flutter#180487)

engine-flutter-autoroll mentioned this pull request Feb 10, 2026

Roll Flutter from e8f9dc50356d to 9bda20a11f1e (34 revisions) flutter/packages#10992

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: OutlineInputBorder not respecting BorderSide stroke alignment#180487

fix: OutlineInputBorder not respecting BorderSide stroke alignment#180487
auto-submit[bot] merged 6 commits intoflutter:masterfrom
ikramhasan:i_180002

ikramhasan commented Jan 4, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Jan 4, 2026

Uh oh!

gemini-code-assist bot Jan 4, 2026

Uh oh!

QuncCccccc left a comment

Uh oh!

ikramhasan commented Jan 17, 2026

Uh oh!

QuncCccccc left a comment

Uh oh!

ikramhasan commented Feb 3, 2026 •

edited

Loading

Uh oh!

QuncCccccc left a comment

Uh oh!

victorsanni left a comment

Uh oh!

auto-submit bot commented Feb 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

ikramhasan commented Jan 4, 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 Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

ikramhasan commented Jan 17, 2026

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

ikramhasan commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

victorsanni left a comment

Choose a reason for hiding this comment

Uh oh!

auto-submit bot commented Feb 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ikramhasan commented Feb 3, 2026 •

edited

Loading