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

【问题标题】：How to add separate images to the stepper bar on flutter?如何在颤动的步进栏上添加单独的图像？
【发布时间】：2022-11-06 03:03:17
【问题描述】：

我使用另一个步进条依赖项（“another_stepper: ^1.0.4”）构建了一个步进条。它运作良好。像这样...

但我想在这些步骤中添加单独的图像。当我尝试时没有显示。它显示“无法加载”。我无法理解其原因。我在“pubspec.yaml”文件中正确添加了图像

我的代码

 @override
  State<BarScreen> createState() => _BarScreenState();
}

class _BarScreenState extends State<BarScreen> {
  List<StepperData> stepperData = [
    StepperData(
      title: "Order Placed",
      subtitle: "",
    ),
    StepperData(
      title: "Preparing",
      subtitle: "",
    ),
    StepperData(
      title: "On the way",
      subtitle: "",
    ),
    StepperData(
      title: "Delivered",
      subtitle: "",
    ),
  ];
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Padding(
          padding: const EdgeInsets.only(left: 20),
          child: AnotherStepper(
            stepperList: stepperData,
            stepperDirection: Axis.vertical,
            horizontalStepperHeight: 70,
            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('assests/logo.png'),
                        height: 10,
                        width: 10,
                      ),
                    ]),
                    Row(children: const <Widget>[
                      Image(
                        image: AssetImage('assests/logo.png'),
                        height: 10,
                        width: 1,
                      ),
                    ]),
                  ],
                )),
            activeBarColor: Colors.green,
            inActiveBarColor: Colors.grey,
            activeIndex: 2,
            barThickness: 8,
          ),
        ),
      ),
    );
  }
}

如何添加单独的图像？

【问题讨论】：

您是否在pubspec.yaml 文件中设置了资产路径？
这个包不支持不同的图标。
请显示您的 pubspec 文件资产部分
我第一次看到"Assests" 在你的路径中，应该是"assets"。检查 pubspec 是否有正确的缩进。

标签： flutter flutter-layout flutter-dependencies flutter-animation

【解决方案1】：

也许您的文件夹名称不正确。

更改image: AssetImage('assests/logo.png'),

到image: AssetImage('assets/logo.png'),

【讨论】：

【解决方案2】：

软件包版本 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，

【讨论】：