Fix InputDecorator label padding #173344

bleroux · 2025-08-06T13:12:02Z

Description

This PR fixes the label padding for an InputDecorator with prefixIcon and/or suffixIcon.

Before

The label was shorter than the available space because InputDecoration.contentPadding.horizontal was applied even when prefixIcon and suffixIcon were defined. The icons width replaces the corresponding contentPadding, so both should not be used at the same time to compute the available space.

After

The label takes all the available space.

Related Issue

Fixes Label padding is wrong for InputDecorator with prefixIcon and/or suffixIcon

Tests

Adds 1 test.

gemini-code-assist

Code Review

This pull request effectively addresses the label padding issue in InputDecorator when prefixIcon or suffixIcon are present. The logic change in packages/flutter/lib/src/material/input_decorator.dart is correct, ensuring that the label's available width is calculated properly by using the icon's width instead of the content padding when an icon is defined. The newly added test in packages/flutter/test/material/input_decorator_test.dart is comprehensive and validates the fix for both filled and outlined decorators. Additionally, the unrelated but beneficial cleanup in packages/flutter/lib/src/material/dropdown_menu.dart improves code readability by correcting a misleading variable name. Overall, the changes are well-implemented and improve the codebase.

justinmc

LGTM 👍

I've started the Google tests in case this breaks anything, but I'd expect there to only be acceptable image diff test breakages if so.

justinmc · 2025-08-06T16:03:14Z

packages/flutter/lib/src/material/dropdown_menu.dart

        continue;
      }
-      final double maxIntrinsicWidth = child.getMinIntrinsicWidth(height);
+      final double minIntrinsicWidth = child.getMinIntrinsicWidth(height);


Very suspicious naming here, good catch.

justinmc · 2025-08-06T16:05:40Z

packages/flutter/lib/src/material/input_decorator.dart

-                contentPadding.horizontal +
-                prefixIconSize.width +
-                suffixIconSpace),
+                (prefixIcon == null ? contentPadding.start : prefixIconSize.width) +
+                (suffixIcon == null ? contentPadding.end : suffixIconSpace)),


Makes sense.

justinmc · 2025-08-06T16:06:31Z

packages/flutter/test/material/input_decorator_test.dart

+      );
+
+      // When suffixIcon and/or prefixIcon are set, the corresponding horizontal
+      // padding is 52 (48 for the icon + 4 input gap based on M3 spec).


Thanks for explaining the details here.

bleroux · 2025-08-08T15:13:03Z

I've started the Google tests in case this breaks anything, but I'd expect there to only be acceptable image diff test breakages if so.

@justinmc Looks like there are some Google tests failures 😅
Let me know if some look suspicious. 🤞

justinmc · 2025-08-08T17:49:54Z

One thing that might be a bug:

master	fix_input_decorator_hint_padding

In some image diffs, when the label is floating, I see that the outline has lost its top-right corner. This only seems to happen when there is a suffix present.

Otherwise the majority of image diff breakages seem to be clear improvements, so that part is great.

