Flutter - 删除 Slider 中的默认填充答案

【问题标题】：Flutter - Remove default padding in SliderFlutter - 删除 Slider 中的默认填充
【发布时间】：2022-01-07 16:12:51
【问题描述】：

我想知道如何删除Flutter Slider 中的默认填充

当前输出是这样的，默认填充 Slider 清晰可见

这是我的代码::

                    Positioned(
                      child: Align(
                        alignment: Alignment.bottomLeft,
                        child: SliderTheme(
                            data: SliderTheme.of(context).copyWith(
                              trackHeight: 2.0,
                              thumbColor: Colors.transparent,
                              thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0.0),
                            ),
                            child: Container(
                                width: 380.0,
                                height: 20.0,
                                padding: EdgeInsets.all(0.0),
                                decoration: BoxDecoration(
                                  border: Border.all(color: Colors.blueAccent)
                                ),
                                child: Slider(
                                  value: 50,
                                  min: 1,
                                  max: 100,
                                  divisions: 100,
                                  activeColor: colors.primaryRed,
                                  inactiveColor: Colors.white,
                                  onChanged: (double newValue) {
                                    print(newValue);
                                  },
                                )
                            )
                        ),
                      ),
                    )

【问题讨论】：

标签： flutter

【解决方案1】：

SliderThemeData(overlayShape: SliderComponentShape.noOverlay)

或

overlayShape: SliderComponentShape.noThumb

默认填充是由拇指绘画和覆盖绘画引起的，通过指定这些属性，您将删除它们，但您将获得零填充

https://api.flutter.dev/flutter/material/SliderThemeData-class.html

【讨论】：

【解决方案2】：

您可以像这样使用自定义 trackShape 修复它：

将此行添加到 SliderTheme 数据：

trackShape: CustomTrackShape(),

那么你必须在 CustomTrackShape() 中编写以下代码：

class CustomTrackShape extends RoundedRectSliderTrackShape {
  Rect getPreferredRect({
    @required RenderBox parentBox,
    Offset offset = Offset.zero,
    @required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
    }) {
      final double trackHeight = sliderTheme.trackHeight;
      final double trackLeft = offset.dx;
      final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
      final double trackWidth = parentBox.size.width;
      return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
    }
}

【讨论】：