search

bdlukaa / fluent_ui

Implements Microsoft's WinUI3 in Flutter.
https://bdlukaa.github.io/fluent_ui/
BSD 3-Clause "New" or "Revised" License
2.79k stars 435 forks source link

🐛 Slider handle overflows or gets cut off #1038

Closed robkri closed 2 months ago

robkri commented 3 months ago

The slider's handle overflows its parent by about 11 pixels and thus might get cut off when it's at the minimum or maximum position: slider_fluent_ui slider_cut_off

Additional information: In Material this is aparently prevented by indenting the entire slider on both sides to leave enough room for the handle. slider_material

The slider shown in WinUI gallery prevents overflowing by not allowing the handle to move as far: The handle stops as soon as its outer ring touches the end of the slider bar: slider_winUI

The latter has the advantage of a cleaner layout: The slider bar uses the entire width that the Slider widget needs and thus aligns neatly with other form elements.

Expected behaviour: The slider handle (knob) does not overflow its parent. And ideally reproduces the behaviour seen in WinUI gallery.

bdlukaa commented 3 months ago

We use material's Slider under the hood of Slider. We use a "hack" to remove the indentation on the slider sides (which is added by default on the material Slider), trying to mimic the native slider behavior.

To fix this issue, the offset of the knob would need to be evaluated to proper align the thumb: https://github.com/bdlukaa/fluent_ui/blob/master/lib/src/controls/inputs/slider.dart#L429-L554

A workaround is to add a padding (6px horizontally) onto the Slider.

robkri commented 3 months ago

Yes, this is how I'm doing it currently. Although I need 11.0 pixels padding.