How to get this stepper in flutter?

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

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

...