CODEWITHSUNDEEP
fluttercolorssliderdivision
Vytautas Pranskunas
Vytautas Pranskunas

Reputation: 890

How to change color of divisions in Slider flutter

Hello i have slider with divisions. What is the theme property for changing divisions color so they are not visible?

Upvotes: 3

Views: 4373

Answers (4)

ibhavikmakwana
ibhavikmakwana

Reputation: 10101

Although this might be a bit late, I wanted to share a helpful tip for hiding division tick marks on your Flutter slider.

To achieve this, simply add the following property within your SliderTheme:

tickMarkShape: SliderTickMarkShape.noTickMark,

This code snippet ensures that no tick marks are displayed on the slider track.

Example:

          SliderTheme(
            data: SliderThemeData(
              thumbShape: CustomRoundSliderThumbShape(enabledThumbRadius: 14),
              tickMarkShape: SliderTickMarkShape.noTickMark,
              trackHeight: 8,
              trackShape: RoundedRectSliderTrackShape(),
            ),
            child: Slider(
              value: 1,
              min: 1,
              max: 24,
              divisions: 23,
              onChanged: (value) {
                setState(() {});
              },
              activeColor: AppColorsV2.paleBlue,
              inactiveColor: AppColorsV2.textFormFieldBorder,
            ),
          )

Upvotes: 1

Nabil alhafez
Nabil alhafez

Reputation: 458

Please see this example and let me know if you need any further help :

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    trackHeight: 10.0,
    minThumbSeparation: 2,
    thumbColor: Colors.white,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
    overlayColor:Colors.deepPurple,
    inactiveTickMarkColor: Colors.amber,
    inactiveTrackColor: Colors.green,
  ),
  child: Slider(
    min: 1,
    max: 100,
    value: 45,
    divisions: 2,
    onChanged: (newValue) {
      // set the new value here
      setState(() {
        progress= newValue;
      });
    },
  ),
)

Let's demonstrate some params:

  1. The Main Param for changing the color of the divisions is inactiveTickMarkColor param in SliderTheme object which is amber in our case. Feel free to change it as you want.

  2. The inactiveTrackColor param is the color of the slider when the area is not in the active rang.

  3. The overlayColor param is the color of the widget that appears when you press or focus on the selector widget.

Upvotes: 7

Vaidehee Vala
Vaidehee Vala

Reputation: 392

you can wrap you slider with SliderTheme widget and then adding SliderThemeData to it, inside SliderThemeData , where TickMark defines division, you would find properties for changing TickMark color, here is an example

                                              data: SliderThemeData(
                                                activeTickMarkColor: Colors.transparent,
                                                inactiveTickMarkColor: Colors.transparent,
                                                thumbColor: ColorAssets.themeColorMagenta,
                                                activeTrackColor: ColorAssets.themeColorMagenta,
                                                inactiveTrackColor: Colors.white,
                                              ),
                                              child: Slider(
                                                value: textSliderValue,
                                                min: 0,
                                                max: 20,
                                                divisions: 20,
                                         
                                          ),
                                            )

Upvotes: 1

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27147

You can change ColorScheme's primary color to change slider's color, but it requires to assign value of all colors.

colorScheme: ColorScheme(
        primary: Colors.amber,
        primaryVariant: Colors.amber,
        secondary: Colors.amber,
        secondaryVariant: Colors.amber,
        surface: Colors.amber,
        background: Colors.amber,
        error: Colors.amber,
        onPrimary: Colors.amber,
        onSecondary: Colors.amber,
        onSurface: Colors.amber,
        onBackground: Colors.amber,
        onError: Colors.amber,
        brightness: Brightness.light),

Upvotes: 0

Related Questions