Repository navigation
Slider shape is broken if label is multiple-line text in Material 3 #170204
Description
Steps to reproduce
Since Flutter 3.32, the bubble behind the slider label does not surround the whole label if the label contains line breaks (\n). Here's a screenshot:
The left screenshot was taken from a Flutter 3.32.2 build. The right screenshot, which shows the expected behavior, used Flutter 3.29.2.
What's interesting is, that even after downgrading back to version 3.29.2, the slider remains broken! Question now is, how to fix, or workaround this issue?
Expected results
Please see provided screenshots.
Actual results
Please see provided screenshots.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const SliderExampleApp());
class SliderExampleApp extends StatelessWidget {
const SliderExampleApp({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 _currentDiscreteSliderValue = 60;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(title: const Text('Slider')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Slider(
value: _currentDiscreteSliderValue,
max: 100,
divisions: 5,
label: "${_currentDiscreteSliderValue.round().toString()}\n\nSecond line\nThird line\nFourth line\nFifth line",
onChanged: (double value) {
setState(() {
_currentDiscreteSliderValue = value;
});
},
),
],
),
),
);
}
}Screenshots or Video
Screenshots>
Just for reference a screenshot from the provided code sample, that shows the misaligned label background:
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
% flutter doctor -v
[✓] Flutter (Channel stable, 3.32.2, on macOS 15.5 24F74 darwin-arm64, locale en-US) [208ms]
• Flutter version 3.32.2 on channel stable at /Users/michaelholl/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 8defaa71a7 (3 days ago), 2025-06-04 11:02:51 -0700
• Engine revision 1091508939
• Dart version 3.8.1
• DevTools version 2.45.1
[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [781ms]
• Android SDK at /Users/michaelholl/Library/Android/sdk
• Platform android-36, build-tools 36.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/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 21.0.5+-12932927-b750.29)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [432ms]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16E140
• CocoaPods version 1.16.2
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome) [9ms]
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2024.2) [9ms]
• 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.5+-12932927-b750.29)
[✓] VS Code (version 1.100.3) [8ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.112.0
[✓] Connected device (1 available) [5.6s]
• macOS (desktop) • macos • darwin-arm64 • macOS 15.5 24F74 darwin-arm64
! Error: Browsing on the local area network for Michael’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [225ms]
• All expected network resources are available.
! Doctor found issues in 1 category.
Activity
the-best-is-best commentedon Jun 7, 2025
FluffyBunniesTasteTheBest commentedon Jun 8, 2025
darshankawar commentedon Jun 9, 2025
@FluffyBunniesTasteTheBest
I tried the code on 3.32.2, 3.29.3 and 3.29.0 in which I see the same behavior as you see in latest version, so I am not sure if this is a regression or not.
Do you know if this worked properly in this version or before ?
FluffyBunniesTasteTheBest commentedon Jun 9, 2025
@darshankawar Thanks for your help with this issue.
Yes, it used to work properly with Flutter
3.29.2. The currently published version was build with3.29.2and it works just fine.It broke after upgrading to Flutter
3.32.2. After it broke, it remained broken even after downgrading back to3.29.2, which looks as if something's cached somewhere outside of Flutter's installation folder.Do you have an idea for a workaround?
darshankawar commentedon Jun 10, 2025
@FluffyBunniesTasteTheBest
I tried to look for any change that might have resulted in the current behavior but couldn't find a related one.
With
toString()}\nSecond line Third line Fourth line Fifth line",, it seem to properly put the text inside the bubble, but not withtoString()}\n\nSecond line Third line Fourth line Fifth line".Can you try with latest master / beta as well to confirm if this persist ?
FluffyBunniesTasteTheBest commentedon Jun 10, 2025
@darshankawar Thanks for your help!
Here are some screenshots showing three slider labels generated with
Flutter (Channel master, 3.33.0-1.0.pre.426, on macOS 15.5 24F74 darwin-arm64, locale en-US):What's noticeable is that all three bubbles share the same height, which makes it look as if the font height, rather than the label height, is being used to determine the bubble height. Just a guess, though.
Compared to the (blue) screenshot from the production app, the padding between the bubble and the label has decreased as well.
What's really strange is that it used to work until a few days ago...
darshankawar commentedon Jun 11, 2025
Thanks for the update. I do see the same behavior as reported but on all 3 previous stable and current versions, so based on it I'll keep the issue open for team's tracking.
16 remaining items
huycozy commentedon Jul 28, 2025
Sorry for delaying this for a while. Getting back to this issue, I think the initial work hasn't been implemented for this case yet, so this is not a regression issue. @FluffyBunniesTasteTheBest: As you mentioned at #170204 (comment), this is a M3 issue. However, I consider this a feature request rather than a bug👇
I looked at M3 Slider specs but couldn't see where it provides specs for this case with a multiple-line value indicator/label. It would be appreciated if OP or anyone else could share it here.
I also looked at Slider in Jetpack Compose, it doesn't allow passing a value indicator like in Flutter with Slider.label). Users need to customize the text according to their preferences, as shown below:
Sample code(Slider in Jetpack Compose)
@Preview @Composable fun SliderAdvancedExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Column( horizontalAlignment = Alignment.CenterHorizontally ) { Slider( value = sliderPosition, onValueChange = { sliderPosition = it }, colors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.secondary, activeTrackColor = MaterialTheme.colorScheme.secondary, inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer, ), steps = 3, valueRange = 0f..50f ) Text(text = sliderPosition.toString()) } } }Demo screenshot(Slider in Jetpack Compose)
Although I had a fix for
DropSliderValueIndicatorShape (old design, 2023)which was being used in your screenshot earlier of this issue report, but I'm not sure what (specs)should I do/follow for the remaining oneRoundedRectSliderValueIndicatorShape (new design, 2024)(whenyear2023is false), because of this flag will be removed in the future release and Slider design need to follow the latest M3 design.@Piinks @TahaTesser May I have your thoughts on this?
huycozy commentedon Jul 28, 2025
Re-titling the issue based on #170204 (comment)
[-]Wrong size of Slider label after upgrading from Flutter 3.29.2 to 3.32.2[/-][+]Slider shape is broken if label is multiple-line text in Material 3[/+]Piinks commentedon Jul 28, 2025
If the question is, what do we do when the specification does not have any guidance - we usually favor supporting the platform default by default, but allow users to customize further beyond the specification as an optional choice in the API. :)
Looking through the spec today, it appears that it is not intended to have multiline, but maybe we can expose that as an option.
flutter-triage-bot commentedon Dec 2, 2025
huycozy commentedon Dec 2, 2025