Skip to content

Commit 58b7ee1

Browse files
authored
Fix Slider renders track when track colors are transparent (#161814)
### Description Fixes [`Slider` with transparent track colors and custom `trackHeight` cannot reach the extreme ends ](flutter/flutter#161210) ### 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 _value = 0; @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Column( spacing: 20, mainAxisSize: MainAxisSize.min, children: [ SizedBox( height: 4, width: 400, child: DecoratedBox( decoration: const BoxDecoration( gradient: LinearGradient(colors: [Colors.yellow, Colors.green]), ), child: SliderTheme( data: const SliderThemeData( trackHeight: 200, activeTrackColor: Colors.transparent, inactiveTrackColor: Colors.transparent, padding: EdgeInsets.zero, ), child: Slider( value: _value, max: 100, onChanged: (double value) { setState(() { _value = value; }); }, ), ), ), ), Text('Slider value: ${_value.roundToDouble()}') ], ), ), ), ); } } ``` </details> ### Before <img width="728" alt="Screenshot 2025-01-17 at 16 32 00" src="https://github.com/user-attachments/assets/378a31b2-b897-4bf8-9067-66539239af09" /> ### After <img width="728" alt="Screenshot 2025-01-17 at 16 31 33" src="https://github.com/user-attachments/assets/aef12d5e-a0cc-4947-8f72-2024edf29f14" /> ## 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. - [ ] 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
1 parent 1b095a0 commit 58b7ee1

File tree

2 files changed

+49
-1
lines changed

2 files changed

+49
-1
lines changed

packages/flutter/lib/src/material/slider_theme.dart

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1840,10 +1840,17 @@ mixin BaseSliderTrackShape {
18401840
final double thumbWidth = sliderTheme.thumbShape!.getPreferredSize(isEnabled, isDiscrete).width;
18411841
final double overlayWidth =
18421842
sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
1843-
final double trackHeight = sliderTheme.trackHeight!;
1843+
double trackHeight = sliderTheme.trackHeight!;
18441844
assert(overlayWidth >= 0);
18451845
assert(trackHeight >= 0);
18461846

1847+
// If the track colors are transparent, then override only the track height
1848+
// to maintain overall Slider width.
1849+
if (sliderTheme.activeTrackColor == Colors.transparent &&
1850+
sliderTheme.inactiveTrackColor == Colors.transparent) {
1851+
trackHeight = 0;
1852+
}
1853+
18471854
final double trackLeft =
18481855
offset.dx + (sliderTheme.padding == null ? math.max(overlayWidth / 2, thumbWidth / 2) : 0);
18491856
final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;

packages/flutter/test/material/slider_theme_test.dart

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3009,6 +3009,47 @@ void main() {
30093009
);
30103010
});
30113011

3012+
// Regression test for https://github.com/flutter/flutter/issues/161210
3013+
testWidgets(
3014+
'Slider with transparent track colors and custom track height can reach extreme ends',
3015+
(WidgetTester tester) async {
3016+
const double sliderPadding = 24.0;
3017+
final ThemeData theme = ThemeData(
3018+
sliderTheme: const SliderThemeData(
3019+
trackHeight: 100,
3020+
activeTrackColor: Colors.transparent,
3021+
inactiveTrackColor: Colors.transparent,
3022+
),
3023+
);
3024+
3025+
Widget buildSlider({required double value}) {
3026+
return MaterialApp(
3027+
theme: theme,
3028+
home: Material(
3029+
child: SizedBox(width: 300, child: Slider(value: value, onChanged: (double value) {})),
3030+
),
3031+
);
3032+
}
3033+
3034+
await tester.pumpWidget(buildSlider(value: 0));
3035+
3036+
MaterialInkController material = Material.of(tester.element(find.byType(Slider)));
3037+
3038+
expect(
3039+
material,
3040+
paints..circle(x: sliderPadding, y: 300.0, color: theme.colorScheme.primary),
3041+
);
3042+
3043+
await tester.pumpWidget(buildSlider(value: 1));
3044+
3045+
material = Material.of(tester.element(find.byType(Slider)));
3046+
expect(
3047+
material,
3048+
paints..circle(x: 800.0 - sliderPadding, y: 300.0, color: theme.colorScheme.primary),
3049+
);
3050+
},
3051+
);
3052+
30123053
group('Material 2', () {
30133054
// These tests are only relevant for Material 2. Once Material 2
30143055
// support is deprecated and the APIs are removed, these tests

0 commit comments

Comments
 (0)