Fix RangeSlider
thumb doesn't align with divisions, thumb padding, and rounded corners (#159792)
Fixes [`RangeSlider` thumb's center doesn't align with division's
center, thumb padding, and rounded corners don't work as
expected](https://github.com/flutter/flutter/issues/159586)
This makes a similar fix as the one for `Slider` in
https://github.com/flutter/flutter/pull/149594. This fix is essential to
bring updated Material Design for `RangeSlider`.
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double _discreetSliderValue = 0.6;
RangeValues _discreteRangeSliderValues = const RangeValues(0.2, 1.0);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
sliderTheme: const SliderThemeData(
trackHeight: 32,
thumbColor: Colors.green,
activeTrackColor: Colors.deepPurple,
inactiveTrackColor: Colors.amber,
),
),
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Discrete Slider',
style: Theme.of(context).textTheme.titleMedium,
),
Slider(
value: _discreetSliderValue,
divisions: 5,
onChanged: (double newValue) {
setState(() {
_discreetSliderValue = newValue;
});
}),
Text(
'Discrete Range Slider',
style: Theme.of(context).textTheme.titleMedium,
),
RangeSlider(
values: _discreteRangeSliderValues,
divisions: 5,
onChanged: (RangeValues newValues) {
setState(() {
_discreteRangeSliderValues = newValues;
});
},
),
],
),
),
),
);
}
}
```
</details>
### Before
<img width="701" alt="Screenshot 2024-12-02 at 18 57 03"
src="https://github.com/user-attachments/assets/62d85476-87fd-48e9-aaa9-42d7629d4808">
### After
<img width="701" alt="Screenshot 2024-12-02 at 18 57 21"
src="https://github.com/user-attachments/assets/36f136d1-a759-4b11-b0a9-8cb6b54b8573">
## 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].
- [ ] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
If you need help, consider asking for advice on the #hackers-new channel
on [Discord].
<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md