Repro code

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(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Padding(
          padding: EdgeInsetsGeometry.symmetric(horizontal: 500.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const <Widget>[
              TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
                  suffixIcon: Icon(Icons.clear),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

bleroux · 2025-08-11T13:40:05Z

@justinmc Thanks for the breakage description and the nice repro. 🙏

I updated the PR with a small fix for this problem.
I also updated one existing test which was failing due to rounding error. When using a MaterialApp, the rounding does not appear and the test is easier to debug because text metrics are similar to M3 spec (using a MaterialApp sets proper fonts).

justinmc · 2025-08-13T18:41:21Z

Thanks! I've rerun the Google tests.

justinmc

All failing tests look like improvements now, let's land it! Thanks for fixing the border length failures.

## Description This PR fixes the label padding for an InputDecorator with prefixIcon and/or suffixIcon. # Before The label was shorter than the available space because `InputDecoration.contentPadding.horizontal` was applied even when `prefixIcon` and `suffixIcon` were defined. The icons width replaces the corresponding `contentPadding`, so both should not be used at the same time to compute the available space. <img width="269" height="61" alt="image" src="https://github.com/user-attachments/assets/e1433ffb-8f17-46fe-9a65-6b9a504ef043" /> # After The label takes all the available space. <img width="269" height="61" alt="image" src="https://github.com/user-attachments/assets/12e8d087-c75b-48c9-8df4-1b11207c0e73" /> ## Related Issue Fixes [Label padding is wrong for InputDecorator with prefixIcon and/or suffixIcon ](flutter#173341) ## Tests Adds 1 test.

rydmike · 2025-08-15T09:07:00Z

Nice and thanks @bleroux! I have a use case that has been affected by this issue (using fixed amount of chars with both leading and trailing icon) and I had to make the field longer than it really needed to be to displays all chars. I always wondered what caused it, but never reported it. Now I know and that the fix is on the way. Awesome work as always, thanks 💙 😃

flutter/flutter@f4334d2...52af7a5 2025-08-15 [email protected] Roll Packages from 09533b7 to 5c52c55 (6 revisions) (flutter/flutter#173854) 2025-08-15 [email protected] Roll Skia from 46ec77ae3954 to 5654ac32ede0 (1 revision) (flutter/flutter#173848) 2025-08-15 [email protected] Roll Skia from 162f47d6b6bd to 46ec77ae3954 (2 revisions) (flutter/flutter#173833) 2025-08-15 [email protected] Roll Dart SDK from c7faab270f27 to cc008dc8e7aa (2 revisions) (flutter/flutter#173826) 2025-08-15 [email protected] Roll Skia from ad5d04000101 to 162f47d6b6bd (5 revisions) (flutter/flutter#173822) 2025-08-15 [email protected] Update the RBE configuration for the recent Clang update (flutter/flutter#173803) 2025-08-15 [email protected] Stop writing legacy `FLUTTER_ROOT/version` file (by default?) (flutter/flutter#172793) 2025-08-15 [email protected] Remove `luci_flags.parallel_download_builds` and friends (flutter/flutter#173799) 2025-08-14 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Predictive back route transitions by default (#165832)" (flutter/flutter#173809) 2025-08-14 [email protected] Roll Skia from dca5f05fee87 to ad5d04000101 (8 revisions) (flutter/flutter#173798) 2025-08-14 [email protected] [web] Cleanup usages of deprecated `routeUpdated` message (flutter/flutter#173782) 2025-08-14 [email protected] Make sure that DataTable, DataColumn, DataRow, and DataCell don't crash in 0x0 environment (flutter/flutter#173515) 2025-08-14 [email protected] Make sure that a TableRowInkWell doesn't crash in 0x0 environment (flutter/flutter#173627) 2025-08-14 [email protected] Make sure that a DatePickerDialog doesn't crash in 0x0 environment (flutter/flutter#173677) 2025-08-14 [email protected] Return result of setting OpenGL contexts back to Flutter (flutter/flutter#173757) 2025-08-14 [email protected] Read `bin/cache/flutter.version.json` instead of `version` for `flutter_gallery` (flutter/flutter#173797) 2025-08-14 [email protected] Predictive back route transitions by default (flutter/flutter#165832) 2025-08-14 [email protected] feat: add onLongPressUp callback to InkWell widget (flutter/flutter#173221) 2025-08-14 [email protected] Roll Dart SDK from 214a7f829913 to c7faab270f27 (1 revision) (flutter/flutter#173792) 2025-08-14 [email protected] Add error handling for `Element` lifecycle user callbacks (flutter/flutter#173148) 2025-08-14 [email protected] Roll Fuchsia Linux SDK from I1TfNmsqTp7t3rO8e... to zWRpLglb48zC1vZLv... (flutter/flutter#173784) 2025-08-14 [email protected] [Range slider] Tap on active range, the thumb closest to the mouse cursor should move to the cursor position. (flutter/flutter#173725) 2025-08-14 [email protected] Roll Packages from 6cb9113 to 09533b7 (4 revisions) (flutter/flutter#173789) 2025-08-14 [email protected] Implements the Android native stretch effect as a fragment shader (Impeller-only). (flutter/flutter#169293) 2025-08-14 [email protected] Sync `CHANGELOG.md` (3.35 -> `master`) (flutter/flutter#173790) 2025-08-14 [email protected] [VPAT][A11y] Announce Autocomplete search results status (flutter/flutter#173480) 2025-08-14 [email protected] Fix InputDecorator label padding (flutter/flutter#173344) 2025-08-14 [email protected] Fix default minimumSize in dropdownMenu when maximumSize is null (flutter/flutter#169438) 2025-08-14 [email protected] Thread sub-builders for every engine-uploading builder (flutter/flutter#173742) 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 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

## Description This PR fixes the label padding for an InputDecorator with prefixIcon and/or suffixIcon. # Before The label was shorter than the available space because `InputDecoration.contentPadding.horizontal` was applied even when `prefixIcon` and `suffixIcon` were defined. The icons width replaces the corresponding `contentPadding`, so both should not be used at the same time to compute the available space. <img width="269" height="61" alt="image" src="https://github.com/user-attachments/assets/e1433ffb-8f17-46fe-9a65-6b9a504ef043" /> # After The label takes all the available space. <img width="269" height="61" alt="image" src="https://github.com/user-attachments/assets/12e8d087-c75b-48c9-8df4-1b11207c0e73" /> ## Related Issue Fixes [Label padding is wrong for InputDecorator with prefixIcon and/or suffixIcon ](flutter#173341) ## Tests Adds 1 test.

…r#9832) flutter/flutter@f4334d2...52af7a5 2025-08-15 [email protected] Roll Packages from 09533b7 to 5c52c55 (6 revisions) (flutter/flutter#173854) 2025-08-15 [email protected] Roll Skia from 46ec77ae3954 to 5654ac32ede0 (1 revision) (flutter/flutter#173848) 2025-08-15 [email protected] Roll Skia from 162f47d6b6bd to 46ec77ae3954 (2 revisions) (flutter/flutter#173833) 2025-08-15 [email protected] Roll Dart SDK from c7faab270f27 to cc008dc8e7aa (2 revisions) (flutter/flutter#173826) 2025-08-15 [email protected] Roll Skia from ad5d04000101 to 162f47d6b6bd (5 revisions) (flutter/flutter#173822) 2025-08-15 [email protected] Update the RBE configuration for the recent Clang update (flutter/flutter#173803) 2025-08-15 [email protected] Stop writing legacy `FLUTTER_ROOT/version` file (by default?) (flutter/flutter#172793) 2025-08-15 [email protected] Remove `luci_flags.parallel_download_builds` and friends (flutter/flutter#173799) 2025-08-14 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Predictive back route transitions by default (#165832)" (flutter/flutter#173809) 2025-08-14 [email protected] Roll Skia from dca5f05fee87 to ad5d04000101 (8 revisions) (flutter/flutter#173798) 2025-08-14 [email protected] [web] Cleanup usages of deprecated `routeUpdated` message (flutter/flutter#173782) 2025-08-14 [email protected] Make sure that DataTable, DataColumn, DataRow, and DataCell don't crash in 0x0 environment (flutter/flutter#173515) 2025-08-14 [email protected] Make sure that a TableRowInkWell doesn't crash in 0x0 environment (flutter/flutter#173627) 2025-08-14 [email protected] Make sure that a DatePickerDialog doesn't crash in 0x0 environment (flutter/flutter#173677) 2025-08-14 [email protected] Return result of setting OpenGL contexts back to Flutter (flutter/flutter#173757) 2025-08-14 [email protected] Read `bin/cache/flutter.version.json` instead of `version` for `flutter_gallery` (flutter/flutter#173797) 2025-08-14 [email protected] Predictive back route transitions by default (flutter/flutter#165832) 2025-08-14 [email protected] feat: add onLongPressUp callback to InkWell widget (flutter/flutter#173221) 2025-08-14 [email protected] Roll Dart SDK from 214a7f829913 to c7faab270f27 (1 revision) (flutter/flutter#173792) 2025-08-14 [email protected] Add error handling for `Element` lifecycle user callbacks (flutter/flutter#173148) 2025-08-14 [email protected] Roll Fuchsia Linux SDK from I1TfNmsqTp7t3rO8e... to zWRpLglb48zC1vZLv... (flutter/flutter#173784) 2025-08-14 [email protected] [Range slider] Tap on active range, the thumb closest to the mouse cursor should move to the cursor position. (flutter/flutter#173725) 2025-08-14 [email protected] Roll Packages from 6cb9113 to 09533b7 (4 revisions) (flutter/flutter#173789) 2025-08-14 [email protected] Implements the Android native stretch effect as a fragment shader (Impeller-only). (flutter/flutter#169293) 2025-08-14 [email protected] Sync `CHANGELOG.md` (3.35 -> `master`) (flutter/flutter#173790) 2025-08-14 [email protected] [VPAT][A11y] Announce Autocomplete search results status (flutter/flutter#173480) 2025-08-14 [email protected] Fix InputDecorator label padding (flutter/flutter#173344) 2025-08-14 [email protected] Fix default minimumSize in dropdownMenu when maximumSize is null (flutter/flutter#169438) 2025-08-14 [email protected] Thread sub-builders for every engine-uploading builder (flutter/flutter#173742) 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 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

## Description This PR fixes the label padding for an InputDecorator with prefixIcon and/or suffixIcon. # Before The label was shorter than the available space because `InputDecoration.contentPadding.horizontal` was applied even when `prefixIcon` and `suffixIcon` were defined. The icons width replaces the corresponding `contentPadding`, so both should not be used at the same time to compute the available space. <img width="269" height="61" alt="image" src="https://github.com/user-attachments/assets/e1433ffb-8f17-46fe-9a65-6b9a504ef043" /> # After The label takes all the available space. <img width="269" height="61" alt="image" src="https://github.com/user-attachments/assets/12e8d087-c75b-48c9-8df4-1b11207c0e73" /> ## Related Issue Fixes [Label padding is wrong for InputDecorator with prefixIcon and/or suffixIcon ](flutter#173341) ## Tests Adds 1 test.

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Aug 6, 2025

gemini-code-assist bot reviewed Aug 6, 2025

View reviewed changes

bleroux requested a review from justinmc August 6, 2025 14:37

justinmc approved these changes Aug 6, 2025

View reviewed changes

bleroux requested a review from justinmc August 8, 2025 15:11

bleroux force-pushed the fix_input_decorator_hint_padding branch 3 times, most recently from 98f9dc2 to 294b7bd Compare August 11, 2025 12:54

bleroux added 2 commits August 13, 2025 14:44

Fix InputDecorator label padding

8820886

Fix end padding when label is floating

146a912

bleroux force-pushed the fix_input_decorator_hint_padding branch from 1cf09ca to 146a912 Compare August 13, 2025 12:44

justinmc approved these changes Aug 14, 2025

View reviewed changes

justinmc added the autosubmit Merge PR when tree becomes green via auto submit App label Aug 14, 2025

auto-submit bot added this pull request to the merge queue Aug 14, 2025

Merged via the queue into flutter:master with commit ee3551f Aug 14, 2025
75 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Aug 14, 2025

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

ee3551fbe Fix InputDecorator label padding (flutter/flutter#173344)

68688e4

engine-flutter-autoroll mentioned this pull request Aug 15, 2025

Roll Flutter from f4334d27934b to 3bf280c86fb9 (27 revisions) flutter/packages#9823

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

ee3551fbe Fix InputDecorator label padding (flutter/flutter#173344)

1a28732

engine-flutter-autoroll mentioned this pull request Aug 15, 2025

Roll Flutter from f4334d27934b to da5c047a13d7 (28 revisions) flutter/packages#9827

Closed

bleroux deleted the fix_input_decorator_hint_padding branch August 15, 2025 16:47

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

ee3551fbe Fix InputDecorator label padding (flutter/flutter#173344)

bc1c8e7

engine-flutter-autoroll mentioned this pull request Aug 15, 2025

Roll Flutter from f4334d27934b to 52af7a504025 (29 revisions) flutter/packages#9832

Merged

Piinks mentioned this pull request Aug 15, 2025

Flutter Notable Commits - 2025 #161460

Open

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 12, 2025

ee3551fbe Fix InputDecorator label padding (flutter/flutter#173344)

7fc751c

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix InputDecorator label padding #173344

Fix InputDecorator label padding #173344

Uh oh!

bleroux commented Aug 6, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

justinmc left a comment

Uh oh!

justinmc Aug 6, 2025

Uh oh!

justinmc Aug 6, 2025

Uh oh!

justinmc Aug 6, 2025

Uh oh!

bleroux commented Aug 8, 2025

Uh oh!

justinmc commented Aug 8, 2025

Uh oh!

bleroux commented Aug 11, 2025 •

edited

Loading

Uh oh!

justinmc commented Aug 13, 2025

Uh oh!

justinmc left a comment

Uh oh!

Uh oh!

rydmike commented Aug 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix InputDecorator label padding #173344

Fix InputDecorator label padding #173344

Uh oh!

Conversation

bleroux commented Aug 6, 2025

Description

Before

After

Related Issue

Tests

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

justinmc Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

justinmc Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

bleroux commented Aug 8, 2025

Uh oh!

justinmc commented Aug 8, 2025

Uh oh!

bleroux commented Aug 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinmc commented Aug 13, 2025

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rydmike commented Aug 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bleroux commented Aug 11, 2025 •

edited

Loading