Repository navigation
RoundedRectSliderTrackShape corners are not rendered correctly #149589
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
RoundedRectSliderTrackShape corners are not rendered correctly. Specifically, when the slider thumb is moved to the start or at the end of track, the rounded corners of the track break, resulting in a visual inconsistency.
Expected results
The corners of the slider track should remain smoothly rounded regardless of the thumb position.
Thumb at the start of the track
Screen.Recording.2024-06-03.at.15.21.13.mov
Thumb at the end of the track
Screen.Recording.2024-06-03.at.15.22.58.mov
Actual results
When the thumb is positioned near the start or end of the track, the corners break and lose their rounded appearance.
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.