Skip to content

[material_ui] Add supportingTextPadding to InputDecorator - #12769

Open
MohanadAbdallah-mv wants to merge 1 commit into
flutter:mainfrom
MohanadAbdallah-mv:port-183582
Open

[material_ui] Add supportingTextPadding to InputDecorator#12769
MohanadAbdallah-mv wants to merge 1 commit into
flutter:mainfrom
MohanadAbdallah-mv:port-183582

Conversation

@MohanadAbdallah-mv

@MohanadAbdallah-mv MohanadAbdallah-mv commented Sep 6, 2026

Copy link
Copy Markdown

This PR introduces the supportingTextPadding property to InputDecorator, InputDecoration, and InputDecorationThemeData.
While originally conceived as errorPadding, this property was renamed to supportingTextPadding during review to align with the Material Design 3 specification, as it controls the padding for the entire supporting text row (which includes helper text, error text, and counter widgets).
Additionally, this PR addresses layout, intrinsic sizing, and code consistency concerns raised during the review process:

Key Features & Refactors:

  1. Added supportingTextPadding: Allows complete, independent control over the padding of the supporting text row (helper/error/counter).
  2. Decoupled Layout Constraints: Introduced supportingTextConstraints in _layout() to bound the supporting text row independently of contentConstraints, ensuring custom paddings do not break or shift the layout of inline prefix/suffix widgets.
  3. Fixed Intrinsic Height Mismatches: Corrected computeMinIntrinsicHeight() to compute supportingTextWidth separately from the primary width deflation path, ensuring intrinsic height calculations accurately predict wrapped text heights.
  4. Unified Terminology: Renamed all legacy internal subtext references (e.g. _SubtextSize, _computeSubtextSizes, subtextHeight) to supportingText to match the public property name and the M3 spec.

List which issues are fixed by this PR. You must list at least one issue.
Port of #183582 which Fixes #175834

Pre-Review Checklist

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.

Footnotes

  1. Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling. 2

@github-actions github-actions Bot added p: material_ui triage-design Should be looked at in design triage labels Sep 6, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces the supportingTextPadding property to InputDecorator, InputDecoration, InputDecorationTheme, and InputDecorationThemeData to allow custom padding for the supporting text row, while renaming internal 'subtext' references to 'supportingText'. Feedback on these changes highlights that InputDecorationThemeData.lerp is missing interpolation for the new supportingTextPadding property, which is necessary for smooth theme transitions, and suggests adding a corresponding test case to verify this behavior.

Comment on lines 5677 to 5681
border: border ?? other.border,
constraints: constraints ?? other.constraints,
visualDensity: visualDensity ?? other.visualDensity,
supportingTextPadding: supportingTextPadding ?? other.supportingTextPadding,
);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The InputDecorationThemeData.lerp method is missing the interpolation for supportingTextPadding. Without this, transitions between different input decoration themes will not animate the supporting text padding smoothly.

Please update InputDecorationThemeData.lerp to include:

supportingTextPadding: EdgeInsetsGeometry.lerp(a?.supportingTextPadding, b?.supportingTextPadding, t),

Comment on lines +15887 to +15891
testWidgets('supportingTextPadding defined in InputDecorationTheme is used for supporting text', (
WidgetTester tester,
) async {
const themePaddingStart = 40.0;
const themePaddingEnd = 20.0;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Consider adding a test case to verify that InputDecorationThemeData.lerp correctly interpolates supportingTextPadding between two themes. This ensures that theme animations work as expected and prevents future regressions.

@MohanadAbdallah-mv

Copy link
Copy Markdown
Author

@dkwingsmt @Renzo-Olivares
This current PR is a port of #183582.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

p: material_ui triage-design Should be looked at in design triage

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Theme-level option to align error text with the text field border (remove default indent/padding)

1 participant