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

Steps to reproduce

run the example code.
long-pressed to the indicator.
schroll to best left.

Expected results

i can drag the indicator to the best left and right.

Actual results

i can't drag the indicator to the best left and right.

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Simulation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: 44,
              width: 200,
              alignment: Alignment.centerLeft,
              child: Stack(
                alignment: Alignment.centerLeft,
                children: [
                  Container(
                    height: 4,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [
                        Colors.red,
                        Colors.blue,
                      ]),
                      borderRadius: BorderRadius.circular(2),
                    ),
                  ),
                  SliderTheme(
                    data: SliderThemeData(
                      trackHeight: 44,
                      thumbColor: Colors.white,
                      activeTrackColor: Colors.transparent,
                      inactiveTrackColor: Colors.transparent,
                      thumbShape: RoundSliderThumbShape(
                        enabledThumbRadius: 12,
                        elevation: 4,
                      ),
                      overlayShape: RoundSliderOverlayShape(
                        overlayRadius: 24,
                      ),
                    ),
                    child: Slider(
                      value: _value,
                      onChanged: (newValue) {
                        setState(() {
                          _value = newValue;
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              width: 50,
              child: Text(
                '${(_value * 100).round()}%',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
                textAlign: TextAlign.end,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

RPReplay_Final1736231161.MP4

Logs

No response

Flutter Doctor output

zengyang@zengyangdeMac-mini lomod % flutter doctor -v
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.0 23A344 darwin-arm64, locale en-CN)
    • Flutter version 3.24.3 on channel stable at /Users/zengyang/fvm/versions/3.24.3
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (4 months ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3
    • Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/zengyang/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/zengyang/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.96.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.102.0

[✓] Connected device (6 available)
    • aasaaaa 11 aaaa (mobile)        • 00008030-0019082236E2802E • ios            • iOS 17.6.1 21G93
    • qqqqqqq1iPhone (mobile)         • 00008030-000171CE1168802E • ios            • iOS 18.2 22C152
    • iPhone 11 Pro Max (mobile)      • 00008030-000224190CE8802E • ios            • iOS 18.1.1 22B91
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 131.0.6778.205

[✓] Network resources
    • All expected network resources are available.

• No issues found!

overlayShape: RoundSliderOverlayShape(
overlayRadius: 0,
),

This might be a genuine bug. Reopening. I'll take a close look this week.

This might be a genuine bug. Reopening. I'll take a look close this week.

but it's normal after seted

overlayShape: RoundSliderOverlayShape(
overlayRadius: 0,
),

@TahaTesser

Any bug left? @TahaTesser

@TahaTesser

Any bug left? @TahaTesser

I'm working on another bug at the moment. I'll get back to this issue soon.

Hi @ahyangnb!

Using this doesn't; change behavior? Can you please show a demo or explain how this helped you?

overlayShape: RoundSliderOverlayShape(
overlayRadius: 0,
),

Using this will not change behavior and it makes evethings normal.

RPReplay_Final1736850756.MP4

@ahyangnb

@ahyangnb
Appreciate you getting back. I ran the code sample you provided with overlayRadius: 0 (On mobile and desktop)

I cannot get Slider to reach the end. Am I missing something?

Code Sample

expand to view the code sample

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Color Simulation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: 44,
              width: 200,
              alignment: Alignment.centerLeft,
              child: Stack(
                alignment: Alignment.centerLeft,
                children: [
                  Container(
                    height: 4,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [
                        Colors.red,
                        Colors.blue,
                      ]),
                      borderRadius: BorderRadius.circular(2),
                    ),
                  ),
                  SliderTheme(
                    data: SliderThemeData(
                      trackHeight: 44,
                      thumbColor: Colors.white,
                      activeTrackColor: Colors.transparent,
                      inactiveTrackColor: Colors.transparent,
                      thumbShape: RoundSliderThumbShape(
                        enabledThumbRadius: 12,
                        elevation: 4,
                      ),
         overlayShape: RoundSliderOverlayShape(
  overlayRadius: 0,
),
                    ),
                    child: Slider(
                      value: _value,
                      onChanged: (newValue) {
                        setState(() {
                          _value = newValue;
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              width: 50,
              child: Text(
                '${(_value * 100).round()}%',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                ),
                textAlign: TextAlign.end,
              ),
            )
          ],
        ),
      ),
    );
  }
}

@TahaTesser

@TahaTesser You miss nothing, i've tred copy codes you sent and run, it's normal.

What's your flutter version? i was use the flutter 3.24.3.

@ahyangnb

Hi @ahyangnb

First of all, thank you so much for providing the details.

At first, I was suspicious that this issue is probably same as rydmike/flex_color_picker#90. However, after studying this bug it seems to be slightly different bug but related.

Your issue to be caused by SliderTheme customization that are hidden by transparent active and inactive track colors.

`Slider` track height

In your sliderThemeData, you're adjusting the track height which would respond to the track shape roundness and adjust how far it can be moved:

             SliderTheme(
                    data: SliderThemeData(
                      trackHeight: 44,
                      thumbColor: Colors.white,

But the change is hidden when you're setting the active track and inactive track colors to be transparent

                  SliderTheme(
                    data: SliderThemeData(
                      trackHeight: 44,
                      thumbColor: Colors.white,
                      activeTrackColor: Colors.transparent,
                      inactiveTrackColor: Colors.transparent,

Solution

I will make a quality of life fix to ignore the trackHeight property when the user hides the tracks by setting activeTrackColor and inactiveTrackColor with transparent color.

`Slider` padding

The reason you were able to fix the thumb not reaching the edges by setting overlayRadius: 0 because of the default Slider padding.

The default Slider padding takes track overlay radius into account . You can view it in the layout inspector.

However, I've added new SliderThemeData.padding property in a recent PR. In the next major stable release, you can use this property directly to adjust default Slider padding and set to EdgeInsets.zero to remove the default padding for your use case.

Fix `Slider` renders track when track colors are transparent (#161814)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

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

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

2 remaining items

Code Sample

`Slider` track height

Solution

`Slider` padding

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

ahyangnb commented on Jan 7, 2025

TahaTesser commented on Jan 7, 2025

ahyangnb commented on Jan 10, 2025

ahyangnb commented on Jan 10, 2025

TahaTesser commented on Jan 10, 2025

2 remaining items

ahyangnb commented on Jan 14, 2025

TahaTesser commented on Jan 14, 2025

Code Sample

ahyangnb commented on Jan 15, 2025

TahaTesser commented on Jan 17, 2025

Slider track height

Solution

Slider padding

github-actions commented on Feb 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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

`Slider` track height

`Slider` padding