Flutter中如何为AnotherStepper的每个步骤添加独立图片？

你的核心问题是把dotWidget写死成了统一的堆叠容器，导致所有步骤显示相同内容。要实现每个步骤圆圈加载对应图片，只需为每个StepModel单独配置dotWidget即可。

具体实现步骤 #

1. 准备步骤数据
   先把每个步骤的标题、描述和对应图片路径整理成列表：

   final List<Map<String, dynamic>> stepData = [
     {
       "title": "步骤1",
       "description": "第一步完成",
       "imagePath": "assets/step1.png"
     },
     {
       "title": "步骤2",
       "description": "第二步完成",
       "imagePath": "assets/step2.png"
     },
     {
       "title": "步骤3",
       "description": "第三步完成",
       "imagePath": "assets/step3.png"
     },
   ];
   

2. 动态生成StepModel列表
   遍历步骤数据，为每个步骤单独设置对应的图片作为dotWidget：

   List<StepModel> steps = stepData.map((item) {
     return StepModel(
       title: Text(item["title"]),
       subtitle: Text(item["description"]),
       dotWidget: Container(
         width: 40,
         height: 40,
         decoration: BoxDecoration(
           shape: BoxShape.circle,
           border: Border.all(color: Colors.blueAccent, width: 2),
         ),
         child: ClipOval(
           child: Image.asset(
             item["imagePath"],
             fit: BoxFit.cover,
             width: 36,
             height: 36,
           ),
         ),
       ),
     );
   }).toList();
   

3. 传入AnotherStepper组件
   把生成的steps列表传给组件：

   AnotherStepper(
     stepperList: steps,
     stepperDirection: Axis.vertical, // 可改为Axis.horizontal实现横向步骤条
     activeBarColor: Colors.blueAccent,
     inActiveBarColor: Colors.grey.shade300,
   )
   

注意事项 #

• 确保在pubspec.yaml中正确配置图片资源路径：

  flutter:
    assets:
      - assets/step1.png
      - assets/step2.png
      - assets/step3.png
  

• 如果你的图片本身就是圆形，可以去掉ClipOval直接使用Image.asset；如果需要调整图片大小或样式，修改Container和Image的参数即可。

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