Fix Slider label: clipping the screen by mbcorona · Pull Request #184208 · flutter/flutter

mbcorona · 2026-03-26T16:48:55Z

This PR addresses the issue where long text in a Slider label clips off the edges of the screen.

Following the discussion in the issue, this limits the label's maxWidth to screenSize.width minus a calculated horizontal buffer (_kValueIndicatorHorizontalBuffer). It also forces maxLines = 1 and applies the standard Material ellipsis (\u2026). This prevents the text from expanding beyond the screen boundaries and prevents the bubble shape from breaking vertically.

I am opening this as a draft to get early feedback from @QuncCccccc on the layout logic before proceeding with tests.

Fixes #63293

Video example:

Screen.Recording.2026-03-26.at.10.35.32.AM.mov

Pre-launch 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.

QuncCccccc

The fix looks good to me! Could you also help double check whether RangeSlider has the same issue. If so we can fix them together:)! Thank you!

QuncCccccc · 2026-03-26T20:16:13Z


+  // Buffer to account for the internal padding of standard Material value indicator shapes,
+  // preventing them from bleeding off the screen edges.
+  static const double _kValueIndicatorHorizontalBuffer = 64.0;


Where do we get this number?

The 64.0 is a heuristic (32px per side) to prevent the bubble from clipping at the screen edges. Let me know if there's a specific framework constant I should use instead.

I don't think the specs on the website mentioned the value of the paddings. Can we just avoid setting paddings? It's okay that the label edges touches the screen edge as long as they are clipped.

QuncCccccc · 2026-03-26T20:25:37Z

-        ..layout();
+        ..maxLines = 1
+        ..ellipsis =
+            '\u2026' // Material standard ellipsis


// Material standard ellipsis

Are there any doc or link mentioning this is Material standard?

For the ellipsis, you're right. It's just the standard unicode ellipsis \u2026. I fixed the comment.

mbcorona · 2026-03-31T13:46:32Z

Hi @QuncCccccc , yes RangeSlider has same isssue, I also applied the same fix to RangeSlider:

Screen.Recording.2026-03-27.at.8.52.28.AM.mov

gemini-code-assist

Code Review

This pull request introduces a horizontal buffer for value indicators in the Slider and RangeSlider widgets to prevent them from overflowing screen edges, and implements single-line label truncation with an ellipsis. The review feedback requests documentation for the 64.0 buffer constant to explain its derivation and suggests wrapping a line in range_slider.dart that exceeds the 80-character limit.

gemini-code-assist · 2026-04-07T20:15:15Z


+  // Buffer to account for the internal padding of standard Material value indicator shapes,
+  // preventing them from bleeding off the screen edges.
+  static const double _kValueIndicatorHorizontalBuffer = 64.0;


The constant _kValueIndicatorHorizontalBuffer is set to 64.0, but its derivation is not documented. Please add a comment explaining why 64.0 was chosen (e.g., accounting for typical bubble padding and screen margins). This follows the "Answer your own questions" principle in the repository style guide.

References

Documentation should be useful and explain the 'why'. If a value is chosen, it should be documented where it's defined. ^(link)

gemini-code-assist · 2026-04-07T20:15:15Z

    };

+    // Reserve space for the bubble's internal padding and screen margins.
+    final double safeMaxWidth = math.max(0.0, screenSize.width - _kValueIndicatorHorizontalBuffer);


This line exceeds the 80-character limit and is inconsistent with the formatting used in slider.dart. Wrapping the math.max call improves readability and adheres to the project's formatting standards.

final double safeMaxWidth = math.max( 0.0, screenSize.width - _kValueIndicatorHorizontalBuffer, );

References

Optimize for readability. All Dart code is formatted using dart format, which typically wraps lines at 80 characters. ^(link)

gemini-code-assist · 2026-04-07T20:15:15Z


+  // Buffer to account for the internal padding of standard Material value indicator shapes,
+  // preventing them from bleeding off the screen edges.
+  static const double _kValueIndicatorHorizontalBuffer = 64.0;


