如何在Flutter中自定义我的Slider小部件的拇指颜色？

Question

我想更改小部件的圆形部分的颜色。此颜色应与activeColor和inactiveColor颜色不同。这是我当前的代码：

Slider(
  value: sliderValue.toDouble(),
  max: 100.0,
  min: 0.0,
  activeColor: Colors.red,
  inactiveColor: Colors.grey,
  onChanged: (double newValue) {
    setState(() {
      sliderValue = newValue.round();
    });
  },
),

下面是结果的滑块：

这是我的目标：

请帮助。

Answer 1

您要更改的部分由SliderTheme控制>

您可以在文档中阅读整个部分：https://api.flutter.dev/flutter/material/SliderThemeData-class.html

只需根据您的需要设置值。

SliderTheme(
    data: SliderThemeData(
            thumbColor: Colors.red,
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 20)),
    child: Slider(
          ...
          },
        ),
      ),
并且您的活动颜色为Colors.white

Answer 2

您可以在下面复制粘贴运行完整代码您可以使用SliderTheme并设置activeTrackColor和inactiveTrackColor

Answer 3

用SliderTheme包装