Skip to content

Fix Slider renders track when track colors are transparent - #161814

Merged
auto-submit[bot] merged 5 commits into
flutter:masterfrom
TahaTesser:fix_slider_thumb_padding
Feb 6, 2025
Merged

auto-submit[bot] merged 5 commits into
flutter:masterfrom
TahaTesser:fix_slider_thumb_padding

Conversation

@TahaTesser

@TahaTesser TahaTesser commented Jan 17, 2025 •

Copy link
Copy Markdown
Contributor

Description

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

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> {
  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

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. p: material_ui material_ui package in flutter/packages labels Jan 17, 2025
@rydmike

rydmike commented Jan 17, 2025

Copy link
Copy Markdown
Contributor

Wow, awesome fixes! Thanks @TahaTesser 💙

@QuncCccccc QuncCccccc left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM! Thanks a lot for the fix:)


final Color? effectiveActiveTrackColor =
widget.activeColor ?? sliderTheme.activeTrackColor ?? defaults.activeTrackColor;
final Color? effectiveInactiveColor =

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: maybe rename to effectiveInactiveTrackColor to keep consistent:)?

@TahaTesser

Copy link
Copy Markdown
Contributor Author

@QuncCccccc Looks like this is failing google testing.

@QuncCccccc

Copy link
Copy Markdown
Contributor

Taking a look

sliderTheme.inactiveTrackColor == Colors.transparent) {
trackHeight = 0;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This fix seems only related to the first issue in the description. Are we still include the fix for the second issue #161805?

@TahaTesser TahaTesser Feb 5, 2025 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes, I commented one of the fixes to figure out which fix is actually failing google testing.

Now I know which code is causing the issue. I will try to find a root cause.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I'm removing non google test failing fix to better understand the cause and file separate PR for it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Also updated the description to remove second the issue.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Would you please mind approving second time with only single issue fix now so I can land this?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ah thanks a lot for letting me know! LGTM:)

@TahaTesser TahaTesser changed the title Fix Slider thumb cannot reach extreme ends Fix RangeSlider renders track when track colors are transparent Feb 5, 2025
@TahaTesser TahaTesser changed the title Fix RangeSlider renders track when track colors are transparent Fix Slider renders track when track colors are transparent Feb 5, 2025
@TahaTesser
TahaTesser requested a review from QuncCccccc February 5, 2025 16:03
@rydmike

rydmike commented Feb 6, 2025

Copy link
Copy Markdown
Contributor

So these changes removes the original fix I commented on earlier? Just asking, because if so, I need to reflect that change in the status of original issue.

@TahaTesser

Copy link
Copy Markdown
Contributor Author

So these changes removes the original fix I commented on earlier? Just asking, because if so, I need to reflect that change in the status of original issue.

It'll be in separate PR

sliderTheme.inactiveTrackColor == Colors.transparent) {
trackHeight = 0;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ah thanks a lot for letting me know! LGTM:)

@TahaTesser TahaTesser added the autosubmit Merge PR when tree becomes green via auto submit App label Feb 6, 2025
@auto-submit
auto-submit Bot added this pull request to the merge queue Feb 6, 2025
Merged via the queue into flutter:master with commit 58b7ee1 Feb 6, 2025
@flutter-dashboard flutter-dashboard Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Feb 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 8, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 8, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 9, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 9, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 10, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 10, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 10, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 10, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 10, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 11, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 11, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 11, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 11, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Feb 11, 2025
@TahaTesser
TahaTesser deleted the fix_slider_thumb_padding branch April 24, 2025 17:37
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

framework flutter/packages/flutter repository. See also f: labels. p: material_ui material_ui package in flutter/packages

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

3 participants