How to get this stepper in flutter?

Question

enter image description here

I want to achieve this kind of stepper

So far i have tried using AnotherStepper package from pub.dev

 List<StepperData> stepperData = [
    StepperData(
      title: StepperText(
        "Order Placed",
        textStyle: const TextStyle(
          color: Colors.grey,
        ),
      ),
      subtitle: StepperText("Your order has been placed"),
    ),
    StepperData(
      title: StepperText("Preparing"),
      subtitle: StepperText("Your order is being prepared"),
    ),
    StepperData(
      title: StepperText("On the way"),
      subtitle: StepperText(
          "Our delivery executive is on the way to deliver your item"),
    ),
    StepperData(
      title: StepperText("Delivered",
          textStyle: const TextStyle(
            color: Colors.grey,
          )),
    ),
  ];

 AnotherStepper(
                // this is removed 
                
                // dotWidget: Container(
                //   padding: EdgeInsets.all(8),
                //   decoration: BoxDecoration(
                //       color: Colors.red,
                //       borderRadius: BorderRadius.all(Radius.circular(30))),
                //   child: Icon(Icons.fastfood, color: Colors.white),
                // ),                      
                stepperList: stepperData,
                stepperDirection: Axis.vertical,
                gap: 20,
                iconWidth: 24,
                iconHeight: 24,
                activeBarColor: Colors.green,
                inActiveBarColor: Colors.grey,
                activeIndex: 1,
                barThickness: 8,
              ),

I want to conditionally grey out the style of the subtitle based on the activeIndex and i want to achieve the dot color. How can i do that ? An assist would be greatly appreciated.

Desired Image

OutputImage

@JohnJoe It is a package https://pub.dev/packages/another_stepper — New User, Mar 16 '23 at 14:50

Marcel Dz · Accepted Answer · 2023-03-21T11:27:02.103

I have created a MVP for you. https://zapp.run/edit/ze1206q1e130?theme=dark&lazy=false

You need to change the way you are getting the data for your purpose, in my case I created a JSON with the Stepperdata. I also created a function changeStepperIndex so you can set the current index for the specific user in your app logic. Then in stepperlist parameter im using List.generate() so we can use a condition check i == activeIndex for all styling purposes. For the MVP im changing the color of title and subtitle based on active or inactive element. With this approach you can use the pattern for all the stylings in there.

...

 void changeStepperIndex(int val){
      setState(() {
              activeIndex = val;
      });
    }

    List stepperData = [
      {
        "title":"Order Placed",
        "subTitle":"Your order has been placed"
      },
      {
        "title":"Preparing",
        "subTitle":"Your order is being prepared"
      },
      {
        "title":"On the way",
        "subTitle":"Our delivery executive is on the way to deliver your item"
      },
      {
        "title":"Delivered",
        "subTitle":""
      }
    ];


    return Container(child: Center(child: Column(
      children: [
         AnotherStepper(
                // this is removed 
                
                // dotWidget: Container(
                //   padding: EdgeInsets.all(8),
                //   decoration: BoxDecoration(
                //       color: Colors.red,
                //       borderRadius: BorderRadius.all(Radius.circular(30))),
                //   child: Icon(Icons.fastfood, color: Colors.white),
                // ),                      
                stepperList: List<StepperData>.generate(
      stepperData.length,
      (i) => StepperData(
    iconWidget: Container(width:30, height:30, decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(100),
color:i ==  activeIndex || i < activeIndex ? Colors.green : Colors.grey ,
    )),
      title: StepperText(
        stepperData[i]["title"],
        textStyle:  TextStyle(
          color: i ==  activeIndex ? Colors.black : Colors.grey,
        ),
      ),
      subtitle: StepperText(stepperData[i]["subTitle"], textStyle:  TextStyle(
          color: i ==  activeIndex ? Colors.black : Colors.grey,
        ),),
    ),
),
                stepperDirection: Axis.vertical,
                //gap: 20,
                iconWidth: 24,
                iconHeight: 24,
                activeBarColor: Colors.green,
                inActiveBarColor: Colors.grey,
                activeIndex: activeIndex,
                barThickness: 8,
              ),
              TextButton(child: Text('change step 1'), onPressed: (){
                changeStepperIndex(0);
              },),
              TextButton(child: Text('change step 2'), onPressed: (){
                changeStepperIndex(1);
              },),
              TextButton(child: Text('change step 3'), onPressed: (){
                changeStepperIndex(2);
              },),
              TextButton(child: Text('change step 4'), onPressed: (){
                changeStepperIndex(3);
              },),
      ],    )));

...

Well thank you for the insight, but you are focusing on the small sub problem, the question is to achieve the above stepper. You could provide these insights as comment than posting them as answer @Marcel Dz — New User, Mar 16 '23 at 18:30
im sorry for not reading the main problem, i provided you a mvp — Marcel Dz, Mar 17 '23 at 10:26
Thank you tons for considering to answer my question, there is just a single tweek then it is almost done, if there any possible way that i can change the icon ball color from blue to green, your current mvp is similar to the output image, i want it like desired image, i'll be grateful if you could possibly do that one tweek for me. — New User, Mar 21 '23 at 07:03
i updated my question, i simply added a custom icon which is a green or gray circle, depending on index position — Marcel Dz, Mar 21 '23 at 11:27

How to get this stepper in flutter?

1 Answers1