在颤动中更改滑块的拇指颜色答案

【问题标题】：Changing thumb color of slider in flutter在颤动中更改滑块的拇指颜色
【发布时间】：2021-10-04 19:34:34
【问题描述】：

我正在尝试更改滑块的拇指颜色。

这是我的代码：

SliderTheme(
                    data: SliderThemeData(
                      thumbColor: Colors.pink,
                    ),
                    child: Slider(
                      value: height.toDouble(),
                      min: 120,
                      max: 220,
                      onChanged: (double newValue){
                        setState(() {
                          height = newValue.toInt();
                        });
                      },
                      inactiveColor: Color(0xff8d8e98),
                      activeColor: Colors.white,
                    ),
                  )

这是输出：

但是，如果我从上面的代码中删除 activeColor: Colors.white 属性，那么我将获得所需的拇指颜色。

但是，如果我添加 activeColor 参数，那么即使拇指颜色也会发生变化。

如何将拇指颜色设为粉红色，将活动颜色设为白色？

这是我需要的输出：

【问题讨论】：

标签： flutter flutter-slider

【解决方案1】：

尝试使用activeTrackColor: 而不是activeColor:，例如：

data: SliderThemeData(
  thumbColor: Colors.pink,
  activeTrackColor: Colors.white,
  inactiveColor: Color(0xff8d8e98),
),

【讨论】：

【解决方案2】：

您可以将overlayColor 用于拇指周围的阴影和SliderThemeData 的activeTrackColor 属性。

SliderTheme(
      data: SliderThemeData(
        thumbColor: Colors.pink,
        overlayColor:Colors.pink[50],
        activeTrackColor: Colors.white,
      ),
      child: Slider(
        value: sliderValue.toDouble(),
        max: 100.0,
        min: 0.0,
        inactiveColor: Colors.grey,
        onChanged: (double newValue) {
          setState(() {
            sliderValue = newValue;
          });
        },
      ),
    );

【讨论】：