Flutter Slider边缘圆角失效：滑块移至边缘时圆角变直角

问题出在默认的RoundedRectSliderTrackShape会根据滑块位置动态调整圆角——当滑块移至两端时，对应端的圆角会被自动取消，导致出现直角。我们可以通过自定义滑块轨道形状来强制保持固定圆角。

步骤1：自定义固定圆角的轨道形状 #

创建一个继承自RoundedRectSliderTrackShape的类，重写绘制逻辑，让轨道始终保持指定圆角：

class FixedRadiusSliderTrackShape extends RoundedRectSliderTrackShape {
  final double radius;

  FixedRadiusSliderTrackShape({this.radius = 10.0});

  @override
  void paint(
    PaintingContext context,
    Offset offset, {
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required Animation<double> enableAnimation,
    required TextDirection textDirection,
    required Offset thumbCenter,
    bool isDiscrete = false,
    bool isEnabled = false,
    double additionalActiveTrackHeight = 2,
  }) {
    // 获取轨道的基础矩形区域
    final trackRect = getPreferredRect(
      parentBox: parentBox,
      offset: offset,
      sliderTheme: sliderTheme,
      isEnabled: isEnabled,
      isDiscrete: isDiscrete,
    );

    // 绘制非激活轨道（背景），始终保持圆角
    context.canvas.drawRRect(
      RRect.fromRectAndRadius(trackRect, Radius.circular(radius)),
      Paint()..color = sliderTheme.inactiveTrackColor!,
    );

    // 计算激活轨道的矩形区域
    final activeTrackRect = Rect.fromLTRB(
      trackRect.left,
      trackRect.top,
      thumbCenter.dx,
      trackRect.bottom,
    );

    // 绘制激活轨道，左端固定圆角，右端根据宽度自适应避免变形
    context.canvas.drawRRect(
      RRect.fromRectAndCorners(
        activeTrackRect,
        topLeft: Radius.circular(radius),
        bottomLeft: Radius.circular(radius),
        topRight: activeTrackRect.width > 2 * radius ? Radius.circular(radius) : Radius.zero,
        bottomRight: activeTrackRect.width > 2 * radius ? Radius.circular(radius) : Radius.zero,
      ),
      Paint()..color = sliderTheme.activeTrackColor!,
    );
  }
}

步骤2：替换原Slider的轨道形状 #

修改你的代码，将trackShape替换为自定义的FixedRadiusSliderTrackShape，同时调整轨道颜色（根据需求修改，这里示例用灰色作为非激活轨道，蓝色作为激活轨道）：

Container(
  width: 370,
  height: 62,
  // 可移除Container背景色，轨道已自带背景
  child: SliderTheme(
    data: SliderThemeData(
      trackHeight: 60,
      // 使用自定义固定圆角轨道
      trackShape: FixedRadiusSliderTrackShape(radius: 10.0),
      thumbShape: SliderComponentShape.noOverlay,
      overlayShape: SliderComponentShape.noOverlay,
      valueIndicatorShape: SliderComponentShape.noOverlay,
      thumbColor: Colors.transparent,
      activeTickMarkColor: Colors.transparent,
      inactiveTickMarkColor: Colors.transparent,
      activeTrackColor: Colors.blue, // 激活轨道颜色
      inactiveTrackColor: Colors.grey.shade200, // 非激活轨道颜色
    ),
    child: Slider(
      value: _sliderValue,
      min: 0.0,
      max: 100.0,
      onChanged: (value) {
        setState(() {
          _sliderValue = value;
        });
      },
    ),
  ),
),

说明 #

• 自定义轨道类通过直接绘制带固定圆角的RRect，替代了默认根据滑块位置动态调整圆角的逻辑。
• 激活轨道的右端做了自适应处理，避免当激活区域过小时出现圆角变形的问题。
• 如果需要保留Container的白色背景，可调整轨道的透明度或颜色，避免视觉冲突。

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