From 58b7ee137e5b09463c30fe63a5697d723c78ecf3 Mon Sep 17 00:00:00 2001 From: Taha Tesser Date: Thu, 6 Feb 2025 22:42:02 +0200 Subject: [PATCH] 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 ](https://github.com/flutter/flutter/issues/161210) ### Code Sample
expand to view the code sample ```dart import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _MyAppState(); } class _MyAppState extends State { 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()}') ], ), ), ), ); } } ```
### Before Screenshot 2025-01-17 at 16 32 00 ### After Screenshot 2025-01-17 at 16 31 33 ## 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]. [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 --- .../lib/src/material/slider_theme.dart | 9 +++- .../test/material/slider_theme_test.dart | 41 +++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/flutter/lib/src/material/slider_theme.dart b/packages/flutter/lib/src/material/slider_theme.dart index a4b3bef53c..bafbc5fa95 100644 --- a/packages/flutter/lib/src/material/slider_theme.dart +++ b/packages/flutter/lib/src/material/slider_theme.dart @@ -1840,10 +1840,17 @@ mixin BaseSliderTrackShape { final double thumbWidth = sliderTheme.thumbShape!.getPreferredSize(isEnabled, isDiscrete).width; final double overlayWidth = sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width; - final double trackHeight = sliderTheme.trackHeight!; + double trackHeight = sliderTheme.trackHeight!; assert(overlayWidth >= 0); assert(trackHeight >= 0); + // If the track colors are transparent, then override only the track height + // to maintain overall Slider width. + if (sliderTheme.activeTrackColor == Colors.transparent && + sliderTheme.inactiveTrackColor == Colors.transparent) { + trackHeight = 0; + } + final double trackLeft = offset.dx + (sliderTheme.padding == null ? math.max(overlayWidth / 2, thumbWidth / 2) : 0); final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2; diff --git a/packages/flutter/test/material/slider_theme_test.dart b/packages/flutter/test/material/slider_theme_test.dart index 8ba78b2aab..7fcf741434 100644 --- a/packages/flutter/test/material/slider_theme_test.dart +++ b/packages/flutter/test/material/slider_theme_test.dart @@ -3009,6 +3009,47 @@ void main() { ); }); + // Regression test for https://github.com/flutter/flutter/issues/161210 + testWidgets( + 'Slider with transparent track colors and custom track height can reach extreme ends', + (WidgetTester tester) async { + const double sliderPadding = 24.0; + final ThemeData theme = ThemeData( + sliderTheme: const SliderThemeData( + trackHeight: 100, + activeTrackColor: Colors.transparent, + inactiveTrackColor: Colors.transparent, + ), + ); + + Widget buildSlider({required double value}) { + return MaterialApp( + theme: theme, + home: Material( + child: SizedBox(width: 300, child: Slider(value: value, onChanged: (double value) {})), + ), + ); + } + + await tester.pumpWidget(buildSlider(value: 0)); + + MaterialInkController material = Material.of(tester.element(find.byType(Slider))); + + expect( + material, + paints..circle(x: sliderPadding, y: 300.0, color: theme.colorScheme.primary), + ); + + await tester.pumpWidget(buildSlider(value: 1)); + + material = Material.of(tester.element(find.byType(Slider))); + expect( + material, + paints..circle(x: 800.0 - sliderPadding, y: 300.0, color: theme.colorScheme.primary), + ); + }, + ); + group('Material 2', () { // These tests are only relevant for Material 2. Once Material 2 // support is deprecated and the APIs are removed, these tests