flutter / flutter/flutter

2024 M3 GappedSliderTrackShape should hide secondary track on right edge

Open
#169,845 1 comment 0 reactions 0 assignees View on GitHub
found in release: 3.32 found in release: 3.33 has reproducible steps p: material_ui P2 package team-design triaged-design
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

Use Slider with 2024 M3
Set secondary track to 1.0 and value to 1.0

### Expected results

Right part of main track is hidden
Secondary track is hidden

### Actual results

Right part of main track is hidden
Secondary track is peeking

### Code sample

Code sample

```dart
import 'package:flutter/material.dart';

/// Flutter code sample for [Slider].

void main() => runApp(const SliderApp());

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

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: SliderExample(),
);
}
}

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

@override
State createState() => _SliderExampleState();
}

class _SliderExampleState extends State {
double _currentSliderPrimaryValue = 0.2;
double _currentSliderSecondaryValue = 0.5;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Slider')),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Slider(
year2023: false,
value: _currentSliderPrimaryValue,
secondaryTrackValue: _currentSliderSecondaryValue,
label: _currentSliderPrimaryValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderPrimaryValue = value;
});
},
),
Slider(
value: _currentSliderSecondaryValue,
label: _currentSliderSecondaryValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderSecondaryValue = value;
});
},
),
],
),
);
}
}
```

### Screenshots or Video

Screenshots / Video demonstration

Actual:

![Image](https://github.com/user-attachments/assets/630e27f7-af70-4e60-8baa-0e58f506bb44)

Expected:

![Image](https://github.com/user-attachments/assets/4e960fcc-0915-4780-94a4-eeb132ef0c60)

### Logs

Logs

```console
[Paste your logs here]
```

### Flutter Doctor output

Doctor output

```console
[√] Flutter (Channel stable, 3.32.1, on Microsoft Windows [Version 10.0.19044.4529], locale en-US) [573ms]
• Flutter version 3.32.1 on channel stable at D:\Android\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b25305a883 (4 days ago), 2025-05-29 10:40:06 -0700
• Engine revision 1425e5e9ec
• Dart version 3.8.1
• DevTools version 2.45.1

[√] Windows Version (10 Enterprise 64-bit, 21H2, 2009) [3.4s]

[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [1,897ms]
• Android SDK at D:\Android\sdk
• Platform android-35, build-tools 35.0.0
• ANDROID_HOME = D:\Android\sdk
• Java binary at: d:\Program Files\Android Studio Beta\jbr\bin\java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)
• All Android licenses accepted.

[√] Chrome - develop for the web [104ms]
• CHROME_EXECUTABLE = C:\Program Files\Google\Chrome Beta\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.3) [103ms]
• Visual Studio at D:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.14.36127.28
• Windows 10 SDK version 10.0.26100.0

[√] Android Studio (version 2023.3) [27ms]
• Android Studio at d:\Program Files\Android Studio Beta
• 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
• android-studio-dir = d:\Program Files\Android Studio Beta
• Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)

[√] VS Code (version 1.100.2) [25ms]
• VS Code at C:\Users\vorob\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.111.20250501

[√] Connected device (3 available) [225ms]
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.4529]
• Chrome (web) • chrome • web-javascript • Google Chrome 136.0.7103.114
• Edge (web) • edge • web-javascript • Microsoft Edge 136.0.3240.76

[√] Network resources [399ms]
• All expected network resources are available.

• No issues found!
```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the provided Slider sample, using year2023: false, secondaryTrackValue: 1.0, and value: 1.0. Then inspect GappedSliderTrackShape and the 2024 M3 Slider track rendering. Done means the secondary track is no longer visible at the right edge when the primary value reaches 1.0.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.