Flutter：滑块自定义工具提示

Question

我想在我的应用程序中为 Slider 创建带有背景阴影的自定义工具提示。这是我当前滑块的代码。

SliderTheme(
          data: SliderThemeData(
            activeTrackColor: AppColor.royalGreen,
            inactiveTrackColor: AppColor.black12,
            thumbColor: AppColor.royalGreen,
            thumbShape: CircleSliderThumbShape(),
            showValueIndicator: ShowValueIndicator.always,
            valueIndicatorColor: AppColor.white,
            valueIndicatorTextStyle: TextStyles.sliderTooltipText,
            // overlayShape: SliderComponentShape.noOverlay,
            // overlayColor: AppColor.behan24
          ),
          child: Slider(
            value: _currentSliderValue,
            onChanged: (double value) {
              setState(() {
                _currentSliderValue = value;
              });
            },
            label: "${_currentSliderValue.toString().split('.')[0] + 'L'}",
            min: 5,
            max: 50,
          ),
        ),

这就是我想要实现的。

到目前为止我取得了什么。

任何帮助都将不胜感激。谢谢

Answer 1

我推荐使用库 flutter_xlider

有了这个，您可以使用工具提示进行自定义并添加阴影以创建高程效果。

      FlutterSlider(
        values: [300],
        max: 500,
        min: 0,
        onDragging: (handlerIndex, lowerValue, upperValue) {
          _lowerValue = lowerValue;
          _upperValue = upperValue;
          setState(() {});
        },
        tooltip: FlutterSliderTooltip(
            textStyle: TextStyle(fontSize: 17, color: Colors.black),
            boxStyle: FlutterSliderTooltipBox(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
            )),
      ),

这就是您将实现的目标：

Flutter：滑块自定义工具提示

Flutter : Slider custom Tooltip

slider

tooltip

shadow

dart

flutter