Flutter中AnotherStepper：如何按activeIndex设置subtitle灰化及点颜色？

需求说明 #

使用AnotherStepper包实现步进器，需完成两个样式调整：

1. 根据activeIndex，将非激活步骤的subtitle灰化
2. 自定义步进器的点颜色

解决方案 #

1. 动态灰化非激活步骤的subtitle #

遍历步骤列表时，通过判断每个步骤的索引与activeIndex的关系，动态设置subtitle的文字样式：

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

List<StepperData> stepperData = List.generate(4, (index) {
  // 定义各步骤的标题和副标题内容
  final stepTitles = ["Order Placed", "Preparing", "On the way", "Delivered"];
  final stepSubtitles = [
    "Your order has been placed",
    "Your order is being prepared",
    "Our delivery executive is on the way to deliver your item",
    ""
  ];

  // 非激活步骤（索引≠activeIndex）需要灰化
  bool isInactive = index != activeIndex;

  return StepperData(
    title: StepperText(
      stepTitles[index],
      textStyle: TextStyle(
        color: isInactive ? Colors.grey : Colors.black,
      ),
    ),
    subtitle: stepSubtitles[index].isEmpty
        ? null
        : StepperText(
            stepSubtitles[index],
            textStyle: TextStyle(
              color: isInactive ? Colors.grey : Colors.black,
            ),
          ),
  );
});

2. 设置步进器的点颜色 #

提供两种实现方式，按需选择：

方式一：使用自带参数快速设置

AnotherStepper内置了直接控制点颜色的参数，无需自定义组件：

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  gap: 20,
  iconWidth: 24,
  iconHeight: 24,
  activeBarColor: Colors.green,
  inActiveBarColor: Colors.grey,
  activeIndex: activeIndex,
  barThickness: 8,
  // 设置激活/未激活状态的点颜色
  activeDotColor: Colors.green,
  inActiveDotColor: Colors.grey,
);

方式二：自定义点样式（支持复杂效果）

如果需要自定义点的形状、图标等，可通过dotWidget参数根据步骤状态动态调整：

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  gap: 20,
  iconWidth: 24,
  iconHeight: 24,
  activeBarColor: Colors.green,
  inActiveBarColor: Colors.grey,
  activeIndex: activeIndex,
  barThickness: 8,
  dotWidget: (index) {
    bool isActive = index == activeIndex;
    return Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: isActive ? Colors.green : Colors.grey,
        borderRadius: BorderRadius.circular(30),
      ),
      // 可选：添加激活状态的图标
      child: isActive ? Icon(Icons.check, color: Colors.white, size: 16) : null,
    );
  },
);

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