如何给Flutter Slider添加上方刻度标签并实现刻度随滑块位置变色

对齐问题核心是自定义刻度容器边距和原生Slider默认边距不统一，且刻度数量写死和动态divisions不匹配；变色问题可通过当前Slider值计算对应激活的刻度索引，遍历生成刻度时做条件判断换色即可实现，完整实现代码如下：

import 'package:flutter/material.dart';

class CustomSlider extends StatefulWidget {
  const CustomSlider({super.key});

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

class _CustomSliderState extends State<CustomSlider> {
  double value = 0;
  final double min = 0;
  final double max = 100;

  @override
  Widget build(BuildContext context) {
    // 动态计算档位
    int divisions = value >= 50 ? 10 : 20;
    // 单个刻度对应的步长
    double step = max / divisions;
    // 计算当前激活的刻度索引
    int activeIndex = (value / step).round();
    // 自定义展示的标签值，可按需调整
    List<double> labelValues = [0, 20, 40, 60, 80, 100];

    return Padding(
      // 统一左右边距，和Slider默认边距完全一致，保证对齐
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 刻度标签行
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: labelValues.map((val) {
              return Text(val.toStringAsFixed(0));
            }).toList(),
          ),
          const SizedBox(height: 4),
          // 刻度行
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: List.generate(divisions + 1, (index) {
              return SizedBox(
                height: 8,
                child: VerticalDivider(
                  width: 8,
                  thickness: 1.5,
                  // 滑过的刻度用高亮色，未滑过的用灰色
                  color: index <= activeIndex ? Colors.orange : Colors.grey[300],
                ),
              );
            }),
          ),
          const SizedBox(height: 2),
          Slider(
            min: min,
            max: max,
            value: value,
            divisions: divisions,
            onChanged: (val) {
              setState(() {
                value = val;
              });
            },
            label: value.toStringAsFixed(0),
            activeColor: Colors.orange,
            inactiveColor: Colors.grey[300],
          ),
        ],
      ),
    );
  }
}

如果需要仅滑块所在位置的单个刻度变色，把颜色判断逻辑改为index == activeIndex ? 高亮色 : 灰色即可。

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