Flutter slider 覆盖色

Question

我已经更改了叠加层的颜色，但它仍然没有生效，因为它保持了 thumbShape 的颜色。

 SliderTheme(
          data: SliderTheme.of(context).copyWith(
            thumbColor: Color(0xFFEB1555),
            activeTrackColor: Colors.white,
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape: RoundSliderThumbShape(enabledThumbRadius: 25.0),
            overlayColor: Color(0x29EB1555),
          ),
          child: Slider(
            value: height.toDouble(),
            min: 122.0,
            max: 220.0,
            inactiveColor: Color(0xFF8D8E98),
            onChanged: (double newValue) {
              setState(() {
                height = newValue.round();
              });
            },
          ),
        ),

Answer 1

我删除了overlayShape 。

我认为它覆盖了我想要使用的颜色。

Answer 2

您可以在主题中使用非活动和活动轨道颜色来避免此问题。

SliderTheme(
                data: SliderThemeData(
                  thumbShape: RoundSliderThumbShape(
                    enabledThumbRadius: 15,
                  ),
                  overlayColor: Color(0x29eb1555),
                  activeTrackColor: Colors.white,
                  inactiveTrackColor: Color(0xff8d8e98),
                  thumbColor: Color(0xffeb1555),
                ),
                child: Slider(
                  value: height.toDouble(),
                  min: 120,
                  max: 220,
                  onChanged: (value) {
                    setState(() {
                      height = value.round();
                    });
                  },
                ),
              ),

Answer 3

您将RoundSliderThumbShape用于thumbShape和overlayShape 。 相反，使用RoundSliderOverlayShape作为overlayShape属性，你对 go 很好。

data: SliderTheme.of(context).copyWith(
            thumbColor: Color(0xFFEB1555),
            activeTrackColor: Colors.white,
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 25.0), // Change in here
            overlayColor: Color(0x29EB1555),
          ),