如何移除Flutter中Syncfusion Slider的默认内边距？

当前实现的Syncfusion滑块存在两个问题：

• 轨道未占满全部宽度，两侧会预留半个滑块的宽度
• 滑块在两端位置时，有一半露出轨道外部

修改后的实现代码 #

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class CustomSlider extends StatefulWidget {
  const CustomSlider({
    super.key,
    required this.min,
    required this.max,
    required this.onChanged,
    this.showInfinity = false,
    this.stepSize,
  });

  final double min;
  final double max;
  final Function(double) onChanged;
  final bool showInfinity;
  final double? stepSize;

  @override
  State<CustomSlider> createState() => _CustomSliderState();
}

class _CustomSliderState extends State<CustomSlider> {
  late double _value;

  @override
  void initState() {
    super.initState();
    _value = widget.min;
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SfSliderTheme(
          data: SfSliderThemeData(
            activeTrackHeight: 50,
            inactiveTrackHeight: 50,
            thumbRadius: 25,
            thumbColor: Theme.of(context).primaryColor,
            activeTrackColor: Theme.of(context).primaryColor,
            inactiveTrackColor: Theme.of(context).primaryColor.withOpacity(.2),
            // 设置轨道占满父容器的全部宽度
            trackExtent: constraints.maxWidth,
            // 取消滑块偏移，确保滑块完全在轨道范围内
            thumbOffset: 0,
          ),
          child: SfSlider(
            value: _value,
            min: widget.min,
            max: widget.max,
            onChanged: (value) {
              widget.onChanged(value);
              setState(() {
                _value = value;
              });
            },
            stepSize: widget.stepSize,
            thumbIcon: Center(
              child: widget.showInfinity && _value == widget.max
                  ? const Icon(
                      Icons.all_inclusive,
                      color: Colors.white,
                      size: 20,
                    )
                  : Text(
                      '${_value.toInt()}s',
                      style: const TextStyle(
                        color: Colors.white,
                      ),
                    ),
            ),
          ),
        );
      },
    );
  }
}

关键修改说明 #

1. 使用LayoutBuilder获取父容器宽度：动态获取滑块所在容器的最大宽度，适配不同布局场景，避免依赖固定屏幕尺寸。
2. 设置trackExtent：将trackExtent设为父容器的最大宽度，让轨道完全占满可用空间，消除两侧的预留空白。
3. 设置thumbOffset为0：取消滑块默认的偏移量，确保滑块中心对齐轨道端点，滑块整体完全处于轨道内部，不会出现露出的情况。

内容的提问来源于stack exchange，提问作者dipansh