Flutter中如何为anotherstepper的每个步骤添加图片？

你当前的写法是把两张图片都放在了全局的dotWidget里，导致所有步骤都会显示相同的图片集合，要实现每个步骤对应单独的图片，正确的做法是利用stepperList中每个StepperData的iconWidget属性来配置对应步骤的图片，具体实现如下：

1. 定义带步骤图片的StepperData列表 #

每个StepperData可以单独指定iconWidget，直接放入对应步骤的图片组件：

List<StepperData> stepperData = [
  StepperData(
    title: const Text("步骤1"),
    iconWidget: Image.asset(
      'assets/step1.png',
      height: 20,
      width: 20,
    ),
  ),
  StepperData(
    title: const Text("步骤2"),
    iconWidget: Image.asset(
      'assets/step2.png',
      height: 20,
      width: 20,
    ),
  ),
  StepperData(
    title: const Text("步骤3"),
    iconWidget: Image.asset(
      'assets/step3.png',
      height: 20,
      width: 20,
    ),
  ),
];

2. 修改AnotherStepper组件代码 #

移除原来全局的dotWidget（它会覆盖所有步骤的自定义图标），直接使用stepperList中配置好的每个步骤的图片：

Container(
  width: 500,
  height: 500,
  child: AnotherStepper(
    stepperList: stepperData,
    stepperDirection: Axis.horizontal,
    horizontalStepperHeight: 100,
    activeBarColor: Colors.green,
    inActiveBarColor: Colors.grey,
    activeIndex: 2,
    barThickness: 8.5,
    gap: 30,
  ),
),

可选：给激活/未激活步骤添加不同样式 #

如果需要给激活状态的步骤图片加上特殊样式（比如绿色背景），可以在iconWidget外层嵌套Container，结合activeIndex判断状态：

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

List<StepperData> stepperData = [
  StepperData(
    title: const Text("步骤1"),
    iconWidget: Container(
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: activeIndex >= 0 ? Colors.green : Colors.grey,
        borderRadius: const BorderRadius.all(Radius.circular(30)),
      ),
      child: Image.asset(
        'assets/step1.png',
        height: 20,
        width: 20,
      ),
    ),
  ),
  // 其他步骤按相同逻辑配置
];

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