Search code examples
constructorflutter

How to change Slider label colour in Flutter?


Is it possible to change the Slider label colour in Flutter?

There is no such field in constructor of Slider class.


Solution

  • 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