Skip to content

Commit 8cf41e9

Browse files
authored
Fix RangeSlider renders track when track colors are transparent (#162386)
### Description Fixes [`Slider` with transparent track colors and custom `trackHeight` cannot reach the extreme ends](flutter/flutter#161210) but 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> { RangeValues _values = const RangeValues(0, 100); @OverRide Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: Column( spacing: 20, mainAxisSize: MainAxisSize.min, children: <Widget>[ SliderTheme( data: const SliderThemeData( trackHeight: 100, activeTrackColor: Colors.transparent, inactiveTrackColor: Colors.transparent, ), child: RangeSlider( values: _values, max: 100, onChanged: (RangeValues values) { setState(() { _values = values; }); }, ), ), ], ), ), ), ); } } ``` </details> ### Before <img width="755" alt="Screenshot 2025-02-12 at 15 56 21" src="https://github.com/user-attachments/assets/e8c88bd8-3c87-46e2-9f29-b945128ae93a" /> ### After <img width="755" alt="Screenshot 2025-02-12 at 15 56 09" src="https://github.com/user-attachments/assets/5f9244e8-4d51-40f3-a3fc-afdf9dff9b35" /> ## 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
1 parent 271cb8c commit 8cf41e9

2 files changed

Lines changed: 47 additions & 1 deletion

File tree

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2199,10 +2199,17 @@ mixin BaseRangeSliderTrackShape {
21992199
sliderTheme.rangeThumbShape!.getPreferredSize(isEnabled, isDiscrete).width;
22002200
final double overlayWidth =
22012201
sliderTheme.overlayShape!.getPreferredSize(isEnabled, isDiscrete).width;
2202-
final double trackHeight = sliderTheme.trackHeight!;
2202+
double trackHeight = sliderTheme.trackHeight!;
22032203
assert(overlayWidth >= 0);
22042204
assert(trackHeight >= 0);
22052205

2206+
// If the track colors are transparent, then override only the track height
2207+
// to maintain overall Slider width.
2208+
if (sliderTheme.activeTrackColor == Colors.transparent &&
2209+
sliderTheme.inactiveTrackColor == Colors.transparent) {
2210+
trackHeight = 0;
2211+
}
2212+
22062213
final double trackLeft = offset.dx + math.max(overlayWidth / 2, thumbWidth / 2);
22072214
final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
22082215
final double trackRight = trackLeft + parentBox.size.width - math.max(thumbWidth, overlayWidth);

packages/flutter/test/material/slider_theme_test.dart

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3050,6 +3050,45 @@ void main() {
30503050
},
30513051
);
30523052

3053+
// Regression test for https://github.com/flutter/flutter/issues/161210
3054+
testWidgets(
3055+
'RangeSlider with transparent track colors and custom track height can reach extreme ends',
3056+
(WidgetTester tester) async {
3057+
const double sliderPadding = 24.0;
3058+
final ThemeData theme = ThemeData(
3059+
sliderTheme: const SliderThemeData(
3060+
trackHeight: 100,
3061+
activeTrackColor: Colors.transparent,
3062+
inactiveTrackColor: Colors.transparent,
3063+
),
3064+
);
3065+
3066+
await tester.pumpWidget(
3067+
MaterialApp(
3068+
theme: theme,
3069+
home: Material(
3070+
child: SizedBox(
3071+
width: 300,
3072+
child: RangeSlider(
3073+
values: const RangeValues(0, 1),
3074+
onChanged: (RangeValues values) {},
3075+
),
3076+
),
3077+
),
3078+
),
3079+
);
3080+
3081+
final MaterialInkController material = Material.of(tester.element(find.byType(RangeSlider)));
3082+
3083+
expect(
3084+
material,
3085+
paints
3086+
..circle(x: sliderPadding, y: 300.0, color: theme.colorScheme.primary)
3087+
..circle(x: 800.0 - sliderPadding, y: 300.0, color: theme.colorScheme.primary),
3088+
);
3089+
},
3090+
);
3091+
30533092
group('Material 2', () {
30543093
// These tests are only relevant for Material 2. Once Material 2
30553094
// support is deprecated and the APIs are removed, these tests

0 commit comments

Comments
 (0)