Please add a comment explaining the choice of 64.0 for this buffer, similar to the documentation suggested in range_slider.dart. This ensures maintainability by explaining the reasoning behind the hardcoded value.

References

Documentation should be useful and explain the 'why'. ^(link)

QuncCccccc

Overall the change makes sense to me. Thank you for your contribution. Please remember to add unit tests for both Slider and RangeSlider:)!

QuncCccccc · 2026-04-07T22:21:59Z


+  // Buffer to account for the internal padding of standard Material value indicator shapes,
+  // preventing them from bleeding off the screen edges.
+  static const double _kValueIndicatorHorizontalBuffer = 64.0;


I don't think the specs on the website mentioned the value of the paddings. Can we just avoid setting paddings? It's okay that the label edges touches the screen edge as long as they are clipped.

QuncCccccc · 2026-04-07T22:23:23Z

+        ..maxLines = 1
+        ..ellipsis =
+            '\u2026' // Standard Unicode ellipsis
+        ..layout(maxWidth: safeMaxWidth);


Can we just use screenSize.width without setting extra paddings?

Hey @QuncCccccc, I tried using screenSize.width directly without padding, but it results in the outer bubble clipping at the screen edges. See screenshot:

Is there a different framework convention you'd prefer I use to handle the shape's padding?

Oh I see. I don't think we have such convention but I agree that we should add padding around it.

QuncCccccc

I think the fixes makes sense to me! Let's add some unit tests for it and we should be good to go! Thank you!

QuncCccccc · 2026-04-14T23:04:32Z

+        ..maxLines = 1
+        ..ellipsis =
+            '\u2026' // Standard Unicode ellipsis
+        ..layout(maxWidth: safeMaxWidth);


Oh I see. I don't think we have such convention but I agree that we should add padding around it.

QuncCccccc · 2026-04-14T23:05:53Z

  static const double _minPreferredTrackWidth = 144.0;

+  // Buffer to account for the internal padding of standard Material value indicator shapes,
+  // preventing them from bleeding off the screen edges.


We can also add some more explanation like:

Suggested change

// preventing them from bleeding off the screen edges.

// preventing them from bleeding off the screen edges.

//

// The value 64.0 is a heuristic that covers the minimum size of the shape

// (padding + minimum label width) at a text scale factor of roughly 2.0.

…r#184393) flutter/packages@582f0e7...b04f3e5 2026-03-30 [email protected] [ci] Compares commits before creating a sync PR to sync release branch back to the main branch. (flutter/packages#11398) 2026-03-30 [email protected] [ci] Add permission to release_from_branches.yml (flutter/packages#11397) 2026-03-30 [email protected] [pigeon] Reduces lint rules ignored in generated Dart code (flutter/packages#11230) 2026-03-30 [email protected] [google_maps_flutter] Add missing exports (flutter/packages#11196) 2026-03-30 [email protected] [vector_graphic] docs: corrected width/height description in VectorGraphic (flutter/packages#11361) 2026-03-30 [email protected] [ci] Uses fluttergithubbot to create branches and PRs (flutter/packages#11368) 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-flutter-autoroll Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: 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

Fixes flutter#184315 Part of flutter#181513 --------- Co-authored-by: Tong Mu <[email protected]>

…#184264) This is a draft that tests removing the fake impeller images workaround for the iOS simulator, which was originally added in [this PR](flutter-team-archive/engine#54974) We've confirmed that this workaround is no longer needed.

…4374) https://skia.googlesource.com/skia.git/+log/dfd8f8002800..f37239a7a689 2026-03-31 [email protected] [graphite] turn off DrawListLayer caps flag 2026-03-30 recipe-mega-autoroller@chops-service-accounts.iam.gserviceaccount.com Roll recipe dependencies (trivial). If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/skia-flutter-autoroll Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Skia: https://bugs.chromium.org/p/skia/issues/entry To file a bug in Flutter: 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

