Question

How can I customize Slider widget in Flutter?

Is it possible to customize a Slider Widget in Flutter?

Like this:

enter image description here

 46  47829  46
1 Jan 1970

Solution

 61

Wrap your slider with a SliderTheme

SliderTheme(
    data: SliderThemeData(
            thumbColor: Colors.green,
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 20)),
    child: Slider(
          value: _value,
          onChanged: (val) {
            _value = val;
            setState(() {});
          },
        ),
      ),

2019-07-16

Solution

 13

I think you have to use the SliderTickMarkShape class

Base class for Slider tick mark shapes.

Create a subclass of this if you would like a custom slider tick mark shape.

The easy way is to get the actual SliderTheme used in your context and modify only the properties you need. For example, to modify one slide:

SliderTheme(
    data: SliderTheme.of(context).copyWith(
    activeTrackColor: Colors.white,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
    overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
    ),
    child: Slider(
             value: height.toDouble(),
             min: 120.0,
             max: 220.0,
             activeColor: Colors.white,
             inactiveColor: Color(0xFF8D8E98),
             onChanged: (double newValue) {
                 setState(() {
                        height = newValue.round();
                      });
                    },
                  ),
                ),

Another option is modify the theme you're using in your app; in this way you modify all the sliders in the app:

MaterialApp(
      theme: ThemeData.dark().copyWith(
          sliderTheme: SliderTheme.of(context).copyWith( //slider modifications
            thumbColor: Color(0xFFEB1555),
            inactiveTrackColor: Color(0xFF8D8E98),
            activeTrackColor: Colors.white,
            overlayColor: Color(0x99EB1555),
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
          ),
          primaryColor: Color(0xFF0A0E21), // theme color
          scaffoldBackgroundColor: Color(0xFF0A0E21)), // theme background color
      home: InputPage(),
);
2020-04-30