如何在颤动的步骤栏中添加单独的图像？答案

【问题标题】：How to add separate images into step bar on flutter?如何在颤动的步骤栏中添加单独的图像？
【发布时间】：2022-11-06 02:56:03
【问题描述】：

我想在“anotherstepper”栏中的每个步骤中添加步骤图像怎么做？

例如：在第 1 步圈我想添加第 1 步图像，在第 2 步第 2 圈我想像我的意思一样添加第 2 步图像。我希望你能理解我的意思。

代码

Container(
        width: 500,
        height: 500,
        child: AnotherStepper(
          stepperList: stepperData,
          stepperDirection: Axis.horizontal,
          horizontalStepperHeight: 100,
          dotWidget: Container(
            padding: const EdgeInsets.all(8),
            decoration: const BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.all(Radius.circular(30))),
            child: Column(
              children: <Widget>[
                Row(children: const <Widget>[
                  Image(
                    image: AssetImage('assets/step1.png'),
                    height: 20,
                    width: 20,
                  ),
                ]),
                Row(children: const <Widget>[
                  Image(
                    image: AssetImage('assets/step2.png'),
                    height: 20,
                    width: 20,
                  ),
                ]),
              ],
            ),
          ),
          activeBarColor: Colors.green,
          inActiveBarColor: Colors.grey,
          activeIndex: 2,
          barThickness: 8.5,
          gap: 30,
        ),
      ),
    );
  }
}

late double activeIndex;
  List<StepperData> stepperData = [
    StepperData(
      title: "",
      subtitle: "",
    ),
    StepperData(
      title: "",
      subtitle: "",
    ),
    StepperData(
      title: "",
      subtitle: "",
    ),
    StepperData(
      title: "",
      subtitle: "",
    ),
  ];
  @override
  void initState() {
    super.initState();
  }

我想要这样

但我的输出

【问题讨论】：

您使用什么库？
@fairycatto “另一个 stepperbar” 库
我建议 Aviraj Patel 提到的同一件事，该软件包不支持将多个图像添加到步进器中

标签： flutter

【解决方案1】：

你正在使用https://pub.dev/packages/another_stepper

这个another_stepper 包，但它不支持不同的图像，它只支持一个图像。请使用另一个步进器包。

我建议这样做： https://pub.dev/packages/im_stepper im_stepper

【讨论】：

【解决方案2】：

为此，您可以使用 Stack Widget 而不是使用列。

删除列并像这样添加堆栈：

Stack(
         children: <Widget>[
            Row(children: const <Widget>[
              Image(
                    image: AssetImage('assets/step1.png'),
                    height: 20,
                    width: 20,
                  ),
                ]),
                Row(children: const <Widget>[
                  Image(
                    image: AssetImage('assets/step2.png'),
                    height: 20,
                    width: 20,
                  ),
                ]),

【讨论】：

【解决方案3】：

软件包版本 1.0.4 不支持添加单独的图像/图标。但它将支持更改another_stepper: ^1.1.4 中每个步进点的图标。以下是如何实现它：你在StepperData 中得到iconWidget。您可以添加单独的图标，如下所示：

  List<StepperData> stepperData = [
    StepperData(
      title: "Order Placed",
      subtitle: "Your order has been placed",
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_one, color: Colors.white),
      )
    ),
    StepperData(
      title: "Preparing",
      subtitle: "Your order is being prepared",
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_two, color: Colors.white),
      )
    ),
    StepperData(
      title: "On the way",
      subtitle: "Our delivery executive is on the way to deliver your item",
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_3, color: Colors.white),
      )
    ),
    StepperData(
      title: "Delivered",
    ),
  ];

现在需要注意的一点是，如果您要发送不同高度和宽度的图标，则需要在 Another Stepper 小部件中提及高度和宽度

图标宽度：40，图标高度：40，

【讨论】：