How to change Slider label colour in Flutter? - constructor

Question

Is it possible to change the Slider label colour in Flutter?
There is no such field in constructor of Slider class.

Answer 1

According to Flutter api use valueIndicatorColor which is the property of SliderThemeData As mention here SliderClass
and here SliiderThemeData
Simple Demonstration:
set local variables:
double feet = 0;
String heightInFeet = "null";
int height = 180;
and Here comes your Custom Slider Solution
SliderTheme(
data: SliderTheme.of(context).copyWith(
valueIndicatorColor: Colors.blue, // This is what you are asking for
inactiveTrackColor: Color(0xFF8D8E98), // Custom Gray Color
activeTrackColor: Colors.white,
thumbColor: Colors.red,
overlayColor: Color(0x29EB1555), // Custom Thumb overlay Color
thumbShape:
RoundSliderThumbShape(enabledThumbRadius: 12.0),
overlayShape:
RoundSliderOverlayShape(overlayRadius: 20.0),
),
child: Slider(
value: height.toDouble(),
onChanged: (double newValue) {
setState(() {
height = newValue.toInt();
feet = (height / 30.48);
heightInFeet = feet.toStringAsFixed(2) + " feet";
});
},
divisions: 220,
label: heightInFeet,
min: 90.0,
max: 305.0,
),
)
and if you want to change Text color text font etc. use
valueIndicatorTextStyle: TextStyle(
color: Colors.amber, letterSpacing: 2.0)
in SliderThemeData

Answer 2

that´s one way to do it, but that will change all the placer where accentTextTheme it´s use, you can use this:
Theme(
child: yourSlide,
data: Theme.of(context).copyWith(
accentTextTheme: TextTheme(bodyText2: TextStyle(color: Colors.white)),
),
)
This way you will only change the widget you need to change and not the entire accentTextTheme that can be use for other that maybe you don't need to change.

Answer 3

Use SliderThemeData:
sliderTheme: ThemeData.dark().sliderTheme.copyWith(
valueIndicatorColor: _primaryColor,
valueIndicatorTextStyle: TextStyle(
backgroundColor: Colors.transparent
)
)

Answer 4

I have found that it is specified in Slider class above label field.
The label is rendered using the active [ThemeData]'s
[ThemeData.accentTextTheme.bodyText2] text style.
When creating the App widget it is necessary to specify the accentTextTheme and the bodyText2 field.
return MaterialApp(
theme: ThemeData(
accentTextTheme: TextTheme(bodyText2: TextStyle(color: Colors.white)),
),
home: MyHomePage(),
);