This reverts commit 697701b. This is a manual revert from flutter#184426. That process seems broken.

…5406) Restore and enable IAccessibleEx implementation. Exposes new features of UI Automation to MSAA-based implementation. Specifically usefull to expose AutomationId from SemanticsNode::identifier for UI test automation. see flutter#148763 Followup to flutter#161955 ## 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. - [x] 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: Matthew Kosarek <[email protected]>

…flutter#184368) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/fuchsia-gn-sdk-flutter Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: 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

This fix has 2 parts basically: 1. Reuse autofill forms. Prior to this PR, the autofill forms were being recreated every time a text input connection is established. This behavior prevents Safari from autofilling the entire form. This PR reuses the existing form and fields instead of recreating them. 2. Re-establish the text input connection with the framework when the text field receives focus from the browser. This is necessary for iOS26's new focus behavior where it blurs the text field then focuses it before autofilling it. That blur-then-focus is a new behavior that was not accounted for by the web engine. Fixes flutter#177248 --------- Co-authored-by: Loïc Sharma <[email protected]>

…#184379) https://dart.googlesource.com/sdk.git/+log/eaeccf98848d..75a089eb6bf9 2026-03-31 [email protected] Version 3.12.0-304.0.dev If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/dart-sdk-flutter Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: 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

…... (flutter#184383) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/fuchsia-linux-sdk-flutter Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: 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

…n test (flutter#184398) This package will be resolved through the workspace.

mbcorona · 2026-04-15T15:22:25Z

@QuncCccccc Thanks for all the guidance on the tests and padding logic! Since the Material code freeze is now active and the CI is blocking merges here, I am going to close this PR and will open a fresh PR with these exact changes over in the new flutter/packages repository once the migration is complete and contributions are re-opened.

QuncCccccc · 2026-04-15T21:06:01Z

We are still open to contribute. Either way is fine to me. We can still open a PR and when it completes (with tests and enough approvals), we will mark it as a draft, then once the migration is complete, we can directly move all these draft over.

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

QuncCccccc reviewed Mar 26, 2026

View reviewed changes

github-actions Bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos and removed d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Mar 27, 2026

mbcorona added 5 commits March 31, 2026 07:40

Fix Slider label: clipping the screen

7503c25

Apply label clipping fix to RangeSlider and fix ellipsis comment

3ff36ad

dart format

4844d01

Reset Slider example

ba60600

Reset Slider example

cc49d6d

mbcorona force-pushed the fix/slider-long-label-63293 branch from 762489a to cc49d6d Compare March 31, 2026 13:43

mbcorona marked this pull request as ready for review April 7, 2026 20:12

gemini-code-assist Bot reviewed Apr 7, 2026

View reviewed changes

QuncCccccc self-requested a review April 7, 2026 22:16

QuncCccccc reviewed Apr 7, 2026

View reviewed changes

QuncCccccc reviewed Apr 14, 2026

View reviewed changes

engine-flutter-autoroll and others added 11 commits April 15, 2026 09:11

Even more awaits (flutter#184042)

a2028d3

Fixes flutter#184315 Part of flutter#181513 --------- Co-authored-by: Tong Mu <[email protected]>

Revert "Even more awaits (flutter#184042)" (flutter#184429)

d2f0974

This reverts commit 697701b. This is a manual revert from flutter#184426. That process seems broken.

Remove the cupertino_icons dependency from the spell_check integratio…

02a6a5a

…n test (flutter#184398) This package will be resolved through the workspace.

mbcorona closed this Apr 15, 2026

mbcorona mentioned this pull request Apr 16, 2026

Fix/slider long label 63293 #185149

Closed

10 tasks done

stuartmorgan-g added platform-macos Building on or for macOS specifically and removed platform-macos labels Apr 16, 2026

Conversation

mbcorona commented Mar 26, 2026

Pre-launch Checklist

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mbcorona commented Mar 31, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

QuncCccccc left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mbcorona commented Apr 15, 2026

Uh oh!

QuncCccccc commented Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants