Flutter自定义步进器：基于AnotherStepper配置subtitle样式与圆点颜色

针对你的需求，我们可以通过动态生成步进器数据和自定义圆点组件来实现，具体方案如下：

1. 根据activeIndex动态设置subtitle样式 #

先把步进器的标题、副标题抽成统一数据源，再遍历索引结合activeIndex判断步骤状态（已完成/当前激活/未开始），动态设置subtitle的文字颜色：

// 定义步进器基础数据
final List<Map<String, String>> stepDetails = [
  {
    "title": "Order Placed",
    "subtitle": "Your order has been placed"
  },
  {
    "title": "Preparing",
    "subtitle": "Your order is being prepared"
  },
  {
    "title": "On the way",
    "subtitle": "Our delivery executive is on the way to deliver your item"
  },
  {
    "title": "Delivered",
    "subtitle": "Your order has been delivered"
  },
];

// 当前激活的步骤索引
int activeIndex = 1;

// 动态生成StepperData列表
List<StepperData> stepperData = List.generate(stepDetails.length, (index) {
  bool isCompleted = index < activeIndex;
  bool isInactive = index > activeIndex;

  // 设置subtitle样式：已完成/未开始的步骤用灰色，当前激活步骤用默认黑色
  TextStyle subtitleStyle = TextStyle(
    color: (isCompleted || isInactive) ? Colors.grey : Colors.black,
  );

  // 同步设置title样式（和你原代码逻辑一致）
  TextStyle titleStyle = TextStyle(
    color: (isCompleted || isInactive) ? Colors.grey : Colors.black,
  );

  return StepperData(
    title: StepperText(
      stepDetails[index]["title"]!,
      textStyle: titleStyle,
    ),
    subtitle: StepperText(
      stepDetails[index]["subtitle"]!,
      textStyle: subtitleStyle,
    ),
  );
});

2. 自定义步进器圆点的颜色 #

利用AnotherStepper的dotWidget参数，根据索引和activeIndex的关系，自定义每个圆点的颜色，还可以给已完成步骤添加对勾图标：

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  gap: 20,
  iconWidth: 24,
  iconHeight: 24,
  activeBarColor: Colors.green,
  inActiveBarColor: Colors.grey,
  activeIndex: activeIndex,
  barThickness: 8,
  // 自定义圆点组件
  dotWidget: (index, isActive) {
    Color dotColor;
    if (index < activeIndex) {
      // 已完成步骤：绿色圆点+对勾
      dotColor = Colors.green;
    } else if (index == activeIndex) {
      // 当前激活步骤：绿色圆点
      dotColor = Colors.green;
    } else {
      // 未开始步骤：灰色圆点
      dotColor = Colors.grey;
    }

    return Container(
      width: 24,
      height: 24,
      decoration: BoxDecoration(
        color: dotColor,
        borderRadius: BorderRadius.circular(12),
      ),
      // 已完成步骤显示对勾图标
      child: index < activeIndex 
          ? const Icon(Icons.check, color: Colors.white, size: 16) 
          : null,
    );
  },
)

最终效果：已完成和未开始的步骤subtitle为灰色，当前激活步骤subtitle为正常颜色；圆点根据步骤状态分别显示绿色（已完成/激活）和灰色（未开始），已完成步骤还会显示对勾图标。

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