Slider does not show label value on focus for keyboard users #152961
Description
> should we wait to show the label until they use arrow keys, or should we show it right away once the slider is focused?
Thanks for catching this! I just checked the Material Design website, seems based on the specs here, we probably should show the label right away once the slider is focused.
Originally posted by @QuncCccccc in #152886 (comment)
Continuation of #152884
Steps to reproduce
- Create a simple Slider widget (using the Slider sample code from documentation: https://api.flutter.dev/flutter/material/Slider-class.html)
- Focus on the slider by tabbing to it
- Notice that the value indicator label is not shown
Expected results
The value indicator label should be shown to the user whenever a user focuses on the object. This lets the user know visually what the current value of the slider is.
Actual results
Value indicator label is not shown for users that focus on the slider.
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 _currentSliderValue = 20;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Slider')),
body: Slider(
value: _currentSliderValue,
max: 100,
divisions: 5,
label: _currentSliderValue.round().toString(),
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Screen.recording.2024-08-05.12.16.24.PM.webm
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[!] Flutter (Channel [user-branch], 3.24.0-1.0.pre.280, on Debian GNU/Linux rodete 6.6.15-2rodete2-amd64, locale
en_US.UTF-8)
! Flutter version 3.24.0-1.0.pre.280 on channel [user-branch] at /usr/local/google/home/denisbowen/flutter
Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
! Upstream repository https://github.com/DBowen33/flutter.git is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to https://github.com/DBowen33/flutter.git to dismiss this error.
• Framework revision 993593818f (13 days ago), 2024-07-23 16:43:20 +0000
• Engine revision 74737820a8
• Dart version 3.6.0 (build 3.6.0-78.0.dev)
• DevTools version 2.37.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to
perform update checks and upgrades.
[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
• Android SDK at /usr/local/google/home/denisbowen/Android/Sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/linux-android-setup for more details.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✗] Linux toolchain - develop for Linux desktop
• Debian clang version 16.0.6 (26)
✗ CMake is required for Linux development.
It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from
https://cmake.org/download/
✗ ninja is required for Linux development.
It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
https://github.com/ninja-build/ninja/releases
✗ pkg-config is required for Linux development.
It is likely available from your distribution (e.g.: apt install pkg-config), or can be downloaded from
https://www.freedesktop.org/wiki/Software/pkg-config/
[✓] Android Studio (version 2023.2)
• Android Studio at /opt/android-studio-with-blaze-2023.2
• 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 17.0.9+0-17.0.9b1087.7-11185874)
[✓] VS Code (version 1.87.1)
• VS Code at /usr/share/code
• Flutter extension version 3.92.0
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Debian GNU/Linux rodete 6.6.15-2rodete2-amd64
• Chrome (web) • chrome • web-javascript • Google Chrome 127.0.6533.88
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 3 categories.