CODEWITHSUNDEEP
flutter
Dasun Dola
Dasun Dola

Reputation: 613

How to add images to the each steps in to anotherstepperbar on flutter?

I want to add steps images to each step in the "anotherstepper" bar how to do that?

code

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,
        ),
      ),

Unfortunately, I can't upload images to StackOverflow .Then it says "Failed to upload image; an error occurred on the server".I hope you can understand what I mean by this question. Thank You!

Upvotes: 0

Views: 126

Answers (1)

Rajnish Sharma
Rajnish Sharma

Reputation: 36

Adding separate images/icons is not supported by the package version 1.0.4. But it will support changing icons for every stepper point in another_stepper: ^1.1.4. Here is how you can implement this: You get iconWidget inside the StepperData. You can add separate icons as follows:

  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",
    ),
  ];

Now one point to note here is if you are sending icons of different height and width, you need to mention height and width in the Another Stepper widget

iconWidth: 40, iconHeight: 40,

Upvotes: 1

Related Questions