Slider Value Indicator remains visible when using SliderThemeData.ShowValueIndicator.onDrag
Steps to reproduce
- Run the below official code sample with a SliderTheme
- Notice when you stop the drag (Touch not in contact with screen) the value indicator is still visible
Expected results
The Value Indicator should be hidden if the touch is not in contact with screen or when not dragging.
Screen.Recording.2026-01-09.at.3.21.04.PM.mov
Actual results
The Value Indicator is always shown which is same behavior as
showValueIndicator: ShowValueIndicator.alwaysVisible
but as per docs of ShowValueIndicator.onDrag
The value indicator is shown while dragging.
Code sample
Code sample
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<SliderExample> createState() => _SliderExampleState(); } class _SliderExampleState extends State<SliderExample> { 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: <Widget>[ SliderTheme( data: SliderTheme.of(context).copyWith( valueIndicatorShape: IV4RoundValueIndicator(), showValueIndicator: ShowValueIndicator.onDrag, trackHeight: 1, ), child: Slider( value: _currentSliderSecondaryValue, label: _currentSliderSecondaryValue.round().toString(), onChanged: (double value) { setState(() { _currentSliderSecondaryValue = value; }); }, ), ), ], ), ); } } class IV4RoundValueIndicator extends SliderComponentShape { @override Size getPreferredSize(bool isEnabled, bool isDiscrete) { return Size(40, 40); // Size of the value indicator } @override void paint( PaintingContext context, Offset center, { required Animation<double> activationAnimation, required Animation<double> enableAnimation, required bool isDiscrete, required TextPainter labelPainter, required RenderBox parentBox, required SliderThemeData sliderTheme, required TextDirection textDirection, required double value, required double textScaleFactor, required Size sizeWithOverflow, }) { final canvas = context.canvas; // Define the circle indicator parameters const double circleDiameter = 44.0; final Offset circleCenter = Offset( center.dx, center.dy - circleDiameter - 10, ); final paint = Paint() ..color = sliderTheme.valueIndicatorColor ?? Colors.purple ..style = PaintingStyle.fill; // Draw the circle canvas.drawCircle(circleCenter, circleDiameter / 2, paint); // Draw the text centered in the circle final textOffset = Offset( circleCenter.dx - (labelPainter.width / 2), circleCenter.dy - (labelPainter.height / 2), ); labelPainter.paint(canvas, textOffset); } }
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
Flutter Doctor output
I found this on latest flutter stable but I believe this reproduces on latest master too.
Doctor output
[✓] Flutter (Channel stable, 3.38.5, on macOS 26.2 25C56 darwin-arm64, locale en-US) [979ms] • Flutter version 3.38.5 on channel stable at /Users/maheshjamdade/Development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision f6ff1529fd (4 weeks ago), 2025-12-11 11:50:07 -0500 • Engine revision 1527ae0ec5 • Dart version 3.10.4 • DevTools version 2.51.1 • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets, omit-legacy-version-file, enable-lldb-debugging