Repository navigation
Slider thumb doesn't respect round slider track shape #149591
Copy link
Copy link
Closed
Labels
found in release: 3.22Found to occur in 3.22Found to occur in 3.22found in release: 3.23Found to occur in 3.23Found to occur in 3.23frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages team
Description
Steps to reproduce
Slider Thumb and round track shape has bunch of issues.
- When dragging the thumb to the start or end of the track in a rounded track shape, the thumb exists the rounded slider track shape and doesn't maintain rounded corners.
Actual results
| Start | End |
|---|---|
![]() |
![]() |
Expected results
| Start | End |
|---|---|
![]() |
![]() |
- Active track doesn't be show be drawn if the thumb is at the start of the rounded track shape and it's radius lower than track radius. Likewise, inactive track shouldn't be drawn if the thumb is at the end of the rounded track shape.
Actual results
| Start | End |
|---|---|
![]() |
![]() |
Expected results
| Start | End |
|---|---|
![]() |
![]() |
- All corners in active and inactive tracks segments should be rounded in a rounded track shape.
Actual results
Active track corners
Inactive track corners
Expected results
Active track corners
Inactive track corner
Expected results
~
Actual results
~
Code sample
Code sample
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 _value = 0.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
sliderTheme: const SliderThemeData(
trackHeight: 32,
thumbColor: Colors.green,
// thumbColor: Colors.green.withOpacity(0.5),
// activeTrackColor: Colors.red.withOpacity(0.5),
inactiveTrackColor: Colors.amber,
trackShape: RoundedRectSliderTrackShape(),
),
),
home: Scaffold(
body: Slider(
value: _value,
// divisions: 5,
// label: _value.toStringAsFixed(2),
// ignore: avoid_redundant_argument_values
min: 0,
max: 10,
onChanged: (double value) {
setState(() {
_value = value;
});
},
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[Paste your output here]Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
found in release: 3.22Found to occur in 3.22Found to occur in 3.22found in release: 3.23Found to occur in 3.23Found to occur in 3.23frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages team
Type
Projects
- StatusShow more project fieldsDone (PR merged)












Activity
Fix `Slider` thumb doesn't align with divisions, thumb padding, and r…
github-actions commentedon Jul 29, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.