Skip to content

Fix RangeSlider renders track when track colors are transparent #162386

Merged
auto-submit[bot] merged 2 commits intoflutter:masterfrom
TahaTesser:fix_range_slider_thumbs_padding
Feb 25, 2025
Merged

Fix RangeSlider renders track when track colors are transparent #162386
auto-submit[bot] merged 2 commits intoflutter:masterfrom
TahaTesser:fix_range_slider_thumbs_padding

Conversation

@TahaTesser
Copy link
Contributor

@TahaTesser TahaTesser commented Jan 29, 2025 •
edited
Loading

Description

Fixes Slider with transparent track colors and custom trackHeight cannot reach the extreme ends but for RangeSlider.

Code Sample

expand to view the 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> {
  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;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Before

Screenshot 2025-02-12 at 15 56 21

After

Screenshot 2025-02-12 at 15 56 09

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jan 29, 2025
@TahaTesser TahaTesser marked this pull request as ready for review January 29, 2025 16:24
@TahaTesser TahaTesser requested a review from QuncCccccc January 29, 2025 16:24
QuncCccccc
QuncCccccc reviewed Feb 5, 2025
View reviewed changes
packages/flutter/lib/src/material/range_slider.dart Outdated
sliderTheme.inactiveTrackColor ??
theme.colorScheme.primary.withOpacity(0.24);
final double effectiveTrackHeight =
effectiveActiveTrackColor != Colors.transparent &&
Copy link
Contributor

@QuncCccccc QuncCccccc Feb 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the other Slider fix PR(#161814), it seems only when both track colors are transparent, we set the height to 0. But here it looks like as long as one of the track colors is transparent, we set the height to 0?

Copy link
Contributor Author

@TahaTesser TahaTesser Feb 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it checks if both active and inactive colors are transparent.

I moved the check into BaseRangeSliderTrackShape to match with #161814. That's why I conditional look slightly different now. It was returning height when colors isn't transparent but in the base shape, we don't need to return regular height :)

@TahaTesser TahaTesser changed the title Fix RangeSlider thumbs cannot reach extreme ends Fix RangeSlider renders track when track colors are transparent Feb 5, 2025
@TahaTesser TahaTesser requested a review from QuncCccccc February 5, 2025 15:37
QuncCccccc
QuncCccccc reviewed Feb 12, 2025
View reviewed changes
packages/flutter/lib/src/material/slider_theme.dart

// If the track colors are transparent, then override only the track height
// to maintain overall Slider width.
if (sliderTheme.activeTrackColor == Colors.transparent &&
Copy link
Contributor

@QuncCccccc QuncCccccc Feb 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks so much for your patience!

I tested this change locally, but seems if we only set one of the track color to transparent, we still cannot reach the 2 ends and somehow when I ran the sample app on macOS, the thumb is really hard to get focused and dragged.

Screen.Recording.2025-02-12.at.12.27.35.AM.mov

Copy link
Contributor Author

@TahaTesser TahaTesser Feb 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please share the code sample from this video? It could be the default thumb padding, which cannot be customized without setting the overlay radius to zero in RangeSlider, as shown in the PR sample. A few months ago, I added a new Slider.padding property so we don't have to override the overlay size to get rid default thumb padding. This isn't available in RangeSlider yet.

The reason it could be difficult to focus and drag the thumb is that, as the issue author uses a SizedBox to constrain the track heigh as a result the track height constrained and is much smaller than the thumbs. This is a sample issue, can be tested without this PR.

Screenshot 2025-02-12 at 13 34 25

However, constrained SizedBox isn't required to reproduce this bug so I've updated the PR description with new sample.

@TahaTesser
Copy link
Contributor Author

TahaTesser commented Feb 12, 2025

Rebased to resolve commit conflict.

QuncCccccc
QuncCccccc approved these changes Feb 25, 2025
View reviewed changes
Copy link
Contributor

@QuncCccccc QuncCccccc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM:) Sorry for the late response.

@QuncCccccc QuncCccccc added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 25, 2025
@auto-submit auto-submit bot added this pull request to the merge queue Feb 25, 2025
Merged via the queue into flutter:master with commit 8cf41e9 Feb 25, 2025
76 of 77 checks passed
@flutter-dashboard flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 25, 2025
@TahaTesser TahaTesser deleted the fix_range_slider_thumbs_padding branch February 25, 2025 08:08
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 25, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
24e55ea 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 25, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
1c7f1db 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 25, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
5852aea 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 25, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
cf7ef6b 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 25, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
1b6a651 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 25, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
a5b507b 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 25, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 25, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
92bec6e 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 26, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
5ea34f5 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 26, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
f53a807 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 26, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
38a2325 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 26, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
855f1e9 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 26, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
a28d22b 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 26, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 26, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
26904bd 
…rent (flutter/flutter#162386)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Feb 27, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
f0f099b 
…rent (flutter/flutter#162386)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 27, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
5860262 
…rent (flutter/flutter#162386)
@Piinks Piinks mentioned this pull request Mar 7, 2025
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
122c3cd 
…rent (flutter/flutter#162386)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
3f93c03 
…rent (flutter/flutter#162386)
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
@engine-flutter-autoroll
8cf41e9 Fix RangeSlider renders track when track colors are transpa…
73dfd30 
…rent (flutter/flutter#162386)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@QuncCccccc QuncCccccc QuncCccccc approved these changes

Assignees

No one assigned

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Slider with transparent track colors and custom trackHeight cannot reach the extreme ends

2 participants

@TahaTesser @QuncCccccc