Fix DropdownButtonFormField clips text when large text scale is used #159975

bleroux · 2024-12-09T14:32:23Z

Description

This PR fixes DropdownButtonFormField text being clipped when using a large text scale.

Before:

After:

This extend the fix from #107201 which does not work properly with Material 3 (because of TextStyle.height being set for M3 default text styles).

Related Issue

Fixes DropdownButtonFormField clips text when large text scale is used and useMaterial3 is true

Tests

Adds 1 test.
Updates 1 test.

bleroux · 2024-12-09T16:23:08Z

@justinmc This fix will help to land #159328 because part of #159328 is trying to not break the test that this PR updates.

Despite being titled "DropdownButtonFormField with isDense:true does not clip large scale text", the text in the previous test was clipped because of M3 line height so it leads to potential issues related to baseline (#159431).

With this fix, #159328, can be simplified and might be easier to land.

justinmc

LGTM 👍 . Good call doing this separately from #159328, hopefully it helps.

justinmc · 2024-12-10T01:02:09Z

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

    final double fontSize = _textStyle!.fontSize ?? Theme.of(context).textTheme.titleMedium!.fontSize!;
-    final double scaledFontSize = MediaQuery.textScalerOf(context).scale(fontSize);
+    final double lineHeight = _textStyle!.height ?? Theme.of(context).textTheme.titleMedium!.height ?? 1.0;
+    final double scaledFontSize = MediaQuery.textScalerOf(context).scale(fontSize * lineHeight);


Good catch, I guess we just missed the lineHeight before.

bleroux · 2024-12-10T15:05:05Z

@justinmc Are there many Google test failures?
My bet is that some existing code is relying on the bug as depending on the font size and the content of the dropdown (for instance no letters such as g,y,j, etc) the rendering might be better before.

justinmc · 2024-12-13T19:21:33Z

The Google test failures are relatively few, all of them are expected improvements that look just like your before/after screenshots, except for one where the dropdown appears to be open now when it was not before! Any thoughts on why that might happen? I wonder if it was a click that previously was outside of the dropdown, but now that the dropdown is slightly taller, the click hits it?

Also of note, I don't see any instances where a reduced horizontal space has resulted in a change in the text displayed in the dropdown, like I noticed in #159328. That's good.

If you can't think of any reason for the open dropdown, the next step might be for us to get in touch with the team that owns that test.

bleroux · 2024-12-13T19:40:41Z

Many thanks for the feedback. 🙏

except for one where the dropdown appears to be open now when it was not before! Any thoughts on why that might happen? I wonder if it was a click that previously was outside of the dropdown, but now that the dropdown is slightly taller, the click hits it?

The only reason which come to my mind is the one you described. This change can impact the dropdown height (normally only when bigger font or scale factor are used) so depending on how the test is written that can be a misclick, especially if there is several dropdowns in the same screen and each of them is taller than before.

This is not a high priority issue, so I will mark it as a draft and we can revisit this after the holidays.

Piinks · 2025-01-08T18:21:57Z

@bleroux could you rebase this to fix the current failures? Thanks!

justinmc · 2025-01-10T21:33:07Z

I'm planning to follow up on this next week. I've been trying to track down help and waiting to hear back.

justinmc · 2025-01-16T18:43:28Z

An affected Google test has been updated and I've started a re-run of the Google tests. I still expect the Google tests to fail, but hopefully they will all be expected failures this time.

justinmc

All Google test failures are expected, renewing my LGTM here 👍 . @bleroux feel free to merge when you're ready.

…is used (flutter/flutter#159975)

Manual roll requested by [email protected] flutter/flutter@b2f515f...c1561a4 2025-01-23 [email protected] Add `windows_host_engine_test` to presubmit, remove lint exceptions. (flutter/flutter#162032) 2025-01-23 [email protected] Shift `mac_clang_tidy` to a Linux orchestrator. (flutter/flutter#162042) 2025-01-23 [email protected] [Impeller] check both linear sampling props for AHBs. (flutter/flutter#162043) 2025-01-23 [email protected] [Impeller] Implement inherited opacity for ColorFilterContents (flutter/flutter#161834) 2025-01-23 [email protected] Keyboard tidy ups (flutter/flutter#162054) 2025-01-23 [email protected] fix: Call codec.dispose in tests of `engine/src/flutter` (flutter/flutter#161115) 2025-01-23 [email protected] fix: Call codec.dispose in `flutter/test` (flutter/flutter#161127) 2025-01-23 [email protected] fix: Call codec.dispose in `flutter_test` (flutter/flutter#161131) 2025-01-23 [email protected] fix: Call codec.dispose in `dev/` (flutter/flutter#161112) 2025-01-23 [email protected] Replace hacky code creating fake devices (flutter/flutter#162056) 2025-01-23 [email protected] [native assets] Roll dependencies (flutter/flutter#162068) 2025-01-23 [email protected] [native assets] Roll dependencies (flutter/flutter#162017) 2025-01-23 [email protected] Fix DropdownButtonFormField clips text when large text scale is used (flutter/flutter#159975) 2025-01-23 [email protected] Add a better error message when `flutter drive --target` is used incorrectly. (flutter/flutter#162023) 2025-01-23 [email protected] Revert "Move the analyzer_benchmark to Mac arm64 devicelab bots" (flutter/flutter#161822) 2025-01-23 [email protected] [Impeller] adjust coverage origin when rounding out SaveLayer bounds. (flutter/flutter#161838) 2025-01-23 [email protected] Add a README with instructions for editing and running tests for the FGP (flutter/flutter#161830) 2025-01-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] Migrate unit tests off of Skia geometry classes (#161855)" (flutter/flutter#162046) 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

…lutter#159975) ## Description This PR fixes `DropdownButtonFormField` text being clipped when using a large text scale. Before: ![image](https://github.com/user-attachments/assets/6c4deed2-eb61-4c0a-912e-dba364013038) After: ![image](https://github.com/user-attachments/assets/1dee5cda-9885-47c1-92a6-afbbc2312266) This extend the fix from flutter#107201 which does not work properly with Material 3 (because of TextStyle.height being set for M3 default text styles). ## Related Issue Fixes [DropdownButtonFormField clips text when large text scale is used and useMaterial3 is true](flutter#159971) ## Tests Adds 1 test. Updates 1 test.

…is used (flutter/flutter#159975)

) Manual roll requested by [email protected] flutter/flutter@b2f515f...c1561a4 2025-01-23 [email protected] Add `windows_host_engine_test` to presubmit, remove lint exceptions. (flutter/flutter#162032) 2025-01-23 [email protected] Shift `mac_clang_tidy` to a Linux orchestrator. (flutter/flutter#162042) 2025-01-23 [email protected] [Impeller] check both linear sampling props for AHBs. (flutter/flutter#162043) 2025-01-23 [email protected] [Impeller] Implement inherited opacity for ColorFilterContents (flutter/flutter#161834) 2025-01-23 [email protected] Keyboard tidy ups (flutter/flutter#162054) 2025-01-23 [email protected] fix: Call codec.dispose in tests of `engine/src/flutter` (flutter/flutter#161115) 2025-01-23 [email protected] fix: Call codec.dispose in `flutter/test` (flutter/flutter#161127) 2025-01-23 [email protected] fix: Call codec.dispose in `flutter_test` (flutter/flutter#161131) 2025-01-23 [email protected] fix: Call codec.dispose in `dev/` (flutter/flutter#161112) 2025-01-23 [email protected] Replace hacky code creating fake devices (flutter/flutter#162056) 2025-01-23 [email protected] [native assets] Roll dependencies (flutter/flutter#162068) 2025-01-23 [email protected] [native assets] Roll dependencies (flutter/flutter#162017) 2025-01-23 [email protected] Fix DropdownButtonFormField clips text when large text scale is used (flutter/flutter#159975) 2025-01-23 [email protected] Add a better error message when `flutter drive --target` is used incorrectly. (flutter/flutter#162023) 2025-01-23 [email protected] Revert "Move the analyzer_benchmark to Mac arm64 devicelab bots" (flutter/flutter#161822) 2025-01-23 [email protected] [Impeller] adjust coverage origin when rounding out SaveLayer bounds. (flutter/flutter#161838) 2025-01-23 [email protected] Add a README with instructions for editing and running tests for the FGP (flutter/flutter#161830) 2025-01-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] Migrate unit tests off of Skia geometry classes (#161855)" (flutter/flutter#162046) 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

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Dec 9, 2024

bleroux requested a review from justinmc December 9, 2024 16:12

justinmc approved these changes Dec 10, 2024

View reviewed changes

bleroux mentioned this pull request Dec 13, 2024

Fix NavigationDrawerDestination backgroundColor obscures interactions #160239

Merged

bleroux force-pushed the Fix_DropdownButtonFormField_height_should_depend_on_line_height branch from 571bf99 to 6733e13 Compare December 20, 2024 15:15

Piinks requested a review from justinmc January 8, 2025 18:21

Fix DropdownButtonFormField clips text when large text scale is used

78bc81f

bleroux force-pushed the Fix_DropdownButtonFormField_height_should_depend_on_line_height branch from 6733e13 to 78bc81f Compare January 9, 2025 06:01

justinmc approved these changes Jan 22, 2025

View reviewed changes

bleroux added the autosubmit Merge PR when tree becomes green via auto submit App label Jan 23, 2025

auto-submit bot added this pull request to the merge queue Jan 23, 2025

Merged via the queue into flutter:master with commit 97ca57c Jan 23, 2025
104 checks passed

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

bleroux added r: fixed Issue is closed as already fixed in a newer version and removed r: fixed Issue is closed as already fixed in a newer version labels Jan 23, 2025

bleroux deleted the Fix_DropdownButtonFormField_height_should_depend_on_line_height branch January 23, 2025 06:45

engine-flutter-autoroll mentioned this pull request Jan 23, 2025

Roll Flutter from b2f515f45ef5 to 663d02078813 (8 revisions) flutter/packages#8484

Closed

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

0198098

…is used (flutter/flutter#159975)

engine-flutter-autoroll mentioned this pull request Jan 23, 2025

Roll Flutter from b2f515f45ef5 to 6e9b863e6d29 (9 revisions) flutter/packages#8486

Closed

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

9b26379

…is used (flutter/flutter#159975)

engine-flutter-autoroll mentioned this pull request Jan 23, 2025

Roll Flutter from b2f515f45ef5 to d59995bac316 (12 revisions) flutter/packages#8488

Closed

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

9c5454a

…is used (flutter/flutter#159975)

engine-flutter-autoroll mentioned this pull request Jan 23, 2025

Roll Flutter from b2f515f45ef5 to b46479c6a00d (16 revisions) flutter/packages#8489

Closed

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

174230c

…is used (flutter/flutter#159975)

engine-flutter-autoroll mentioned this pull request Jan 23, 2025

Roll Flutter from b2f515f45ef5 to 211b46fcb102 (17 revisions) flutter/packages#8490

Closed

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

fed0afd

…is used (flutter/flutter#159975)

engine-flutter-autoroll mentioned this pull request Jan 23, 2025

Manual roll Flutter from b2f515f45ef5 to c1561a41c530 (18 revisions) flutter/packages#8491

Merged

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

fd996c7

…is used (flutter/flutter#159975)

engine-flutter-autoroll mentioned this pull request Jan 23, 2025

Roll Flutter from b2f515f45ef5 to c1561a41c530 (18 revisions) flutter/packages#8492

Closed

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

fd563ae

…is used (flutter/flutter#159975)

Piinks mentioned this pull request Jan 24, 2025

Flutter Notable Commits - 2025 #161460

Open

bleroux mentioned this pull request Feb 13, 2025

Fix DropdownButtonFormField icon not vertically centered #163205

Merged

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

1bffedc

…is used (flutter/flutter#159975)

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

54fe3d6

…is used (flutter/flutter#159975)

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

97ca57c Fix DropdownButtonFormField clips text when large text scale …

1a091af

…is used (flutter/flutter#159975)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix DropdownButtonFormField clips text when large text scale is used #159975

Fix DropdownButtonFormField clips text when large text scale is used #159975

Uh oh!

bleroux commented Dec 9, 2024

Uh oh!

bleroux commented Dec 9, 2024

Uh oh!

justinmc left a comment

Uh oh!

justinmc Dec 10, 2024

Uh oh!

bleroux commented Dec 10, 2024 •

edited

Loading

Uh oh!

justinmc commented Dec 13, 2024

Uh oh!

bleroux commented Dec 13, 2024 •

edited

Loading

Uh oh!

Piinks commented Jan 8, 2025

Uh oh!

justinmc commented Jan 10, 2025

Uh oh!

justinmc commented Jan 16, 2025

Uh oh!

justinmc left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix DropdownButtonFormField clips text when large text scale is used #159975

Fix DropdownButtonFormField clips text when large text scale is used #159975

Uh oh!

Conversation

bleroux commented Dec 9, 2024

Description

Related Issue

Tests

Uh oh!

bleroux commented Dec 9, 2024

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc Dec 10, 2024

Choose a reason for hiding this comment

Uh oh!

bleroux commented Dec 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinmc commented Dec 13, 2024

Uh oh!

bleroux commented Dec 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Piinks commented Jan 8, 2025

Uh oh!

justinmc commented Jan 10, 2025

Uh oh!

justinmc commented Jan 16, 2025

Uh oh!

justinmc 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bleroux commented Dec 10, 2024 •

edited

Loading

bleroux commented Dec 13, 2024 •

edited

Loading

justinmc left a comment •

edited

Loading